/* ==========================================================================
   Winfrey Publishing — Page and section compositions
   ========================================================================== */

/* ====================================================== HOME — hero ===== */
.hero {
  position: relative;
  background: var(--grad-ink);
  color: var(--text-invert);
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3.5rem, 7vw, 7rem);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -25% -15% auto auto;
  width: min(820px, 90vw);
  aspect-ratio: 1;
  background: var(--grad-glow);
  pointer-events: none;
}
/* Faint ruled-manuscript texture behind the copy */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 34px);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}
.hero h1 { color: #fff; font-size: var(--fs-5xl); max-width: 15ch; margin-bottom: var(--sp-5); }
.hero h1 em {
  font-style: italic;
  color: var(--lantern);
  position: relative;
}
.hero .lede { color: var(--text-invert-muted); font-size: var(--fs-md); max-width: 52ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: .5em;
  list-style: none;
  font-size: var(--fs-xs);
  color: var(--text-invert-muted);
}
.hero__trust svg { color: var(--lantern); flex: none; }

/* Hero form card. Carries `.on-light` in the markup, which restores the light
   palette and link colours for the form inside it — see tokens.css. */
.hero__card {
  background: var(--paper);
  color: var(--text);
  border-radius: var(--r-xl);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  box-shadow: var(--sh-xl);
  position: relative;
}
.hero__card h2 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.hero__card .field { margin-bottom: var(--sp-3); }

/* Book stack composition */
.book-stack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-6);
}
.book-stack .book-cover:nth-child(1) { transform: rotate(-4deg) translateY(10px); }
.book-stack .book-cover:nth-child(2) { transform: scale(1.12); z-index: 2; }
.book-stack .book-cover:nth-child(3) { transform: rotate(4deg) translateY(10px); }

@media (max-width: 1023px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero h1 { max-width: 100%; }
}

/* ================================================ HOME — trust strip ==== */
.trust-strip { background: var(--paper); border-block: 1px solid var(--line); }
.trust-strip__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-strip__list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.35;
  border-right: 1px solid var(--line);
}
.trust-strip__list li:last-child { border-right: 0; }
.trust-strip__list svg { color: var(--bronze-700); flex: none; }
@media (max-width: 1023px) {
  .trust-strip__list { grid-template-columns: repeat(2, 1fr); }
  .trust-strip__list li:nth-child(2n) { border-right: 0; }
  .trust-strip__list li { border-bottom: 1px solid var(--line); }
  .trust-strip__list li:last-child { grid-column: 1 / -1; border-bottom: 0; }
}
@media (max-width: 559px) {
  .trust-strip__list { grid-template-columns: 1fr; }
  .trust-strip__list li { border-right: 0; }
}

/* ============================================ HOME — category cards ===== */
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--text-invert);
  isolation: isolate;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-xl); }
.cat-card__art { position: absolute; inset: 0; z-index: -2; }
.cat-card__art svg, .cat-card__art img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.cat-card:hover .cat-card__art svg, .cat-card:hover .cat-card__art img { transform: scale(1.06); }
.cat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,18,16,.16) 0%, rgba(20,18,16,.55) 48%, rgba(20,18,16,.9) 100%);
}
.cat-card__body { margin-top: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.cat-card__title { font-family: var(--font-display); font-size: var(--fs-xl); margin: 0; color: #fff; }
.cat-card__text { font-size: var(--fs-sm); color: rgba(255,255,255,.78); margin: 0; }
.cat-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--lantern-300);
  margin-top: var(--sp-2);
}
.cat-card:hover .cat-card__cta svg { transform: translateX(4px); }
.cat-card__cta svg { transition: transform var(--dur) var(--ease); }
.cat-card--tall { min-height: 380px; }

/* ============================================== HOME — process steps ==== */
.process { counter-reset: step; }
.process__list { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.process__item {
  counter-increment: step;
  position: relative;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}
.process__item:hover { border-color: var(--bronze-200); box-shadow: var(--sh-md); transform: translateY(-3px); }
.process__item::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--sp-5); right: var(--sp-5);
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--bronze-200);
  font-weight: 600;
}
.process__icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: var(--grad-lantern);
  color: var(--ink);
  display: grid; place-items: center;
  margin-bottom: var(--sp-4);
}
.process__title { font-family: var(--font-display); font-size: var(--fs-lg); margin: 0 0 var(--sp-2); padding-right: 3rem; }
.process__text { font-size: var(--fs-sm); color: var(--text-muted); margin: 0 0 var(--sp-3); }
.process__detail { font-size: var(--fs-xs); color: var(--text-soft); border-top: 1px dashed var(--line); padding-top: var(--sp-3); }
@media (max-width: 1023px) { .process__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .process__list { grid-template-columns: 1fr; } }

/* Vertical timeline variant used on How It Works */
.timeline { position: relative; padding-left: 0; list-style: none; margin: 0; }
.timeline::before {
  content: "";
  position: absolute;
  left: 27px; top: 12px; bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg, var(--bronze) 0%, var(--bronze-200) 100%);
}
.timeline__item { position: relative; padding: 0 0 var(--sp-8) 78px; }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__marker {
  position: absolute;
  left: 0; top: 0;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--bronze);
  color: var(--bronze-700);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  z-index: 1;
}
.timeline__item--done .timeline__marker { background: var(--bronze-700); color: #fff; }
@media (max-width: 559px) {
  .timeline::before { left: 19px; }
  .timeline__item { padding-left: 60px; }
  .timeline__marker { width: 40px; height: 40px; font-size: var(--fs-sm); }
}

/* =============================================== Featured book slider === */
.book-slider .slider__track { --slide-w: 208px; }
@media (min-width: 640px) { .book-slider .slider__track { --slide-w: 232px; } }

/* ============================================ Success story feature ===== */
.story-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.story-feature__media { position: relative; }
.story-feature__portrait {
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sh-xl);
  background: var(--parchment-200);
}
.story-feature__portrait img, .story-feature__portrait svg { width: 100%; height: 100%; object-fit: cover; }
.story-feature__book {
  position: absolute;
  right: -6%;
  bottom: -8%;
  width: 38%;
  max-width: 190px;
}
@media (max-width: 1023px) {
  .story-feature { grid-template-columns: 1fr; }
  .story-feature__book { width: 30%; right: 4%; }
}

/* ================================================= Publishing promise === */
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6) var(--sp-7); }
.promise-item { padding-top: var(--sp-5); border-top: 2px solid var(--lantern); }
.promise-item h3 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; margin-bottom: var(--sp-2); }
.promise-item p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }
@media (max-width: 899px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 559px) { .promise-grid { grid-template-columns: 1fr; } }

/* ==================================================== Guide lead band === */
.guide-band { position: relative; overflow: hidden; }
.guide-band__inner { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.guide-cover {
  width: min(280px, 70%);
  margin-inline: auto;
  filter: drop-shadow(0 24px 44px rgba(0,0,0,.34));
  transform: perspective(1000px) rotateY(-13deg) rotateX(3deg);
}
@media (max-width: 899px) { .guide-band__inner { grid-template-columns: 1fr; } }

/* ================================================== Package comparison == */
.compare-shell { position: relative; }
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.compare-table { width: 100%; min-width: 860px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.compare-table th, .compare-table td { padding: var(--sp-4); text-align: center; border-bottom: 1px solid var(--line); }

/* Every cell is opaque. Transparent cells would show through the sticky first
   column as rows slide underneath it during horizontal scrolling. */
.compare-table td { background: var(--paper); }

.compare-table thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 5;
  background: var(--paper);
  border-bottom: 2px solid var(--line-strong);
  vertical-align: top;
  box-shadow: 0 1px 0 var(--line-strong);
  /* Compact enough that the site header plus this row do not consume a third
     of a laptop viewport while the table is being read.
     The top padding reserves a slot for the "most chosen" badge in EVERY
     column. The badge is taken out of flow below, so one decorated column can
     no longer sit taller than its neighbours and leave the sticky header with
     a ragged bottom edge that clips the first body row unevenly. */
  padding-block: calc(var(--sp-4) + 24px) var(--sp-3);
}
.compare-table tbody th,
.compare-table tfoot th {
  text-align: left;
  font-weight: 500;
  color: var(--text-muted);
  position: sticky;
  left: 0;
  /* Matches the header cell so the frozen first column reads as one continuous
     band rather than changing shade partway down. */
  background: var(--paper);
  z-index: 2;
  min-width: 230px;
  border-right: 1px solid var(--line);
}
.compare-table thead th:first-child { left: 0; z-index: 6; background: var(--paper); border-right: 1px solid var(--line); }
.compare-table tbody tr:hover td, .compare-table tbody tr:hover th { background: var(--bronze-50); }
.compare-table .is-featured-col { background: var(--bronze-50); }

.compare-table tfoot td { background: var(--paper); }
.compare-table .row-group th {
  background: var(--ink);
  color: var(--text-invert);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: left;
}
.compare-table .row-group td { background: var(--ink); }

/* The icons inside these are `display: block` from the global media reset, so
   a bare span would let them ignore the cell's text-align and sit hard left.
   inline-flex makes the span an inline box that the cell can centre, and
   centres the icon within it. */
.compare-yes,
.compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.compare-yes { color: var(--success); }
.compare-no  { color: var(--line-strong); }
.compare-val { font-weight: 600; color: var(--text); }

/* Kept deliberately tight — this row is sticky, so every pixel here is taken
   off the reading area for the whole length of the table. */
.compare-head__name { font-family: var(--font-display); font-size: var(--fs-md); margin: 0; line-height: 1.2; }
.compare-head__price { font-weight: 700; color: var(--bronze-700); font-size: var(--fs-sm); margin: 2px 0 var(--sp-2); }
/* Out of flow, inside the reserved slot, so it adds no height to its cell. */
.compare-table thead .badge {
  position: absolute;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .25em .7em;
  white-space: nowrap;
}
.compare-table thead .btn { min-height: 34px; padding: .4em 1em; }

/* On short viewports a sticky header costs more than it gives. */
@media (max-height: 640px) {
  .compare-table thead th { position: static; }
}

.compare-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-5);
}
.compare-table tr[data-same="true"].is-hidden { display: none; }

/* Mobile: stacked expandable cards instead of a wide table */
.compare-mobile { display: none; }
@media (max-width: 899px) {
  .compare-scroll { display: none; }
  .compare-mobile { display: block; }
}
.compare-mobile__pkg { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); margin-bottom: var(--sp-4); overflow: hidden; }
.compare-mobile__head { padding: var(--sp-5); border-bottom: 1px solid var(--line); }
.compare-mobile__rows { list-style: none; margin: 0; padding: 0; }
.compare-mobile__rows li { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.compare-mobile__rows li:last-child { border-bottom: 0; }
.compare-mobile__rows .lbl { color: var(--text-muted); }

/* ==================================================== Services store ==== */
.store-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 1023px) { .store-layout { grid-template-columns: 1fr; } }

.filter-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}

/* When the sidebar holds more than the filter panel, the whole column sticks
   as one unit. Sticking only the panel left its siblings in normal flow, so
   they scrolled up and over it. */
.aside-sticky {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.aside-sticky .filter-panel { position: static; top: auto; }
.filter-group { padding-bottom: var(--sp-5); margin-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.filter-group__title { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-soft); margin-bottom: var(--sp-3); }
.filter-group .check { margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.filter-count { color: var(--text-soft); font-size: var(--fs-xs); }

@media (max-width: 1023px) {
  .filter-panel { position: static; }
  .filter-panel[data-collapsible] .filter-panel__body { display: none; }
  .filter-panel[data-collapsible][data-open="true"] .filter-panel__body { display: block; }
}

.plan-bar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  background: var(--ink);
  color: var(--text-invert);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  margin-top: var(--sp-6);
}
.plan-bar__count { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--lantern); }

/* ====================================================== Bookstore ======= */
.bookstore-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}
.book-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.4vw, 2.25rem); }
@media (max-width: 1023px) { .book-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.search-bar { display: flex; gap: var(--sp-2); }
.search-bar .input { flex: 1; }

/* ==================================================== Book detail ======= */
.book-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: start; }
@media (max-width: 899px) { .book-detail { grid-template-columns: minmax(0, 1fr); } }
.book-detail__gallery { position: sticky; top: calc(var(--header-h) + 1.5rem); }
@media (max-width: 899px) { .book-detail__gallery { position: static; } }
.book-detail__thumbs { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.book-detail__thumb {
  width: 62px;
  border-radius: var(--r-xs);
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--parchment-200);
  cursor: pointer;
  padding: 0;
  aspect-ratio: 2/3;
}
.book-detail__thumb[aria-current="true"] { border-color: var(--bronze-700); }
.book-detail__title { font-size: var(--fs-3xl); margin-bottom: var(--sp-2); }
.book-detail__subtitle { font-family: var(--font-display); font-size: var(--fs-lg); font-style: italic; color: var(--text-muted); margin-bottom: var(--sp-4); }
.book-detail__buy { padding: var(--sp-5); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); margin-block: var(--sp-5); }

.review { padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.review:last-of-type { border-bottom: 0; }
.review__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-2); }
.review__name { font-weight: 600; font-size: var(--fs-sm); }
.review__date { font-size: var(--fs-xs); color: var(--text-soft); }
.review__title { font-weight: 600; margin-bottom: var(--sp-2); }

/* ======================================================= Cart / checkout */
.checkout-layout { display: grid; grid-template-columns: 1.55fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 899px) { .checkout-layout { grid-template-columns: 1fr; } }

.summary-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}
@media (max-width: 899px) { .summary-card { position: static; } }
.summary-row { display: flex; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-3); font-size: var(--fs-sm); border-bottom: 1px dashed var(--line); }
.summary-row--total { border-bottom: 0; border-top: 2px solid var(--ink); margin-top: var(--sp-2); padding-top: var(--sp-4); font-size: var(--fs-lg); font-weight: 700; }
.summary-row--discount { color: var(--success); }

.cart-line { display: grid; grid-template-columns: 88px 1fr auto; gap: var(--sp-4); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); align-items: start; }
@media (max-width: 559px) { .cart-line { grid-template-columns: 68px 1fr; } .cart-line__price { grid-column: 2; } }

.step-bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-7); font-size: var(--fs-sm); flex-wrap: wrap; }
.step-bar__step { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-soft); }
.step-bar__step.is-current { color: var(--text); font-weight: 600; }
.step-bar__step.is-done { color: var(--success); }
.step-bar__num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: 700; }
.step-bar__sep { flex: 1; height: 1px; background: var(--line); min-width: 20px; }

/* ====================================================== Author area ===== */
.dash-layout { display: grid; grid-template-columns: 250px 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 899px) { .dash-layout { grid-template-columns: 1fr; } }
.dash-nav { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); position: sticky; top: calc(var(--header-h) + 1rem); }
@media (max-width: 899px) { .dash-nav { position: static; } }
.dash-nav a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: 500;
}
.dash-nav a:hover { background: var(--parchment-200); }
.dash-nav a.is-active { background: var(--ink); color: var(--text-invert); }
.dash-nav a.is-active svg { color: var(--lantern); }

.milestone { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--line); align-items: center; }
.milestone:last-child { border-bottom: 0; }
.milestone__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); }
.milestone.is-done .milestone__dot { background: var(--success); }
.milestone.is-active .milestone__dot { background: var(--lantern); box-shadow: 0 0 0 4px rgba(233,161,59,.25); }

.progress-track { height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.progress-track > span { display: block; height: 100%; border-radius: inherit; background: var(--grad-lantern); }

/* ======================================================== Blog / posts == */
.post-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--text-soft); }
.post-hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); font-size: var(--fs-sm); }

.toc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); position: sticky; top: calc(var(--header-h) + 1.5rem); font-size: var(--fs-sm); }
.toc ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); counter-reset: toc; }
.toc a { color: var(--text-muted); text-decoration: none; display: block; padding-left: var(--sp-3); border-left: 2px solid var(--line); }
.toc a:hover, .toc a.is-current { color: var(--bronze-700); border-left-color: var(--bronze); }
@media (max-width: 1023px) { .toc { position: static; margin-bottom: var(--sp-6); } }

.article-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 1023px) { .article-layout { grid-template-columns: 1fr; } }

/* ============================================================ FAQ ======= */
.faq-search { max-width: 520px; margin-bottom: var(--sp-7); }
.faq-cat { margin-bottom: var(--sp-8); }
.faq-cat__title { font-size: var(--fs-xl); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 2px solid var(--bronze); display: inline-block; }
.accordion__item[hidden] { display: none; }

/* ================================================= Consultation page ==== */
.consult-layout { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 899px) { .consult-layout { grid-template-columns: 1fr; } }
.scheduler {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
}
.scheduler__head { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); background: var(--parchment-200); display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--sp-2); padding: var(--sp-5); }
.slot {
  padding: .7em .4em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--dur-fast) var(--ease);
}
.slot:hover { border-color: var(--bronze); background: var(--bronze-50); }
.slot[aria-pressed="true"] { background: var(--ink); color: var(--text-invert); border-color: var(--ink); }

/* ====================================================== Misc pages ====== */
.error-page { text-align: center; padding-block: clamp(4rem, 12vw, 9rem); }
.error-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 20vw, 12rem);
  line-height: .85;
  color: var(--bronze-200);
  margin-bottom: var(--sp-5);
}

.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
@media (max-width: 1023px) { .legal-layout { grid-template-columns: 1fr; } }

.value-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-6) var(--sp-8); }
@media (max-width: 767px) { .value-grid { grid-template-columns: 1fr; } }

.team-card { text-align: center; }
.team-card__role { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--bronze-700); }

/* Quote pull-out used across long-form pages */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: 1.35;
  color: var(--ink-700);
  padding: var(--sp-6) 0;
  border-block: 1px solid var(--line-strong);
  margin-block: var(--sp-8);
  text-wrap: balance;
}
.on-dark .pull-quote { color: var(--text-invert); }

/* Numbered challenge/solution list on category pages */
.challenge-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-4); }
.challenge-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.challenge-list__mark {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--lantern-100);
  color: var(--ember);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: var(--fs-sm);
  flex: none;
}
.challenge-list h3 { font-family: var(--font-body); font-size: var(--fs-base); font-weight: 600; margin: 0 0 var(--sp-2); }
.challenge-list p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* Final CTA band */
.cta-band { position: relative; overflow: hidden; text-align: center; }
.cta-band::before {
  content: "";
  position: absolute;
  inset: auto 50% -60% auto;
  transform: translateX(50%);
  width: min(900px, 120vw);
  aspect-ratio: 2/1;
  background: var(--grad-glow);
  pointer-events: none;
}
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.cta-band h2 { color: #fff; font-size: var(--fs-4xl); }
.cta-band .lede { color: var(--text-invert-muted); margin-inline: auto; }
.cta-band .btn-group { justify-content: center; margin-top: var(--sp-6); }