/* ============================================================
   GUIDE PAGES · LANDING LAYOUT
   Loaded on every pillar and supporting guide (template-guide-*).
   Everything is scoped under main.pv and uses the theme's
   colour tokens, so light mode and the Customizer accent apply.
   ============================================================ */

.pv { --pv-gutter: clamp(20px, 4vw, 44px); --pv-bar-top: 116px; }
@media (max-width: 760px) { .pv { --pv-bar-top: 70px; } }

/* Land chapter headings just below the header + chapter bar (bar ≈ 58px),
   cancelling most of the chapter's own top padding. */
.pv .pv-chapter { scroll-margin-top: calc(var(--pv-bar-top) + 58px - clamp(52px, 5.5vw, 80px)); }

/* ---------- hero ---------- */
.pv-hero { position: relative; overflow: hidden; padding: clamp(120px, 15vw, 168px) 0 clamp(48px, 6vw, 80px); } /* clears the fixed header, as .guide-hero does */
@media (max-width: 760px) { .pv-hero { padding-top: clamp(96px, 26vw, 120px); } }
.pv-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 70% at 85% 30%, var(--spot), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, var(--accent-soft), transparent 70%);
}
.pv-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 60% 40%, #000, transparent 75%);
  mask-image: radial-gradient(70% 60% at 60% 40%, #000, transparent 75%);
  opacity: .55;
}
.pv-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.pv-title { font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; }
@media (max-width: 760px) { .pv .pv-title { font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.08; } }
.pv-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.pv-map { position: relative; padding: 22px 22px 14px; } /* float-card is absolute on the homepage */
.pv-map-head { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pv-map ol { list-style: none; margin: 8px 0 0; padding: 0; columns: 1; }
.pv-map li a { display: flex; gap: 14px; align-items: baseline; padding: 8px 6px; border-radius: 8px; font-size: 14.5px; color: var(--text-2); transition: color .2s, background .2s; }
.pv-map li a span { font-size: 11px; color: var(--accent); min-width: 20px; }
.pv-map li a:hover { color: var(--text); background: var(--card-hover); }

@media (max-width: 980px) {
  .pv-hero-grid { grid-template-columns: 1fr; }
  .pv-map ol { columns: 2; column-gap: 12px; }
}
@media (max-width: 560px) { .pv-map ol { columns: 1; } }

/* ---------- sticky chapter bar ---------- */
.pv-bar {
  position: sticky; top: var(--pv-bar-top); z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-block: 1px solid var(--border);
}
.pv-bar-list {
  list-style: none; margin: 0; padding: 10px 0; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
/* Fade an edge only while more chapters are hidden beyond it (set by JS). */
.pv-bar-list.more-right { -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
.pv-bar-list.more-left { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%); mask-image: linear-gradient(90deg, transparent, #000 10%); }
.pv-bar-list.more-left.more-right { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pv-bar-list::-webkit-scrollbar { display: none; }
.pv-bar-list a {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 14px; border-radius: 100px; border: 1px solid transparent;
  font-size: 13px; color: var(--text-2); transition: color .2s, background .2s, border-color .2s;
}
.pv-bar-list a span { font-size: 10.5px; color: var(--text-3); }
.pv-bar-list a:hover { color: var(--text); background: var(--card-hover); }
.pv-bar-list a.is-active { color: var(--text); background: var(--accent-soft); border-color: var(--accent-line); }
.pv-bar-list a.is-active span { color: var(--accent); }

/* ---------- chapters ---------- */
.pv-chapter { padding: clamp(52px, 5.5vw, 80px) 0; position: relative; }
.pv-band { background: var(--bg-2); border-block: 1px solid var(--border); }
.pv-glow { background: radial-gradient(70% 60% at 50% 0%, var(--accent-soft), transparent 70%); }
.pv-chapter--cta { padding-top: 0; }
/* after a shaded band, the closing panel needs a chapter's worth of air */
.pv-band + .pv-chapter--cta { padding-top: clamp(52px, 5.5vw, 80px); }

/* newsletter: closing panel, copy left / form right */
.pv .card.pv-news {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4vw, 56px); overflow: hidden; border-color: var(--accent-line);
  background: radial-gradient(120% 140% at 0% 0%, var(--accent-soft), transparent 55%), var(--card-grad);
}
.pv .card .pv-news-glow { position: absolute; right: -120px; bottom: -160px; width: 420px; height: 320px; background: radial-gradient(ellipse at center, var(--accent-glow), transparent 65%); opacity: .35; filter: blur(50px); pointer-events: none; }
.pv-news-copy .h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.1; letter-spacing: -0.03em; margin: 0; max-width: 18ch; }
.pv-news-copy p { margin: 16px 0 0; color: var(--text-2); font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.65; max-width: 46ch; }
.pv-news-form { display: flex; gap: 10px; }
.pv-news-form .field { flex: 1 1 auto; min-width: 0; }
.pv-news-form .btn { flex: none; }
@media (max-width: 860px) {
  .pv .card.pv-news { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pv-news-form { flex-direction: column; }
  .pv-news-form .btn { justify-content: center; }
}

.pv-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3vw, 36px); max-width: 760px; }
.pv-head .h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -0.03em; }
.pv-num {
  font-size: clamp(2.8rem, 5.6vw, 4.6rem); line-height: .9; font-weight: 600; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 2px var(--accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, transparent) 0%, transparent 85%);
  -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 18px var(--accent-soft));
}
.pv-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.pv-head-row .pv-head { margin-bottom: 0; }

.pv-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.pv-sticky { position: sticky; top: calc(var(--pv-bar-top) + 84px); }
@media (max-width: 980px) {
  .pv-split { grid-template-columns: 1fr; gap: 22px; }
  .pv-sticky { position: static; }
  .pv-split > .pv-flow { padding-top: 0; }
}

.pv-prose { max-width: 68ch; }
.pv-prose p { font-size: 1.06rem; line-height: 1.75; }
.pv-prose ul, .pv-prose ol, .pv-note ul, .pv-note ol { margin: 18px 0 22px; padding-left: 1.2em; display: grid; gap: 12px; }
.pv-prose li, .pv-note li { font-size: 1.04rem; line-height: 1.7; color: var(--text-2); padding-left: 4px; }
.pv-prose li::marker, .pv-note li::marker { color: var(--accent); }
.pv-prose li strong { color: var(--text); }
.pv-prose--lead p { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--text); letter-spacing: -0.01em; }
.pv-statement { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.5; color: var(--text); max-width: 62ch; margin: 0 0 clamp(28px, 4vw, 44px); letter-spacing: -0.01em; }
.pv-sub { font-size: 1.05rem; color: var(--text-2); max-width: 70ch; margin: clamp(32px, 4vw, 44px) 0 18px; }
.pv-caption { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); font-weight: 500; margin: 0 0 16px; }

/* blocks inside a chapter: one rhythm for any mix of content */
.pv-flow > * { margin-top: 0; margin-bottom: 0; }
.pv-flow > * + * { margin-top: clamp(24px, 3vw, 36px); }
.pv-flow > .pv-statement + * { margin-top: 0; }
.pv-flow > .pv-statement { margin-bottom: clamp(24px, 3vw, 36px); }
.pv-flow > .pv-sub + * { margin-top: 20px; }
.pv-flow > .pv-sub { margin-top: clamp(32px, 4vw, 44px); }
.pv-flow > :first-child { margin-top: 0; }
.pv-flow .prose > :first-child { margin-top: 0; }
.pv-flow .prose > :last-child { margin-bottom: 0; }

/* chapter opened by text: pinned heading + text, then full-width components */
.pv-rest { margin-top: clamp(32px, 3.5vw, 48px); }
.pv-split > .pv-head, .pv-headrow > .pv-head { margin-bottom: 0; }
.pv-rest > :first-child { margin-top: 0; }
.pv-split .pv-flow > .pv-statement:last-child { margin-bottom: 0; }
.pv-split > .pv-flow { padding-top: clamp(4px, 1.2vw, 18px); }

/* header row: heading left, short intro right on the heading's last line */
.pv-headrow { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 72px); align-items: end; }
.pv-headrow .pv-flow > :last-child, .pv-headrow .pv-statement { margin-bottom: 0; }
.pv-headrow .pv-statement, .pv-headrow .pv-prose--lead p { font-size: clamp(1.08rem, 1.5vw, 1.3rem); }
@media (max-width: 980px) { .pv-headrow { grid-template-columns: 1fr; gap: 18px; } }

/* text that follows a component: full-width note */
/* same panel as the pillar's "worked example" (.pv-example) */
.pv-note { padding: clamp(22px, 3vw, 32px); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card-grad); }
.pv-note p, .pv-note li { font-size: 1.04rem; line-height: 1.75; color: var(--text-2); max-width: none; }
.pv-note p { margin: 0; }
.pv-note p + p, .pv-note p + ul, .pv-note ul + p { margin-top: 14px; }
.pv-note strong { color: var(--text); }

/* comparison tables */
.pv-table .cmp-scroll { margin-top: 0; }
.pv-table .cmp { background: var(--card-grad); }

.pv-back { display: inline-flex; margin-top: clamp(24px, 3vw, 32px); }

/* quote + banner */
.pv-quote {
  margin-top: 32px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-soft), transparent 70%), var(--card-grad);
  border: 1px solid var(--accent-line);
}
.pv-quote p { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--text); margin: 10px 0 0; letter-spacing: -0.01em; }
.pv-quote--long p { font-size: clamp(1.02rem, 1.25vw, 1.14rem); line-height: 1.65; }
.pv-quote-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.pv-banner {
  margin-top: clamp(28px, 4vw, 44px); padding: clamp(28px, 4vw, 48px); border-radius: var(--radius);
  background: radial-gradient(80% 120% at 0% 0%, var(--accent-soft), transparent 60%), var(--surface-2);
  border: 1px solid var(--accent-line);
}
.pv-banner p { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.45; color: var(--text); margin: 12px 0 0; max-width: 60ch; letter-spacing: -0.015em; }

/* grids + tiles */
.pv-grid { display: grid; gap: 14px; }
.pv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1200px) { .pv-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .pv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pv-grid--3, .pv-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pv-grid--2, .pv-grid--3, .pv-grid--4, .pv-grid--5 { grid-template-columns: 1fr; } }

.pv-tile { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.pv-tile .h3 { font-size: 1.12rem; line-height: 1.3; }
.pv-tile p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
.pv-tile-n { font-size: 11px; color: var(--accent); letter-spacing: .1em; }

/* comparison "vs" cards */
.pv-vs { padding: 0; overflow: hidden; }
.pv-vs-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.pv-vs-bd { font-weight: 600; font-size: 15px; }
.pv-vs-tag { font-size: 12px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); padding: 4px 10px; border-radius: 100px; }
.pv-vs-row { padding: 16px 22px; }
.pv-vs-row + .pv-vs-row { border-top: 1px dashed var(--border); }
.pv-vs-row p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.pv-vs-row--accent p { color: var(--text); }
.pv-vs-k { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }

/* bento */
.pv-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(190px, auto); gap: 14px; }
.pv-bento-item { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: clamp(76px, 7vw, 92px) 26px 26px; position: relative; overflow: hidden; }
.pv-bento-item:first-child { grid-row: span 2; background: radial-gradient(90% 70% at 100% 0%, var(--accent-soft), transparent 70%), var(--card-grad); }
.pv-bento-item:first-child .h3 { font-size: 1.7rem; }
.pv-bento-item:first-child p { font-size: 1.05rem; }
.pv-bento-item .h3 { font-size: 1.2rem; }
.pv-bento-item p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
/* .pv prefix beats the theme's ".card > *" rule, which forces position: relative. */
.pv .card .pv-big-n { position: absolute; top: 18px; right: 22px; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 600; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 60%, transparent); line-height: 1; }
@media (max-width: 900px) { .pv-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pv-bento { grid-template-columns: 1fr; } .pv-bento-item:first-child { grid-row: auto; } }

/* framework stepper */
.pv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr)); gap: 14px; position: relative; }
.pv-steps::before { content: ""; position: absolute; top: 19px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-line) 10%, var(--accent-line) 90%, transparent); }
.pv-step { display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; }
.pv-step-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--accent); background: var(--bg-2); border: 1px solid var(--accent-line); box-shadow: 0 0 0 6px var(--bg-2), 0 0 24px var(--accent-soft); position: relative; z-index: 1; }
.pv-step-card { width: 100%; height: 100%; padding: 22px; text-align: center; }
.pv-step-card .h3 { font-size: 1.15rem; }
.pv-step-card p { font-size: 14px; color: var(--text-2); line-height: 1.6; margin: 8px 0 0; }
@media (max-width: 980px) {
  .pv-steps { grid-template-columns: 1fr; gap: 0; }
  .pv-steps::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; background: var(--accent-line); }
  .pv-step { flex-direction: row; align-items: flex-start; padding-bottom: 14px; }
  .pv-step-card { text-align: left; }
}
.pv-example { margin-top: clamp(28px, 4vw, 44px); padding: clamp(22px, 3vw, 32px); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card-grad); }
.pv-example p { margin: 0; font-size: 1.04rem; line-height: 1.75; color: var(--text-2); }
.pv-example strong { color: var(--text); }

/* longer frameworks (6+ steps): numbered card grid */
.pv-fw { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px; }
/* rows of --cols cards; a shorter last row stretches to fill the width */
.pv-fw > .pv-fw-item { flex: 1 1 calc((100% - (var(--cols, 4) - 1) * 14px) / var(--cols, 4)); min-width: 0; }
.pv-fw-item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(76px, 7vw, 92px) 26px 26px; overflow: hidden; }
.pv-fw-item .h3 { font-size: 1.12rem; line-height: 1.3; }
.pv-fw-item p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
@media (max-width: 1080px) { .pv-fw { --cols: 2 !important; } }
@media (max-width: 600px) { .pv-fw { --cols: 1 !important; } .pv-fw-item { padding-top: 72px; } }

/* sub-headed text items as topic cards */
.pv-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pv-topic { padding: clamp(22px, 2.4vw, 30px); display: flex; flex-direction: column; gap: 10px; }
.pv-topic .h3 { font-size: 1.15rem; line-height: 1.35; margin: 0; }
.pv-topic .prose p, .pv-topic .prose li { font-size: 15px; line-height: 1.7; color: var(--text-2); max-width: none; }
.pv-topic .prose p { margin: 0; }
.pv-topic .prose p + p, .pv-topic .prose p + ul, .pv-topic .prose ul + p { margin-top: 10px; }
.pv-topic .prose ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 8px; }
.pv-topic .prose li::marker { color: var(--accent); }
.pv-topics > .pv-topic:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) { .pv-topics { grid-template-columns: 1fr; } }

/* process timeline: cards alternate sides and stagger by half a card, so
   both sides of the line fill and the steps read as one compact zig-zag */
.pv-timeline { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 88px; row-gap: 16px; }
.pv-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(180deg, transparent, var(--accent-line) 4%, var(--accent-line) 96%, transparent); }
.pv-tl-item { position: relative; }
.pv-tl-item:nth-child(odd) { grid-column: 1; }
.pv-tl-item:nth-child(even) { grid-column: 2; }
.pv-tl-item:nth-child(1) { grid-row: 1 / span 2; }
.pv-tl-item:nth-child(2) { grid-row: 2 / span 2; }
.pv-tl-item:nth-child(3) { grid-row: 3 / span 2; }
.pv-tl-item:nth-child(4) { grid-row: 4 / span 2; }
.pv-tl-item:nth-child(5) { grid-row: 5 / span 2; }
.pv-tl-item:nth-child(6) { grid-row: 6 / span 2; }
.pv-tl-item:nth-child(7) { grid-row: 7 / span 2; }
.pv-tl-item:nth-child(8) { grid-row: 8 / span 2; }
.pv-tl-item:nth-child(9) { grid-row: 9 / span 2; }
.pv-tl-item:nth-child(10) { grid-row: 10 / span 2; }
.pv-tl-item:nth-child(11) { grid-row: 11 / span 2; }
.pv-tl-item:nth-child(12) { grid-row: 12 / span 2; }
.pv-tl-item:nth-child(13) { grid-row: 13 / span 2; }
.pv-tl-item:nth-child(14) { grid-row: 14 / span 2; }
.pv-tl-item:nth-child(15) { grid-row: 15 / span 2; }
.pv-tl-item:nth-child(16) { grid-row: 16 / span 2; }
.pv-tl-node { position: absolute; top: 24px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: var(--accent); background: var(--bg); border: 1px solid var(--accent-line); box-shadow: 0 0 0 6px var(--bg); z-index: 1; }
.pv-band .pv-tl-node { background: var(--bg-2); box-shadow: 0 0 0 6px var(--bg-2); }
.pv-tl-item:nth-child(odd) .pv-tl-node { right: -66px; }
.pv-tl-item:nth-child(even) .pv-tl-node { left: -66px; }
.pv-tl-card { padding: 24px; }
.pv-tl-card .h3 { font-size: 1.2rem; }
.pv-tl-card > p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 8px 0 0; }
.pv-tl-eg { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: 14px; line-height: 1.55; color: var(--text); }
.pv-tl-eg b { display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 4px; }
@media (max-width: 860px) {
  .pv-timeline { grid-template-columns: 1fr; row-gap: 14px; }
  .pv-timeline::before { left: 21px; }
  .pv-tl-item:nth-child(n) { grid-column: 1; grid-row: auto; padding-left: 64px; }
  .pv-tl-item:nth-child(n) .pv-tl-node { left: 0; right: auto; top: 22px; }
}

/* mistakes */
.pv-mistakes { gap: 0 32px; }
.pv-mistake { display: flex; gap: 18px; padding: 22px 0; border-top: 1px solid var(--border); }
.pv-x { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.pv-mistake .h3 { font-size: 1.08rem; }
.pv-mistake p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 6px 0 0; }
/* an odd last item spans the row, so the list ends flush instead of half-empty */
@media (min-width: 641px) { .pv-mistakes > .pv-mistake:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* case study lessons */
.pv-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pv-lesson { display: flex; flex-direction: column; gap: 10px; padding: 24px; }
.pv-lesson .h3 { font-size: 1.12rem; }
.pv-lesson p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
@media (max-width: 640px) { .pv-lessons { grid-template-columns: 1fr; } }

/* takeaways */
.pv-take { display: flex; flex-direction: column; gap: 12px; padding: 26px; }
.pv-take .h3 { font-size: 1.15rem; }
.pv-take p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; margin: 0; }
.pv-check { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--bg); background: var(--accent); box-shadow: 0 8px 24px -6px var(--accent-glow); }
.pv-check svg { width: 18px; height: 18px; }

/* supporting guides */
.pv-guides { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; }
.pv-guide { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 56px; min-height: 210px; }
.pv-guide .rel-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pv-guide .h3 { font-size: 1.15rem; }
.pv-guide p { font-size: 14px; color: var(--text-2); line-height: 1.55; margin: 0; }
.pv .card .pv-guide-go { position: absolute; left: 24px; bottom: 20px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border-2); color: var(--text-2); transition: background .25s, color .25s, transform .25s var(--ease), border-color .25s; }
.pv-guide-go svg { width: 15px; height: 15px; }
.pv-guide:hover .pv-guide-go { background: var(--accent); border-color: var(--accent); color: var(--bg); transform: translateX(4px); }
@media (max-width: 1080px) { .pv-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pv-guides { grid-template-columns: 1fr; } }

/* FAQ in split layout */
.pv .pv-split .faq { margin-top: 0; }

/* author: portrait panel left, identity / bio / actions right */
.pv .card.pv-author {
  display: grid; grid-template-columns: clamp(220px, 26vw, 320px) minmax(0, 1fr);
  grid-template-areas: "photo id" "photo bio" "photo cta"; grid-template-rows: auto auto 1fr;
  column-gap: clamp(28px, 4.5vw, 64px); padding: clamp(20px, 2.4vw, 28px); align-items: start;
}
.pv-author-photo { grid-area: photo; margin: 0; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--accent-line); box-shadow: 0 24px 60px -28px var(--accent-glow); }
.pv-author-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pv-author-id { grid-area: id; padding-top: clamp(8px, 1.6vw, 22px); }
.pv-author-id .h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.1; letter-spacing: -0.03em; margin: 0; }
.pv-author-role { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent); font-size: 12px; letter-spacing: 0.06em; }
.pv-author-bio { grid-area: bio; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--border); color: var(--text-2); font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.7; max-width: 62ch; }
.pv-author-cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
@media (max-width: 760px) {
  .pv .card.pv-author { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "photo id" "bio bio" "cta cta"; grid-template-rows: auto; column-gap: 18px; align-items: center; }
  .pv-author-photo { border-radius: 16px; }
  .pv-author-id { padding-top: 0; }
  .pv-author-role { margin-top: 8px; padding: 0; border: 0; background: none; font-size: 11px; line-height: 1.5; }
  .pv-author-bio { margin-top: 20px; padding-top: 20px; }
  .pv-author-cta { margin-top: 20px; }
  .pv-author-cta .btn { flex: 1 1 auto; justify-content: center; }
}

/* Browsers without text outlines get solid numbers instead of invisible ones. */
@supports not (-webkit-text-stroke: 1px) {
  .pv-num { color: var(--accent); background: none; }
  .pv .card .pv-big-n { color: var(--accent-line); }
}

/* Two-column moments (tablet): a lone last card spans the row instead of
   leaving half of it empty. */
@media (min-width: 641px) and (max-width: 1080px) {
  .pv-grid--4 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 1080px) {
  .pv-guides > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .pv-grid--3 > :last-child:nth-child(odd),
  .pv-grid--5 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 641px) {
  .pv-grid--2:not(.pv-mistakes) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 880px) {
  .pv .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* In-text links (guide cross-links, business sites): same treatment as the
   article layout so they read as links in every text block. */
.pv :is(.prose, .pv-statement, .pv-sub, .pv-quote, .pv-example, .pv-banner, .pv-tile, .pv-take, .pv-mistake, .pv-tl-card, .pv-fw-item, .pv-step-card) a:not(.btn):not(.link-arrow) {
  color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s;
}
.pv :is(.prose, .pv-statement, .pv-sub, .pv-quote, .pv-example, .pv-banner, .pv-tile, .pv-take, .pv-mistake, .pv-tl-card, .pv-fw-item, .pv-step-card) a:not(.btn):not(.link-arrow):hover { color: var(--accent); text-decoration-color: var(--accent); }


/* ---------- Case Studies page ---------- */
.pv-chapter--intro { padding-bottom: 0; }
.pv-case > * + * { margin-top: clamp(32px, 4vw, 48px); }
.pv-case .pv-caption { margin-bottom: 16px; }
.pv-facts { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pv-fact { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card-grad); display: flex; flex-direction: column; gap: 8px; }
.pv-fact dt { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.pv-fact dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text); }
.pv-fact dd a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.pv-fact dd a:hover { color: var(--accent); }
@media (max-width: 900px) { .pv-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pv-facts { grid-template-columns: 1fr; gap: 10px; } .pv-fact { padding: 14px 16px; gap: 6px; } }
/* a lone last fact spans the remaining width of its row */
@media (min-width: 901px) {
  .pv-facts > .pv-fact:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .pv-facts > .pv-fact:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 561px) and (max-width: 900px) { .pv-facts > .pv-fact:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.pv-note h3 { font-size: 1.15rem; margin: 0 0 10px; color: var(--text); }
.pv-tl-eg a { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.pv-tl-eg a:hover { color: var(--accent); }
.pv-case-links, .pv-case-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-news-copy .kicker { display: inline-flex; margin-bottom: 14px; }
.pv-cases .pv-news-copy .h2 { max-width: 26ch; }
@media (max-width: 480px) { .pv-case-cta .btn, .pv-case-links .btn { flex: 1 1 auto; justify-content: center; } }