/* ===== Muse blog post ===== */
  .post-hero{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:clamp(120px,18vh,168px) 24px 6px}
  .cat-pill{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);background:var(--ink-soft);border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);padding:5px 12px;border-radius:999px;margin-bottom:18px}
  .post-hero h1{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4.8vw,46px);letter-spacing:-.03em;line-height:1.08;color:var(--ink1);margin:0;text-wrap:balance}
  .post-hero h1 em{font-style:normal;color:var(--accent-deep)}
  .post-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--ink3);margin-top:18px}
  .post-meta .dot{opacity:.5}
  .post-deck{font-size:clamp(17px,2.1vw,20px);line-height:1.55;color:var(--ink2);margin:22px 0 0;text-wrap:pretty}

  .article{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:8px 24px clamp(40px,7vh,72px)}
  .article p{font-size:17px;line-height:1.72;color:var(--ink2);margin:20px 0}
  .article h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;color:var(--ink1);margin:42px 0 12px;line-height:1.16}
  .article h3{font-family:var(--font-display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:var(--ink1);margin:30px 0 8px}
  .article a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
  .article a:hover{color:var(--accent)}
  .article strong{color:var(--ink1);font-weight:600}
  .article ul,.article ol{margin:18px 0;padding-left:22px;color:var(--ink2);font-size:17px;line-height:1.7}
  .article li{margin:9px 0}
  .article code{font-family:var(--font-mono);font-size:14px;background:var(--paper-2);border:1px solid var(--hairline);border-radius:6px;padding:1px 6px;color:var(--ink1)}

  .cmp-wrap{margin:28px 0;overflow-x:auto}
  .cmp-table{width:100%;border-collapse:collapse;font-size:15px;min-width:420px}
  .cmp-table th,.cmp-table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--hairline);vertical-align:top}
  .cmp-table thead th{font-family:var(--font-display);font-weight:600;color:var(--ink1);font-size:14px}
  .cmp-table tbody th{font-weight:500;color:var(--ink2);font-size:14.5px}
  .cmp-table .col-muse{background:var(--ink-soft)}
  .cmp-table thead .col-muse{color:var(--accent-deep)}
  .cmp-table .yes{color:var(--accent-deep);font-weight:600}
  .cmp-table .no{color:var(--ink4)}

  .callout{display:flex;gap:14px;align-items:flex-start;margin:28px 0;padding:18px 20px;border-radius:16px;background:var(--card);border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(20,40,32,.04)}
  .callout .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
  .callout .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .callout .bd b{display:block;font-family:var(--font-body);font-weight:600;color:var(--ink1);margin-bottom:3px;font-size:15px}
  .callout .bd p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink2)}
  .callout.tip{background:var(--ink-soft);border-color:color-mix(in srgb,var(--accent) 16%,transparent)}
  .callout.tip .ic{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent-deep)}
  .callout.info .ic{background:color-mix(in srgb,#48b1bf 18%,transparent);color:#2b8f9c}

  .faq{max-width:720px;margin:48px auto 0;padding:0 24px}
  .faq h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;color:var(--ink1);margin:0 0 8px}
  .faq details{border-top:1px solid var(--hairline)}
  .faq details:last-of-type{border-bottom:1px solid var(--hairline)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:17px 0;font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--ink1)}
  .faq summary::-webkit-details-marker{display:none}
  .faq .pm{position:relative;flex:none;width:14px;height:14px;margin-top:3px}
  .faq .pm::before,.faq .pm::after{content:"";position:absolute;background:var(--accent-deep);border-radius:2px;transition:transform .25s var(--ease-out)}
  .faq .pm::before{left:0;right:0;top:6px;height:2px}
  .faq .pm::after{top:0;bottom:0;left:6px;width:2px}
  .faq details[open] .pm::after{transform:scaleY(0)}
  .faq .ans{padding:0 0 18px;color:var(--ink2);font-size:15.5px;line-height:1.62;max-width:62ch}

  .related{max-width:720px;margin:48px auto 0;padding:28px 24px 0;border-top:1px solid var(--hairline)}
  .related h2{font-family:var(--font-display);font-weight:600;font-size:18px;letter-spacing:-.01em;color:var(--ink1);margin:0 0 10px}
  .related ul{list-style:none;padding:0;margin:0}
  .related a{display:flex;align-items:center;gap:9px;padding:11px 0;color:var(--ink1);font-weight:500;font-size:15.5px;text-decoration:none;transition:color .15s,transform .15s}
  .related a::before{content:"";width:6px;height:6px;border-right:2px solid var(--accent);border-top:2px solid var(--accent);transform:rotate(45deg);flex:none;opacity:.7}
  .related a:hover{color:var(--accent-deep);transform:translateX(2px)}

  .authorbox{max-width:720px;margin:36px auto 0;display:flex;gap:15px;align-items:flex-start;padding:20px 22px;border-radius:16px;background:var(--card);border:1px solid var(--hairline);box-shadow:0 1px 2px rgba(20,40,32,.04)}
  .authorbox .muse-mark{font-size:24px;flex:none;margin-top:2px}
  .authorbox b{display:block;color:var(--ink1);font-size:15px;margin-bottom:4px}
  .authorbox p{margin:0;font-size:14px;line-height:1.55;color:var(--ink2)}

  .cta{max-width:720px;margin:40px auto 0;text-align:center;padding:36px 28px;border-radius:var(--radius);background:linear-gradient(180deg,var(--ink-soft),var(--card));border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);box-shadow:0 1px 2px rgba(20,40,32,.04),0 18px 44px rgba(20,40,32,.06)}
  .cta h2{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,3vw,28px);letter-spacing:-.02em;color:var(--ink1);margin:0 0 8px}
  .cta>p{color:var(--ink2);font-size:16px;line-height:1.5;margin:0 auto 22px;max-width:46ch}
  .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
  .cta-btn{font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:999px;padding:13px 24px;text-decoration:none !important;transition:transform .15s,box-shadow .15s}
  .cta-btn.primary{color:#fff;background:linear-gradient(180deg,#33313A,var(--accent-deep));box-shadow:0 3px 10px rgba(26,25,23,.3),inset 0 1px 0 rgba(255,255,255,.28)}
  .cta-btn.primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(26,25,23,.4),inset 0 1px 0 rgba(255,255,255,.28)}
  .cta-btn.ghost{color:var(--ink1);background:var(--card);border:1px solid var(--hairline)}
  .cta-btn.ghost:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(20,45,35,.12)}
  .cta-note{display:block;margin-top:14px;font-size:13px;color:var(--ink3)}

  .back-wrap{max-width:720px;margin:36px auto 0;padding:0 24px}
  .back-btn{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-weight:600;font-size:14.5px;text-decoration:none;transition:color .15s}
  .back-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .back-btn:hover{color:var(--accent-deep)}

  /* ===== Comparison-page aesthetic, carried across to posts =====
     Mono tracked kicker, two-tone display headline, mono meta line. */
  .post-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;
    font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--ink4);text-decoration:none;transition:color .18s}
  .post-kicker:hover{color:var(--ink1);text-decoration:none}
  .post-kicker .muse-mark{font-size:15px}
  .post-kicker .kx{width:16px;height:1px;background:currentColor;opacity:.5;display:inline-block}
  .post-hero h1{font-size:clamp(34px,5.4vw,54px);letter-spacing:-.035em;line-height:1.02}
  .post-hero h1 em{font-style:normal;color:var(--ink3)}
  .post-meta{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink4);margin-top:22px}
  .article h2{margin-top:48px}
  /* Table header labels pick up the mono caps treatment */
  .cmp-table thead th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink4);font-weight:500}
  .cmp-table thead th.col-muse{color:var(--ink1)}

  /* ===== Tail blocks: full article width, no rules, matched CTA buttons ===== */
  /* These sit INSIDE .article, which already provides the 720px measure and the
     24px gutter, so they must not re-apply either or they render narrower. */
  .faq,.related{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .authorbox,.cta{max-width:none;margin-left:0;margin-right:0}
  .related{border-top:none;padding-top:0}

  /* FAQ: cards, matching the homepage accordion, instead of hairline dividers */
  .faq{margin-top:52px}
  .faq h2{margin-bottom:16px}
  .faq details{border:1px solid var(--hairline);border-radius:14px;background:var(--card);
    margin-bottom:8px;padding:0 18px;transition:border-color .18s,box-shadow .18s}
  .faq details:last-of-type{border-bottom:1px solid var(--hairline)}
  .faq details[open]{box-shadow:var(--shadow-tight)}
  .faq summary:hover{color:var(--ink1)}
  .faq details:hover{border-color:var(--ink4)}
  .faq .ans{max-width:none;padding-bottom:16px}

  /* Related guides as pills */
  .related{margin-top:44px}
  .related h2{margin-bottom:14px}
  .rel-pills{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
  .rel-pills li{margin:0}
  .rel-pills a{display:inline-flex;align-items:center;gap:0;padding:10px 16px;border-radius:999px;
    background:var(--card);border:1px solid var(--hairline);color:var(--ink1);
    font-size:14.5px;font-weight:500;line-height:1.3;text-decoration:none;
    transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out),border-color .16s}
  .rel-pills a::before{content:none}
  .rel-pills a:hover{transform:translateY(-2px);box-shadow:var(--shadow-tight);border-color:var(--ink4);color:var(--ink1)}

  /* CTA: centred, and both buttons exactly the same size */
  .cta{margin-top:52px;display:flex;flex-direction:column;align-items:center;text-align:center}
  .cta h2{margin-top:0}
  .cta-actions{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
  .cta-btn{display:inline-flex;align-items:center;justify-content:center;
    min-width:186px;height:48px;padding:0 22px;box-sizing:border-box;text-align:center}
  @media (max-width:480px){.cta-btn{min-width:0;width:100%}}

  /* ===== Round 2 fixes ===== */
  /* Primary button: keep the label legible on hover (a global a:hover was
     recolouring it to ink, which reads as black-on-black). */
  .cta-btn.primary,.cta-btn.primary:hover,.cta-btn.primary:focus,.cta-btn.primary:active{color:#fff}
  :root[data-theme="dark"] .cta-btn.primary,
  :root[data-theme="dark"] .cta-btn.primary:hover{color:#141317;background:linear-gradient(180deg,#FFFFFF,#D8D6D0)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .cta-btn.primary,
    :root:not([data-theme="light"]) .cta-btn.primary:hover{color:#141317;background:linear-gradient(180deg,#FFFFFF,#D8D6D0)}
  }
  .cta-btn.ghost,.cta-btn.ghost:hover{color:var(--ink1)}
  /* One line for the CTA subtitle */
  .cta>p{max-width:none;margin-bottom:22px}

  /* Related pills: one grid track each, so every pill is the same width and
     height no matter how long the title is. */
  .rel-pills{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:8px}
  .rel-pills a{border-radius:16px;justify-content:center;text-align:center;height:100%;box-sizing:border-box;
    padding:13px 18px;line-height:1.35;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* Mid-article CTA: lighter than the closing one so it does not compete. */
  .cta-inline{display:flex;align-items:center;justify-content:space-between;gap:18px;
    margin:44px 0;padding:18px 20px;border-radius:16px;
    background:var(--card);border:1px solid var(--hairline);box-shadow:var(--shadow-tight)}
  .cta-inline .ci-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
  .cta-inline .ci-copy b{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:-.015em;color:var(--ink1)}
  .cta-inline .ci-copy span{font-size:14px;line-height:1.45;color:var(--ink3)}
  .cta-inline .ci-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;
    height:42px;padding:0 20px;border-radius:999px;font-family:var(--font-body);font-weight:600;font-size:14.5px;
    color:#fff;background:linear-gradient(180deg,#33313A,var(--accent-deep));text-decoration:none !important;
    box-shadow:0 3px 10px rgba(26,25,23,.28),inset 0 1px 0 rgba(255,255,255,.28);
    transition:transform .15s,box-shadow .15s}
  .cta-inline .ci-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(26,25,23,.36),inset 0 1px 0 rgba(255,255,255,.28);color:#fff}
  :root[data-theme="dark"] .cta-inline .ci-btn,
  :root[data-theme="dark"] .cta-inline .ci-btn:hover{color:#141317;background:linear-gradient(180deg,#FFFFFF,#D8D6D0)}
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]) .cta-inline .ci-btn,
    :root:not([data-theme="light"]) .cta-inline .ci-btn:hover{color:#141317;background:linear-gradient(180deg,#FFFFFF,#D8D6D0)}
  }
  @media (max-width:560px){
    .cta-inline{flex-direction:column;align-items:flex-start;gap:14px}
    .cta-inline .ci-btn{width:100%}
  }

  /* ===== Table of contents ===== */
  .post-toc{margin:0 0 34px;padding:20px 22px;border-radius:16px;background:var(--card);border:1px solid var(--hairline)}
  .post-toc b{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink4);margin-bottom:12px;font-weight:500}
  .post-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
  .post-toc li{counter-increment:toc;margin:0}
  .post-toc a{display:flex;gap:10px;padding:6px 0;font-size:15px;line-height:1.45;color:var(--ink2);text-decoration:none;transition:color .15s}
  .post-toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-family:var(--font-mono);font-size:11px;color:var(--ink4);padding-top:3px}
  .post-toc a:hover{color:var(--ink1);text-decoration:none}
  html{scroll-behavior:smooth}
  .article h2{scroll-margin-top:90px}


  /* ===== Price anchor ===== */
  .price-anchor{margin:52px 0 14px;display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:16px;overflow:hidden}
  .pa-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 18px;background:var(--card)}
  .pa-name{font-size:15px;color:var(--ink2)}
  .pa-price{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--ink3)}
  .pa-row.is-muse{background:var(--ink-soft)}
  .pa-row.is-muse .pa-name{color:var(--ink1);font-weight:600}
  .pa-row.is-muse .pa-price{color:var(--ink1);font-weight:600;font-size:13px}

  /* Price colours, using the same pro/con tokens as the comparison pages.
     The Muse row also keeps its tint and bold weight, so the meaning survives
     without colour for anyone who cannot separate red from green. */
  .price-anchor{--pa-con:#bf554a;--pa-pro:#2f8a5b}
  :root[data-theme="dark"] .price-anchor{--pa-con:#ee8e84;--pa-pro:#6dc89b}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .price-anchor{--pa-con:#ee8e84;--pa-pro:#6dc89b}}
  .pa-price.is-cost{color:var(--pa-con)}
  .pa-price.is-win{color:var(--pa-pro)}
  .pa-row.is-muse .pa-price.is-win{color:var(--pa-pro)}

  /* Muse row inverts to a solid ink block, so it reads as the answer rather
     than just another row. The price stays green against it. */
  .pa-row.is-muse{background:var(--ink1)}
  .pa-row.is-muse .pa-name{color:var(--paper);font-weight:600}
  .pa-row.is-muse .pa-price.is-win{color:var(--pa-pro-on-ink)}
  .price-anchor{--pa-pro-on-ink:#6dc89b}
  :root[data-theme="dark"] .price-anchor{--pa-pro-on-ink:#256E48}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .price-anchor{--pa-pro-on-ink:#256E48}}

  /* ---- Price anchor, final treatment ----
     Rivals recede on a grey fill; Muse sits forward on the plain card colour.
     In dark mode "grey" and "white" invert to darker/lighter so the same
     recede-vs-stand-forward relationship holds. */
  .pa-row{background:var(--paper-2)}
  .pa-row .pa-name{color:var(--ink3)}
  .pa-row.is-muse{background:var(--card)}
  .pa-row.is-muse .pa-name{color:var(--ink1);font-weight:600}
  .pa-row.is-muse .pa-price.is-win{color:var(--pa-pro)}

  /* ---- Buttons take their container's corner radius ---- */
  .cta-btn{border-radius:var(--radius)}
  .cta-inline .ci-btn{border-radius:16px}

  /* Light mode sits on near-white now, so both price colours darken a step to
     clear the 4.5 contrast floor (measured: green 4.28 -> 5.06, red 3.81 -> 4.95).
     Dark mode already passed comfortably and keeps the brighter pair. */
  .price-anchor{--pa-con:#a84439;--pa-pro:#2a7d52}
  :root[data-theme="dark"] .price-anchor{--pa-con:#ee8e84;--pa-pro:#6dc89b}
  @media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .price-anchor{--pa-con:#ee8e84;--pa-pro:#6dc89b}}

  /* Closing CTA: card colour at the top, grey settling at the bottom (flipped). */
  .cta{background:linear-gradient(180deg,var(--card),var(--ink-soft))}

  /* ===== Hierarchy pass =====
     Five stacked cards made everything equal weight. Only the CTA stays a filled
     card; the FAQ and byline drop to plain type so the eye has somewhere to land.
     The price anchor and CTA keep the treatment already signed off. */

  /* FAQ: no card, no rules. Spacing and a hover tint do the separating. */
  .faq details{border:none;border-radius:12px;background:transparent;box-shadow:none;
    margin-bottom:2px;padding:0 12px;transition:background .18s}
  .faq details:last-of-type{border-bottom:none}
  .faq details[open]{box-shadow:none;background:var(--ink-soft)}
  .faq details:hover{border-color:transparent;background:var(--ink-soft)}
  .faq summary{padding:16px 0}
  .faq .ans{padding-bottom:16px}

  /* Byline: a line of type, not a panel. */
  .authorbox{background:transparent;border:none;box-shadow:none;padding:0;
    margin-top:40px;padding-top:22px;border-top:1px solid var(--hairline)}
  .authorbox b{font-size:14px}
  .authorbox p{font-size:13.5px;color:var(--ink3)}

  /* Related guides: outline only, so they read as navigation rather than content. */
  .rel-pills a{background:transparent}
  .rel-pills a:hover{background:var(--card)}

  /* FAQ rows: the hover fill needs side padding, but the text must still line up
     with the section heading. Pull the row out by the same amount it is padded. */
  .faq details{margin-left:-14px;margin-right:-14px;padding:0 14px}
  /* No rule above the byline. */
  .authorbox{border-top:none;padding-top:0;margin-top:44px}