/*
 * Shared stylesheet for Alva Digital Downloads blog posts.
 * Extracted from the canonical post's <style> block.
 * Per-post overrides live inline in each post's remaining <style> block.
 */
/* Breadcrumb */
      .breadcrumb {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 32px;
      }
      .breadcrumb a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
      .breadcrumb a:hover { color: var(--ink); }
      .breadcrumb span[aria-hidden] { opacity: 0.5; }

      /* Post hero */
      .post-hero { padding: 72px 0 48px; border-bottom: 1px solid var(--line-soft); }
      .post-hero-inner { max-width: 880px; }
      .post-hero .eyebrow { margin-bottom: 16px; display: inline-block; }
      .post-hero h1 {
        font-family: var(--font-display);
        font-size: clamp(32px, 5vw, 54px);
        font-weight: 500;
        letter-spacing: -0.028em;
        line-height: 1.06;
        margin: 0 0 24px;
        max-width: 22ch;
        color: var(--ink);
      }
      .post-hero h1 em {
        font-family: "Fraunces", serif;
        font-style: italic;
        font-weight: 400;
        color: var(--accent);
      }
      .post-lead {
        font-size: 19px;
        line-height: 1.5;
        color: var(--ink-2);
        max-width: 60ch;
        margin: 0 0 32px;
      }
      .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        padding-top: 24px;
        border-top: 1px solid var(--line-soft);
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .post-meta strong { color: var(--ink); font-weight: 500; }

      /* Post body */
      .post-body { padding: 56px 0 96px; }
      .post-body-container { max-width: 720px; margin: 0 auto; padding: 0 28px; }
      .post-body p {
        font-size: 17px;
        line-height: 1.68;
        color: var(--ink-2);
        margin: 0 0 1.3em;
      }
      .post-body p:first-child { font-size: 19px; color: var(--ink); }
      .post-body h2 {
        font-family: var(--font-display);
        font-size: clamp(26px, 3vw, 32px);
        font-weight: 500;
        letter-spacing: -0.022em;
        line-height: 1.15;
        margin: 64px 0 20px;
        color: var(--ink);
      }
      .post-body h2::before {
        content: "";
        display: block;
        width: 40px;
        height: 2px;
        background: var(--accent);
        margin-bottom: 20px;
        border-radius: 1px;
      }
      .post-body h3 {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.015em;
        line-height: 1.25;
        margin: 44px 0 16px;
        color: var(--ink);
      }
      .post-body ul, .post-body ol {
        margin: 0 0 1.4em;
        padding-left: 26px;
      }
      .post-body li {
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink-2);
        margin-bottom: 10px;
        padding-left: 4px;
      }
      .post-body li::marker { color: var(--muted); }
      .post-body strong { color: var(--ink); font-weight: 600; }
      .post-body a {
        color: var(--accent);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
      }
      .post-body a:hover { color: var(--ink); }
      .post-body code {
        font-family: var(--font-mono);
        font-size: 0.92em;
        background: var(--surface);
        padding: 2px 6px;
        border-radius: 4px;
        border: 1px solid var(--line-soft);
        color: var(--ink);
      }

      /* Callout */
      .callout {
        margin: 36px 0;
        padding: 24px 28px;
        background: var(--accent-soft);
        border-left: 3px solid var(--accent);
        border-radius: var(--radius);
      }
      .callout-label {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--accent);
        margin-bottom: 10px;
      }
      .callout h3 {
        margin: 0 0 10px !important;
        font-size: 18px !important;
        color: var(--ink) !important;
      }
      .callout p {
        font-size: 15px !important;
        color: var(--ink-2) !important;
        margin: 0 !important;
      }

      /* Comparison table */
      .compare {
        margin: 40px 0;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      .compare-caption {
        padding: 20px 24px 18px;
        background: var(--surface);
        border-bottom: 1px solid var(--line-soft);
      }
      .compare-caption-eye {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        display: block;
        margin-bottom: 6px;
      }
      .compare-caption-h {
        font-family: var(--font-display);
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.015em;
        margin: 0;
        color: var(--ink);
      }
      .compare-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
      }
      .compare-table thead th {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        font-weight: 500;
        background: var(--surface);
        padding: 12px 20px;
        text-align: left;
        border-bottom: 1px solid var(--line-soft);
      }
      .compare-table tbody td {
        padding: 16px 20px;
        background: var(--bg);
        border-bottom: 1px solid var(--line-soft);
        color: var(--ink-2);
        line-height: 1.45;
      }
      .compare-table tbody tr:last-child td { border-bottom: 0; }
      .compare-table .col-scenario { color: var(--ink); font-weight: 500; width: 46%; }
      .compare-table .col-old {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--danger);
      }
      .compare-table .col-new {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--ok);
        font-weight: 500;
      }
      .compare-table tbody tr.highlight td {
        background: var(--accent-soft);
        border-top: 1px solid var(--line-soft);
      }

      /* Scenario blocks */
      .scenario {
        margin: 32px 0;
        padding: 24px 28px;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-lg);
        background: var(--surface);
      }
      .scenario h3 {
        margin: 0 0 14px !important;
        font-size: 19px !important;
      }
      .scenario-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-top: 18px;
      }
      @media (max-width: 620px) { .scenario-split { grid-template-columns: 1fr; } }
      .scenario-cost {
        padding: 14px 16px;
        border-radius: var(--radius);
        font-size: 13px;
        line-height: 1.4;
      }
      .scenario-cost-l {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 6px;
      }
      .scenario-cost-v {
        font-family: var(--font-mono);
        font-size: 22px;
        font-weight: 500;
        letter-spacing: -0.01em;
        display: block;
        margin-bottom: 4px;
      }
      .scenario-cost-d {
        color: var(--muted);
        font-size: 12px;
      }
      .scenario-cost.old { background: var(--danger-soft); }
      .scenario-cost.old .scenario-cost-v { color: var(--danger); }
      .scenario-cost.new { background: var(--ok-soft); }
      .scenario-cost.new .scenario-cost-v { color: var(--ok); }

      /* Plan pills */
      .plan-list {
        list-style: none !important;
        padding: 0 !important;
        margin: 20px 0 1.4em !important;
        display: grid;
        gap: 10px;
      }
      .plan-list li {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        padding: 14px 18px !important;
        margin: 0 !important;
        border: 1px solid var(--line-soft);
        border-radius: var(--radius);
        background: var(--surface);
      }
      .plan-list li strong { color: var(--ink); }
      .plan-list li span:last-child {
        font-family: var(--font-mono);
        font-size: 13px;
        color: var(--muted);
      }

      /* Closing CTA band */
      .post-cta-band {
        padding: 64px 0 96px;
        border-top: 1px solid var(--line-soft);
      }
      .post-cta-inner {
        max-width: 880px;
        margin: 0 auto;
        padding: 0 28px;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 40px;
        align-items: center;
      }
      @media (max-width: 720px) { .post-cta-inner { grid-template-columns: 1fr; gap: 24px; } }
      .post-cta-h {
        font-family: var(--font-display);
        font-size: clamp(24px, 3vw, 30px);
        font-weight: 500;
        letter-spacing: -0.02em;
        line-height: 1.15;
        margin: 0 0 10px;
        color: var(--ink);
      }
      .post-cta-p {
        color: var(--ink-2);
        font-size: 15px;
        line-height: 1.55;
        margin: 0;
        max-width: 52ch;
      }

      /* Next article row */
      .next-read {
        padding: 48px 0 0;
        border-top: 1px solid var(--line-soft);
      }
      .next-read-inner {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 28px;
      }
      .next-read-label {
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 20px;
      }
      .next-read-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1px;
        background: var(--line-soft);
        border: 1px solid var(--line-soft);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }
      @media (max-width: 620px) { .next-read-grid { grid-template-columns: 1fr; } }
      .next-read-card {
        padding: 22px 24px;
        background: var(--bg);
        text-decoration: none;
        color: inherit;
        transition: background 0.15s ease;
      }
      .next-read-card:hover { background: var(--surface); }
      .next-read-card:hover .next-read-h { color: var(--accent); }
      .next-read-cat {
        display: block;
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-bottom: 8px;
      }
      .next-read-h {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 500;
        letter-spacing: -0.01em;
        line-height: 1.25;
        margin: 0 0 6px;
        color: var(--ink);
        transition: color 0.15s ease;
      }
      .next-read-d {
        font-size: 13px;
        color: var(--muted);
        line-height: 1.4;
        margin: 0;
      }

      /* TL;DR block */
      .tldr {
        display: block;
        border: 1px solid var(--border, #e4e4e7);
        border-radius: 12px;
        padding: 20px 24px;
        margin: 0 0 32px 0;
        background: var(--surface-2, #fafafa);
      }
      .tldr-label {
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted, #71717a);
        margin-bottom: 6px;
      }
      .tldr-text {
        font-size: 1.05rem;
        line-height: 1.55;
        margin: 0;
        color: var(--ink, #18181b);
      }

      /* FAQ section */
      .faq-section { margin: 48px 0; }
      .faq-section h2 { margin-bottom: 24px; }
      .faq-item { margin-bottom: 20px; padding: 20px 24px; border: 1px solid var(--border, #e4e4e7); border-radius: 10px; background: var(--surface-1, #fff); }
      .faq-question { font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; color: var(--ink, #18181b); }
      .faq-answer { font-size: 1rem; line-height: 1.6; color: var(--fg, #27272a); }
      .faq-answer p { margin: 0 0 12px 0; }
      .faq-answer p:last-child { margin: 0; }