/* demo-pages.css — components for the polished mockup pages
 * (/agents/, /content/, /site-optimizer/). Reuses the product's design
 * tokens (--accent, --panel, …) so these lift cleanly into the real app.
 * Loaded alongside main.css + health.css on those pages. */

/* ── get-tokens override: centered, larger section headlines ──────
   The /get-tokens/ demo leads with a one-time pack, then subscriptions.
   Both section heads are centered and the h2 enlarged to read as page
   headlines (the old "Get tokens" stage title was removed). */
.section-head-hero {
  align-items: center;
  text-align: center;
  gap: 8px;
  padding-bottom: 6px;
  max-width: 640px;
  margin: 8px auto 0;
}
.section-head-hero h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-head-hero p {
  font-size: 14px;
  line-height: 1.5;
}

/* The "Get tokens" stage title was removed, so the first headline sat almost
   flush against the demo banner. Pad the top of the scroll area so the gap
   above "Start with a one-time pack" matches the inter-section gap (the
   center-scroll flex `gap`) before "Subscribe for a better deal". */
body[data-page="get-tokens"] .center.center-scroll {
  padding-top: 28px;
}

/* Token explainer connector — dotted lines fanning down from the three pack
   tiles into a single badge. Decorative + a clear "this explains tokens" cue.
   Kept short so it doesn't eat vertical space. */
.token-explainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2px;
}
.te-lines {
  width: 100%;
  height: auto;            /* uniform scale keeps the corner radius round */
  display: block;
}
.te-lines path {
  fill: none;
  stroke: rgba(155, 158, 172, 0.6);   /* muted gray */
  stroke-width: 1.5;
  stroke-dasharray: 1.5 7;
  stroke-linecap: round;
}
.te-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: -1px;
  padding: 9px 16px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  background: linear-gradient(180deg, rgba(99,102,241,0.16) 0%, rgba(99,102,241,0.07) 100%);
  border: 1px solid rgba(99,102,241,0.55);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.te-badge:hover {
  border-color: rgba(99,102,241,0.85);
  background: linear-gradient(180deg, rgba(99,102,241,0.24) 0%, rgba(99,102,241,0.12) 100%);
  transform: translateY(-1px);
}
.te-badge-ico {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--accent);
}
/* On narrow screens the packs stack, so the fan-in lines lose meaning —
   drop them and keep just the badge. */
@media (max-width: 980px) {
  .te-lines { display: none; }
  .token-explainer { margin-top: 16px; }
}

/* ── Token-explainer modal (opened by the badge under the packs) ────── */
/* Above the demo top bar (z-index 2000) so it's never painted behind it. */
.te-modal { z-index: 2500; }
.te-modal-card {
  width: min(520px, 100%);
}
.te-modal-head { margin-bottom: 18px; }
.te-modal-chip {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.30);
}
.te-modal-card .modal-sub { margin-bottom: 0; }

.te-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.te-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.te-row-ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--accent);
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.22);
}
.te-row-ico svg { width: 19px; height: 19px; }
.te-row-main { flex: 1 1 auto; min-width: 0; }
.te-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.te-row-desc {
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--muted);
}
.te-row-cost {
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.te-row-count {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding-left: 12px;
  border-left: 1px solid rgba(255,255,255,0.07);
}
.te-row-num {
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.te-row-unit {
  margin-top: 3px;
  font-size: 11px;
  color: var(--muted);
}

.te-mix {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(99,102,241,0.04));
  border: 1px solid rgba(99,102,241,0.22);
}
.te-mix-label {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.te-mix p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.te-mix strong { color: var(--text); font-weight: 600; }

.te-foot {
  margin: 14px 2px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--muted-2);
  text-align: center;
}

@media (max-width: 520px) {
  .te-row { flex-wrap: wrap; }
  .te-row-count {
    border-left: 0;
    padding-left: 0;
    flex-direction: row;
    gap: 6px;
    align-items: baseline;
  }
}

/* Billing slider now lives inside .plans-section, right under the headline.
   Give it a little breathing room before the plan cards (the section's own
   flex gap alone reads a touch tight here). */
.plans-section .billing-cycle {
  margin-bottom: 14px;
}

/* ── shared hero result band ─────────────────────────────────── */
.demo-hero {
  position: relative;
  overflow: hidden;
  padding: 26px 28px;            /* the hero has no .card-head, so pad the card */
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, 0.10), transparent 55%),
    var(--panel);
  border: 1px solid var(--line);
}
.demo-hero-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.demo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.28);
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 600;
}
.demo-hero-badge .live-dot {
  width: 7px; height: 7px; border-radius: 999px; background: var(--accent);
  box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55);
  animation: demoPulse 2s infinite;
}
@keyframes demoPulse {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(99, 102, 241,0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241,0); }
}
.demo-hero-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.demo-hero-sub { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

/* Content & agents hero: float the status badge to the top-right corner. */
body[data-page="content"] .demo-hero-head,
body[data-page="agents"] .demo-hero-head { align-items: flex-start; }
body[data-page="content"] .demo-hero-badge,
body[data-page="agents"] .demo-hero-badge { order: 2; margin-left: auto; flex-shrink: 0; }

/* ── big stat grid ───────────────────────────────────────────── */
.demo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.demo-stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 16px 14px;
}
.demo-stat-label {
  color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: -0.01em;
}
.demo-stat-value {
  font-size: 28px; font-weight: 600; letter-spacing: -0.03em; margin-top: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.demo-stat-value .unit { font-size: 14px; color: var(--muted); font-weight: 500; }
.demo-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
}
.demo-delta.up { color: var(--accent); background: rgba(99, 102, 241, 0.12); }
.demo-delta.flat { color: var(--muted); background: rgba(255,255,255,0.05); }
.demo-stat-sub { color: var(--muted-2); font-size: 11.5px; margin-top: 8px; }

/* ── agent rows ──────────────────────────────────────────────── */
.demo-agent {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  transition: border-color .18s ease, transform .18s ease;
}
.demo-agent + .demo-agent { margin-top: 12px; }
.demo-agent:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.agent-icon {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(99, 102, 241,0.22), rgba(99, 102, 241,0.06));
  border: 1px solid rgba(99, 102, 241,0.25); color: var(--accent);
}
.agent-icon svg { width: 22px; height: 22px; }
.agent-icon.gold { background: linear-gradient(135deg, rgba(230,196,122,0.22), rgba(230,196,122,0.05)); border-color: rgba(230,196,122,0.25); color: var(--gold); }
.agent-icon.blue { background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(59,130,246,0.05)); border-color: rgba(59,130,246,0.25); color: #6ea8fe; }
.agent-main { min-width: 0; }
.agent-name-row { display: flex; align-items: center; gap: 10px; }
.agent-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.agent-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }
.agent-last { color: var(--muted-2); font-size: 12px; margin-top: 8px; }
.agent-last strong { color: var(--text); font-weight: 500; }
.agent-right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.05); color: var(--muted);
}
.status-pill.is-active { color: var(--accent); background: rgba(99, 102, 241,0.12); }
.status-pill.is-active .live-dot {
  width: 6px; height: 6px; border-radius: 999px; background: var(--accent);
  animation: demoPulse 2s infinite;
}
.status-pill.is-scheduled { color: var(--gold); background: rgba(230,196,122,0.12); }

.result-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
}
.result-chip svg { width: 13px; height: 13px; }

/* ── activity feed ───────────────────────────────────────────── */
.demo-feed { position: relative; padding-left: 6px; }
.feed-item {
  position: relative; display: flex; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.feed-item:last-child { border-bottom: 0; }
.feed-dot {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--accent);
}
.feed-dot svg { width: 15px; height: 15px; }
.feed-body { flex: 1; min-width: 0; }
.feed-text { font-size: 13.5px; }
.feed-text strong { font-weight: 600; }
.feed-meta { color: var(--muted-2); font-size: 12px; margin-top: 3px; display: flex; gap: 10px; align-items: center; }

/* ── content table ───────────────────────────────────────────── */
.demo-table { width: 100%; border-collapse: collapse; }
.demo-table th {
  text-align: left; color: var(--muted); font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0 14px 10px; border-bottom: 1px solid var(--line);
}
.demo-table th.num, .demo-table td.num { text-align: right; }
.demo-table td { padding: 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; }
.demo-table tr:last-child td { border-bottom: 0; }
.demo-table tr:hover td { background: rgba(255,255,255,0.015); }
.ct-title { font-weight: 500; letter-spacing: -0.01em; }
.ct-kw { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.rank-badge { font-weight: 600; }
.rank-badge.good { color: var(--accent); }

/* ── optimization score hero ─────────────────────────────────── */
.score-hero { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center; }
.score-ring {
  --val: 88; --size: 132px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: grid; place-items: center; position: relative; flex-shrink: 0;
  background: conic-gradient(var(--accent) calc(var(--val) * 1%), rgba(255,255,255,0.06) 0);
}
.score-ring::before {
  content: ""; position: absolute; inset: 11px; border-radius: 50%; background: var(--panel);
}
.score-ring-inner { position: relative; text-align: center; }
.score-ring-num { font-size: 38px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.score-ring-of { font-size: 12px; color: var(--muted); margin-top: 2px; }
.score-copy-title { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.score-copy-sub { color: var(--muted); font-size: 13.5px; margin-top: 4px; max-width: 46ch; }
.score-mini { display: flex; gap: 22px; margin-top: 16px; }
.score-mini-item .smi-val { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.score-mini-item .smi-val.up { color: var(--accent); }
.score-mini-item .smi-label { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* ── optimizer checklist ─────────────────────────────────────── */
.opt-item {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  padding: 15px 20px; border-bottom: 1px solid var(--line);
}
.opt-item:last-child { border-bottom: 0; }
.opt-check {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
}
.opt-check.done { background: rgba(99, 102, 241,0.12); border: 1px solid rgba(99, 102, 241,0.25); color: var(--accent); }
.opt-check.todo { background: rgba(230,196,122,0.10); border: 1px solid rgba(230,196,122,0.22); color: var(--gold); }
.opt-check svg { width: 17px; height: 17px; }
.opt-title { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.opt-impact { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.opt-done-label { color: var(--accent); font-size: 12.5px; font-weight: 600; }

/* ── core web vitals mini-cards ──────────────────────────────── */
.cwv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cwv-card { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cwv-name { color: var(--muted); font-size: 12px; font-weight: 500; }
.cwv-val { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; color: var(--accent); }
.cwv-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.06); margin-top: 12px; overflow: hidden; }
.cwv-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.cwv-sub { color: var(--muted-2); font-size: 11.5px; margin-top: 8px; }

/* ── section-card body padding ───────────────────────────────
   The base .card-head is padded (16px 20px) but card bodies are not —
   real pages wrap body content in padded inner grids. Our custom bodies
   sit directly after .card-head, so pad them here to match. */
.section-card > .demo-agent { margin-left: 20px; margin-right: 20px; }
.section-card > .demo-agent:first-of-type { margin-top: 16px; }
.section-card > .demo-agent:last-of-type { margin-bottom: 20px; }
.section-card > .demo-feed { padding: 6px 20px 14px; }
.section-card > .demo-table { padding: 4px 6px 10px; }
.section-card > .cwv-grid { padding: 18px 20px 20px; }

@media (max-width: 980px) {
  /* minmax(0,1fr) — not bare 1fr — so a long word in one card can't blow its
     column wider than the others (the cards must stay equal width). */
  .demo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cwv-grid { grid-template-columns: 1fr; }
  .score-hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ── /agents/ active-agent cards on mobile ───────────────────────────
   The card is a 3-column grid (icon · text · status+result). On a phone the
   right column kept its width and crushed the agent name/description into a
   sliver (one word per line). Drop to icon + text, and move the status pill +
   result chip onto their own full-width row beneath, left-aligned. */
@media (max-width: 768px) {
  .demo-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Narrow stat cards: the delta badge ("▲ 14%") was squeezed beside the big
     number and wrapped to two lines. Center the card and stack the badge on
     its own row under the value. */
  .demo-stat { text-align: center; }
  .demo-stat-value {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  /* Hero head: on desktop the "Autopilot is working" badge floats to the right
     of the title. On a phone that badge ate ~half the row beside the wrapping
     title — stack them so the badge sits on its own line above a full-width
     title. (Overrides the per-page order/margin rule above.) */
  body[data-page="agents"] .demo-hero-head,
  body[data-page="content"] .demo-hero-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  body[data-page="agents"] .demo-hero-badge,
  body[data-page="content"] .demo-hero-badge {
    order: 0;
    margin-left: 0;
  }

  .demo-agent {
    grid-template-columns: 1fr;
    gap: 10px 14px;
    padding: 16px;
  }
  /* Hide the leading icons on mobile to give the text the full width — both
     the agent-row glyphs and the recent-activity feed dots. */
  .demo-agent .agent-icon { display: none; }
  .feed-dot { display: none; }
  .agent-right {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .section-card > .demo-agent { margin-left: 14px; margin-right: 14px; }

  /* /site-optimizer/ "All passing" badge → a compact green check on mobile
     (the words are redundant next to the green tick and crowd the card head). */
  .badge-pass {
    gap: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    flex: none;
  }
  .badge-pass .badge-text { display: none; }
  .badge-pass .badge-check { width: 15px; height: 15px; }
}
.badge-pass .badge-check { display: block; flex: none; }

/* ════════════════════════════════════════════════════════════════
   /how-it-works/  —  "See how it works" marketing page
   (3-step explainer · FAQ accordion · latest blog posts) and the
   /blog-post/ single-article mockup. Marketing-style content built
   from the product's design tokens so it reads as one product.
   ════════════════════════════════════════════════════════════════ */

/* ── page intro (under the stage title) ─────────────────────────── */
.hiw-intro {
  max-width: 640px;
  margin: 4px auto 6px;
  text-align: center;
}
.hiw-intro h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hiw-intro p {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ── 3-step explainer ───────────────────────────────────────────── */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.hiw-step {
  position: relative;
  padding: 22px 20px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,0.08), transparent 60%),
    var(--panel);
}
.hiw-step-num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(99,102,241,0.12);
  border: 1px solid rgba(99,102,241,0.25);
}
.hiw-step h3 {
  margin-top: 14px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.hiw-step p {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── FAQ accordion (native <details>, no JS) ────────────────────── */
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item:last-child { border-bottom: 0; }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color .15s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary:hover { color: var(--accent-bright); }
.faq-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--muted);
  transition: transform .2s ease, color .15s ease;
}
.faq-item[open] > summary .faq-chev { transform: rotate(180deg); color: var(--accent); }
.faq-a {
  padding: 0 20px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

/* ── blog: section header with "view all" link ──────────────────── */
.blog-head-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
.blog-head-link svg { width: 14px; height: 14px; }

/* ── blog: featured post + 2×2 grid ─────────────────────────────── */
.blog-wrap { display: flex; flex-direction: column; gap: 16px; }
.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.blog-card:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.blog-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, rgba(99,102,241,0.30), rgba(99,102,241,0.06));
}
.blog-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 80% 0%, rgba(255,255,255,0.10), transparent 60%);
}
/* per-category thumbnail tints (cycled through the post list) */
.blog-thumb.t-technical  { background: linear-gradient(135deg, rgba(99,102,241,0.32), rgba(99,102,241,0.05)); }
.blog-thumb.t-strategy   { background: linear-gradient(135deg, rgba(230,196,122,0.30), rgba(230,196,122,0.05)); }
.blog-thumb.t-performance{ background: linear-gradient(135deg, rgba(34,197,94,0.28), rgba(34,197,94,0.05)); }
.blog-thumb.t-links      { background: linear-gradient(135deg, rgba(59,130,246,0.30), rgba(59,130,246,0.05)); }
.blog-thumb.t-content    { background: linear-gradient(135deg, rgba(236,72,153,0.26), rgba(236,72,153,0.05)); }
.blog-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px 18px;
  flex: 1;
}
.blog-cat {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.blog-title {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.blog-excerpt {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.blog-meta {
  margin-top: auto;
  font-size: 12px;
  color: var(--muted-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }

/* featured: wide row, larger type */
.blog-feature {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 260px;
}
.blog-feature .blog-thumb { aspect-ratio: auto; height: 100%; }
.blog-feature .blog-body { justify-content: center; padding: 28px 30px; gap: 10px; }
.blog-feature .blog-title { font-size: 22px; line-height: 1.25; }
.blog-feature .blog-excerpt { font-size: 14px; }

@media (max-width: 980px) {
  .hiw-steps { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-feature { grid-template-columns: 1fr; min-height: 0; }
  .blog-feature .blog-thumb { aspect-ratio: 16 / 9; height: auto; }
  .blog-feature .blog-body { padding: 18px; }
  .blog-feature .blog-title { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════════
   /blog-post/  —  single-article mockup
   ════════════════════════════════════════════════════════════════ */
.article {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 22px;
  transition: color .15s ease;
}
.article-back:hover { color: var(--text); }
.article-back svg { width: 15px; height: 15px; }

.article-head { text-align: center; margin-bottom: 26px; }
.article-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.article-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.article-meta {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted-2);
}
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .6; }
.article-author { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); }
.article-author img { width: 26px; height: 26px; border-radius: 50%; }

.article-hero {
  aspect-ratio: 21 / 9;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(99,102,241,0.30), rgba(99,102,241,0.05));
  margin-bottom: 30px;
}

.article-body { font-size: 15.5px; line-height: 1.75; color: var(--muted); }
.article-body > * + * { margin-top: 18px; }
.article-body h2 {
  color: var(--text);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-top: 34px;
}
.article-body strong { color: var(--text); font-weight: 600; }
.article-body ul { padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.article-body li { line-height: 1.6; }
.article-body blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  font-style: italic;
}

.article-cta {
  margin-top: 40px;
  padding: 28px;
  text-align: center;
  border-radius: 18px;
  border: 1px solid rgba(99,102,241,0.28);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(99,102,241,0.14), transparent 60%),
    var(--panel);
}
.article-cta h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.article-cta p { margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.article-cta .btn { margin-top: 16px; }

@media (max-width: 768px) {
  .article-title { font-size: 26px; }
  .article-hero { aspect-ratio: 16 / 9; }
}