/* ============================================================
 * Pillar page styles · scoped to .pillar-page (used together with .landing-page)
 *
 * Inherits all design tokens (var(--bg), var(--ink), var(--gold-*), etc.)
 * and base typography classes (.eyebrow, .h-section, .lede) from landing.css.
 *
 * This file only defines the patterns specific to the pillar surface:
 *   - Editorial Q&A section heads (each H2 is a search query)
 *   - Pre-lede hero with stat strip
 *   - SKU price table
 *   - Comparison table (Costco vs dealers)
 *   - 12-week trend table
 *   - Warehouse photo grid
 *   - How-to numbered steps
 *   - FAQ list
 *   - Recent archives strip
 *   - Below-the-fold CTA
 * ============================================================ */

/* ============ Pre-lede (editorial hero) ============ */
.pillar-page .prelude{
  padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}
.pillar-page .prelude::before{
  content: "";
  position: absolute;
  inset: -80px 10% auto 10%;
  height: 360px;
  background:
    radial-gradient(50% 60% at 50% 0%, rgba(168,121,40,.10), transparent 70%),
    radial-gradient(40% 70% at 80% 30%, rgba(214,173,85,.07), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}
.pillar-page .prelude > .wrap{ position: relative; z-index: 1; }
.pillar-page .prelude .updated{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pillar-page .prelude .updated .pulse{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  margin-right: 8px;
  vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(168,121,40,.4);
  animation: pillar-pulse 2s infinite;
}
@keyframes pillar-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(168,121,40,.45); }
  70%{ box-shadow: 0 0 0 8px rgba(168,121,40,0); }
  100%{ box-shadow: 0 0 0 0 rgba(168,121,40,0); }
}
.pillar-page .prelude h1{
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 18px 0 22px;
  max-width: 18ch;
}
.pillar-page .prelude h1 .accent{
  background: linear-gradient(105deg, var(--gold-500) 0%, #d6ad55 50%, var(--gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pillar-page .prelude .answer{
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 64ch;
  margin: 0;
}
.pillar-page .prelude .answer b{ color: var(--ink); font-weight: 600; }

/* ============ Pre-lede stat strip ============ */
.pillar-page .stat-strip{
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.pillar-page .stat-strip .stat{
  padding: 18px 20px;
  border-left: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar-page .stat-strip .stat:first-child{ border-left: 0; }
.pillar-page .stat-strip .stat .lbl{
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pillar-page .stat-strip .stat .v{
  font-family: var(--sans);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pillar-page .stat-strip .stat .v.gold{ color: var(--gold-700); }
.pillar-page .stat-strip .stat .v.source{
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: -.005em;
}
@media (max-width: 880px){
  .pillar-page .stat-strip{ grid-template-columns: repeat(2, 1fr); }
  .pillar-page .stat-strip .stat:nth-child(3){ border-left: 0; border-top: 1px solid var(--border-soft); }
  .pillar-page .stat-strip .stat:nth-child(4){ border-top: 1px solid var(--border-soft); }
}

/* ============ Q&A section (every H2 is a search query) ============ */
.pillar-page .qa{
  padding: clamp(48px, 5vw, 72px) 0;
  border-top: 1px solid var(--border-soft);
}
.pillar-page .qa:first-of-type{ border-top: 0; }
.pillar-page .qa-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 28px;
  max-width: 72ch;
}
.pillar-page .qa-head .question-num{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--gold-700);
}
.pillar-page .qa-head h2{
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin: 0;
}
.pillar-page .qa-head .answer{
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.pillar-page .qa-head .answer b{ color: var(--ink); font-weight: 600; }
.pillar-page .qa-head .answer a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color .15s;
}
.pillar-page .qa-head .answer a:hover{ text-decoration-color: var(--gold-500); }

/* ============ SKU price table ============ */
.pillar-page .sku-table{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .sku-head,
.pillar-page .sku-row{
  display: grid;
  grid-template-columns: 88px minmax(0, 2fr) 90px 130px 130px 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
}
.pillar-page .sku-head{
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .sku-head .end{ text-align: right; }
.pillar-page .sku-row{
  border-bottom: 1px solid var(--border-soft);
  transition: background .15s;
}
.pillar-page .sku-row:last-child{ border-bottom: 0; }
.pillar-page .sku-row:hover{ background: var(--surface-2); }
.pillar-page .sku-row .thumb{
  width: 80px; height: 80px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
.pillar-page .sku-row .thumb img{
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 6px;
}
.pillar-page .sku-row .name{
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.pillar-page .sku-row .name a{ color: inherit; }
.pillar-page .sku-row .name a:hover{ color: var(--gold-700); }
.pillar-page .sku-row .name .item{
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 400;
}
.pillar-page .sku-row .weight{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.pillar-page .sku-row .price{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  font-feature-settings: "tnum";
  font-weight: 500;
}
.pillar-page .sku-row .premium{
  font-family: var(--mono);
  font-size: 13px;
  text-align: right;
  font-feature-settings: "tnum";
}
.pillar-page .sku-row .premium.exceptional{ color: var(--in-stock); font-weight: 500; }
.pillar-page .sku-row .premium.great{ color: var(--gold-700); font-weight: 500; }
.pillar-page .sku-row .badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 4px 9px;
  border-radius: 999px;
}
.pillar-page .sku-row .badge.in{
  background: var(--in-stock-bg);
  color: var(--in-stock);
}
.pillar-page .sku-row .badge.in::before{
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--in-stock);
}
.pillar-page .sku-row .badge.out{
  background: var(--surface-2);
  color: var(--ink-muted);
}
.pillar-page .empty{
  padding: 36px 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
}
@media (max-width: 880px){
  .pillar-page .sku-head{ display: none; }
  .pillar-page .sku-row{
    grid-template-columns: 64px 1fr auto;
    grid-template-areas:
      "thumb name badge"
      "thumb meta meta";
    gap: 8px 12px;
    padding: 14px;
  }
  .pillar-page .sku-row .thumb{ grid-area: thumb; width: 64px; height: 64px; }
  .pillar-page .sku-row .name{ grid-area: name; }
  .pillar-page .sku-row .badge{ grid-area: badge; }
  .pillar-page .sku-row .weight,
  .pillar-page .sku-row .price,
  .pillar-page .sku-row .premium{
    grid-area: unset;
    display: inline-block;
    font-size: 12px;
    text-align: left;
  }
  .pillar-page .sku-row .price::before{ content: "Price: "; color: var(--ink-muted); font-weight: 400; }
  .pillar-page .sku-row .premium::before{ content: " · "; color: var(--ink-faint); }
  .pillar-page .sku-row .weight::after{ content: " · "; color: var(--ink-faint); }
  .pillar-page .sku-row .weight,
  .pillar-page .sku-row .price,
  .pillar-page .sku-row .premium{ grid-column: 2 / -1; grid-row: 2; }
}

/* ============ Comparison table (Costco vs dealers) ============ */
.pillar-page .compare-table{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .compare-head,
.pillar-page .compare-row{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr 1fr;
  gap: 16px;
  padding: 14px 22px;
  align-items: center;
}
.pillar-page .compare-head{
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .compare-row{
  border-bottom: 1px solid var(--border-soft);
  font-size: 14px;
}
.pillar-page .compare-row:last-child{ border-bottom: 0; }
.pillar-page .compare-row.us{ background: linear-gradient(180deg, rgba(168,121,40,.04) 0%, rgba(168,121,40,.01) 100%); }
.pillar-page .compare-row .src{ display: flex; align-items: center; gap: 10px; }
.pillar-page .compare-row .src .pill{
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--gold-100);
  color: var(--gold-700);
}
.pillar-page .compare-row .src a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 3px;
}
.pillar-page .compare-row .src strong{ color: var(--ink); font-weight: 600; }
.pillar-page .compare-row .v{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink);
  font-feature-settings: "tnum";
}
.pillar-page .compare-row .v.muted{ color: var(--ink-muted); }
.pillar-page .compare-footnote{
  padding: 12px 22px;
  background: var(--surface-2);
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  color: var(--ink-muted);
  line-height: 1.5;
}
@media (max-width: 720px){
  .pillar-page .compare-head{ display: none; }
  .pillar-page .compare-row{
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 18px;
  }
  .pillar-page .compare-row .v::before{
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--ink-muted);
    margin-right: 8px;
    text-transform: uppercase;
  }
  .pillar-page .compare-row .v.price::before{ content: "1oz price"; }
  .pillar-page .compare-row .v.premium::before{ content: "Premium"; }
}

/* ============ 12-week trend table ============ */
.pillar-page .trend{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 880px){ .pillar-page .trend{ grid-template-columns: 1fr; } }
.pillar-page .trend-meta{
  padding: 22px 24px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.pillar-page .trend-meta .big{
  font-family: var(--sans);
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pillar-page .trend-meta .big .accent{ color: var(--gold-500); }
.pillar-page .trend-meta .big-lbl{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}
.pillar-page .trend-meta .sec{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.pillar-page .trend-meta .sec .k{ font-size: 13px; color: var(--ink-soft); }
.pillar-page .trend-meta .sec .v{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  font-feature-settings: "tnum";
}
.pillar-page .trend-table{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .trend-table-head,
.pillar-page .trend-table-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  padding: 11px 18px;
  align-items: center;
}
.pillar-page .trend-table-head{
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .trend-table-head .end,
.pillar-page .trend-table-row .end{ text-align: right; }
.pillar-page .trend-table-row{
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.pillar-page .trend-table-row:last-child{ border-bottom: 0; }
.pillar-page .trend-table-row.current{ background: linear-gradient(90deg, rgba(168,121,40,.06), transparent); }
.pillar-page .trend-table-row.current .week{ color: var(--ink); font-weight: 600; }
.pillar-page .trend-table-row .week{ color: var(--ink); }

/* ============ Warehouse photo grid ============ */
.pillar-page .warehouse-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.pillar-page .warehouse-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pillar-page .warehouse-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-100);
}
.pillar-page .warehouse-card .img-wrap{
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--surface-2);
  overflow: hidden;
}
.pillar-page .warehouse-card .img-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pillar-page .warehouse-card .img-wrap::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(12,12,10,.35) 100%);
  pointer-events: none;
}
.pillar-page .warehouse-card .state-pill{
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: var(--ink);
  backdrop-filter: blur(4px);
  box-shadow: var(--shadow-sm);
}
.pillar-page .warehouse-card .body{
  padding: 14px 16px 16px;
}
.pillar-page .warehouse-card .city{
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pillar-page .warehouse-card .meta{
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-muted);
  display: flex;
  gap: 8px;
}
.pillar-page .warehouse-card .meta .sep{ color: var(--ink-faint); }

/* State breakdown table */
.pillar-page .state-table{
  margin-top: 36px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .state-table-head{
  padding: 12px 18px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-soft);
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  gap: 16px;
}
.pillar-page .state-table-row{
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  gap: 16px;
  padding: 11px 18px;
  align-items: center;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .state-table-row:last-child{ border-bottom: 0; }
.pillar-page .state-table-row .state-code{ font-family: var(--mono); color: var(--ink); font-weight: 500; font-size: 13px; }
.pillar-page .state-table-row .bar-wrap{ position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.pillar-page .state-table-row .bar-wrap::after{
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--gold-300), var(--gold-500));
  border-radius: 4px;
}
.pillar-page .state-table-row .count{ font-family: var(--mono); font-size: 13px; color: var(--ink); text-align: right; font-feature-settings: "tnum"; }

/* ============ Brands / refiner list ============ */
.pillar-page .info-cols{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 28px;
}
@media (max-width: 720px){ .pillar-page .info-cols{ grid-template-columns: 1fr; } }
.pillar-page .info-cols h3{
  font-size: 14px;
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 14px;
  font-weight: 500;
}
.pillar-page .info-cols ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.pillar-page .info-cols li{
  padding-left: 22px;
  position: relative;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.pillar-page .info-cols li::before{
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
}
.pillar-page .info-cols li b{ color: var(--ink); font-weight: 600; }

/* ============ How-to numbered steps ============ */
.pillar-page .steps{
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  gap: 14px;
  counter-reset: step;
}
.pillar-page .steps li{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  counter-increment: step;
  align-items: start;
  transition: border-color .15s, box-shadow .15s;
}
.pillar-page .steps li:hover{ border-color: var(--gold-100); box-shadow: var(--shadow-sm); }
.pillar-page .steps li::before{
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--gold-500);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--gold-50);
  border: 1px solid var(--gold-100);
  display: grid;
  place-items: center;
}
.pillar-page .steps li .step-body{
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pillar-page .steps li .step-body b{ color: var(--ink); font-weight: 600; }

/* ============ Profit windows table ============ */
.pillar-page .profit-table{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .profit-head,
.pillar-page .profit-row{
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr 1fr;
  gap: 16px;
  padding: 14px 20px;
  align-items: center;
}
.pillar-page .profit-head{
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .profit-head .end,
.pillar-page .profit-row .end{ text-align: right; }
.pillar-page .profit-row{
  font-size: 14px;
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .profit-row:last-child{ border-bottom: 0; }
.pillar-page .profit-row .sku{
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -.01em;
}
.pillar-page .profit-row .v{
  font-family: var(--mono);
  text-align: right;
  font-feature-settings: "tnum";
  color: var(--ink);
}
.pillar-page .profit-row .v.profit{ color: var(--gold-700); font-weight: 600; }
.pillar-page .profit-row .v.muted{ color: var(--ink-muted); }
.pillar-page .profit-disclaimer{
  margin-top: 16px;
  font-size: 12px;
  color: var(--ink-muted);
  font-family: var(--mono);
  line-height: 1.5;
}
@media (max-width: 720px){
  .pillar-page .profit-head{ display: none; }
  .pillar-page .profit-row{
    grid-template-columns: 1fr 1fr;
    gap: 6px 16px;
  }
  .pillar-page .profit-row .sku{ grid-column: 1 / -1; margin-bottom: 6px; }
}

/* ============ FAQ list ============ */
.pillar-page .faq{
  display: grid;
  gap: 0;
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pillar-page .faq-item{
  padding: 22px 24px;
  border-bottom: 1px solid var(--border-soft);
}
.pillar-page .faq-item:last-child{ border-bottom: 0; }
.pillar-page .faq-item h3{
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.pillar-page .faq-item h3::before{
  content: "";
  flex: 0 0 6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-500);
  align-self: center;
  margin-bottom: 1px;
}
.pillar-page .faq-item p{
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 18px;
}

/* ============ Recent archives ============ */
.pillar-page .archives{
  padding: clamp(48px, 5vw, 64px) 0;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
}
.pillar-page .archives-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.pillar-page .archive-card{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pillar-page .archive-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold-100);
}
.pillar-page .archive-card .slug{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-700);
}
.pillar-page .archive-card .range{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pillar-page .archive-card .arrow{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 6px;
  transition: color .15s, gap .15s;
}
.pillar-page .archive-card:hover .arrow{ color: var(--gold-700); gap: 10px; }

/* ============ Conversion section (below the fold) ============ */
.pillar-page .conversion{
  background: var(--ink);
  color: var(--bg);
  padding: clamp(56px, 6vw, 84px) 0;
}
.pillar-page .conversion .wrap{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 1fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px){ .pillar-page .conversion .wrap{ grid-template-columns: 1fr; gap: 32px; } }
.pillar-page .conversion .eyebrow{ color: var(--gold-300); }
.pillar-page .conversion h2{
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 12px 0 16px;
}
.pillar-page .conversion p{
  color: rgba(255,255,255,.7);
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
}
.pillar-page .conversion .cta-card{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pillar-page .conversion .cta-card .price{
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold-300);
}
.pillar-page .conversion .cta-card .free{
  font-size: 18px;
  color: var(--bg);
  font-weight: 500;
}
.pillar-page .conversion .cta-card .free .strike{ color: rgba(255,255,255,.4); text-decoration: line-through; margin-left: 6px; }
.pillar-page .conversion .cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px;
  background: linear-gradient(180deg, #d6ad55 0%, var(--gold-500) 100%);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 28px -14px rgba(168,121,40,.55);
  transition: transform .15s ease;
}
.pillar-page .conversion .cta-btn:hover{ transform: translateY(-1px); }
.pillar-page .conversion .perks{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.pillar-page .conversion .perks li{
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.7);
}
.pillar-page .conversion .perks li::before{
  content: "";
  flex: 0 0 4px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-300);
  align-self: center;
}

/* ============ Generic ============ */
.pillar-page .nf{
  padding: 64px 0;
  text-align: center;
  color: var(--ink-muted);
}
.pillar-page .nf h1{
  font-family: var(--sans);
  font-size: 42px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: -.02em;
}