/* Article polish: guides + compare. Visual only, loaded after handoff-article.css.
   Radius, surface, type and layout rules per better-ui / better-typography / better-layout. */

/* type: wrapping, numerals, rendering */
.hf { text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
.hf .hf-h1, .hf .hf-h2, .hf .hf-consult .hf-t { text-wrap: balance; }
.hf .hf-p, .hf .hf-short .hf-lead, .hf .hf-ul li, .hf .hf-check p, .hf .hf-sub, .hf .hf-faq details p { text-wrap: pretty; }
.hf .hf-h1 { font-weight: 600; letter-spacing: -0.035em; }
.hf .hf-h2 { font-weight: 600; letter-spacing: -0.025em; line-height: 1.18; }
.hf .hf-p { font-size: 18px; line-height: 1.6; color: #2E2E30; }
.hf .hf-ul { font-size: 18px; line-height: 1.6; color: #2E2E30; }
.hf .hf-p strong, .hf .hf-ul strong { color: #1D1D1F; font-weight: 600; }
.hf .hf-p a, .hf .hf-ul a, .hf .hf-faq details p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(29,29,31,.35); transition: text-decoration-color 150ms ease; }
.hf .hf-p a:hover, .hf .hf-ul a:hover, .hf .hf-faq details p a:hover { text-decoration-color: #1D1D1F; }
.hf .hf-sec[id] { scroll-margin-top: 110px; }

/* layout rhythm: more air between sections than inside them */
.hf .hf-article { gap: 56px; }
.hf .hf-sec { gap: 18px; }
.hf .hf-main { gap: 96px; }

/* chips + crumbs */
.hf .hf-chip { background: #F5F4F0; color: #3A3A3C; font-variant-numeric: tabular-nums; }
.hf .hf-crumbs a { transition: color 150ms ease; }
.hf .hf-crumbs a:hover { color: #1D1D1F; }

/* cards: concentric radius (outer 28 = inner 12 + padding 16) and soft depth instead of lines */
.hf .hf-short { border-radius: 28px; padding: 40px 42px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.035); }
.hf .hf-short .hf-lead { font-size: clamp(21px, 2vw, 25px); line-height: 1.32; letter-spacing: -0.02em; }
.hf .hf-check, .hf .hf-numcard, .hf .hf-related a, .hf .hf-more-grid a { box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }

/* related rows and cards: real hover + focus states */
.hf .hf-related a, .hf .hf-more-grid a { transition: background-color 180ms cubic-bezier(.2,0,0,1), transform 180ms cubic-bezier(.2,0,0,1); }
@media (hover: hover) {
  .hf .hf-related a:hover, .hf .hf-more-grid a:hover { background: #ECEAE4; }
}
.hf .hf-related a:active, .hf .hf-more-grid a:active { transform: scale(0.98); }

/* buttons: press feedback, specific transitions */
.hf .hf-head a.hf-cta, .hf .hf-consult .hf-btnw, .hf .hf-btn, .hf .hf-foot .hf-btnw, .hf .hf-float a, .hf .hf-mhead a.hf-cta {
  transition: transform 160ms cubic-bezier(.2,0,0,1), background-color 160ms ease;
}
.hf .hf-head a.hf-cta:active, .hf .hf-consult .hf-btnw:active, .hf .hf-btn:active, .hf .hf-foot .hf-btnw:active, .hf .hf-float a:active, .hf .hf-mhead a.hf-cta:active { transform: scale(0.96); }
@media (hover: hover) {
  .hf .hf-consult .hf-btnw:hover { background: #F2F2F4; }
  .hf .hf-head a.hf-cta:hover { background: #000; }
}
.hf a:focus-visible, .hf summary:focus-visible, .hf button:focus-visible { outline: 2px solid #1D1D1F; outline-offset: 3px; border-radius: 12px; }
.hf .hf-consult a:focus-visible { outline-color: #FFF; }

/* sidebar */
.hf .hf-toc a { transition: background-color 150ms ease, color 150ms ease; }
.hf .hf-consult { border-radius: 28px; padding: 32px 28px 26px; }

/* FAQ */
.hf .hf-faq summary { font-weight: 500; letter-spacing: -0.01em; transition: color 150ms ease; }
.hf .hf-faq details p { max-width: 62ch; }

/* comparison tables: the warm card with a dark Pymander column, applied to the existing markup */
.hf .seo-tablewrap {
  background: #F5F4F0; border-radius: 28px; padding: 14px 16px; margin: 22px 0 6px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.hf .seo-tablewrap table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.5; color: #3A3A3C; font-variant-numeric: tabular-nums; }
.hf .seo-tablewrap th, .hf .seo-tablewrap td { text-align: left; vertical-align: top; padding: 16px 18px; border-bottom: 1px solid #E5E3DD; }
.hf .seo-tablewrap thead th { font-size: 14px; font-weight: 600; color: #1D1D1F; letter-spacing: 0; padding-top: 18px; padding-bottom: 14px; }
.hf .seo-tablewrap tbody td:first-child { width: 150px; font-size: 14px; font-weight: 500; color: #6E6E73; }
.hf .seo-tablewrap tbody td { color: #2E2E30; }
.hf .seo-tablewrap tbody tr:last-child td { border-bottom: 0; }
.hf .seo-tablewrap thead th:nth-child(2), .hf .seo-tablewrap tbody td:nth-child(2) { background: #1D1D1F; color: #F5F4F0; border-bottom-color: rgba(255,255,255,.12); }
.hf .seo-tablewrap thead th:nth-child(2) { color: #FFF; border-radius: 16px 16px 0 0; }
.hf .seo-tablewrap tbody tr:last-child td:nth-child(2) { border-radius: 0 0 16px 16px; }

@media (max-width: 900px) {
  .hf .hf-main { gap: 56px; }
  .hf .hf-article { gap: 44px; }
  .hf .hf-short { padding: 28px 24px; }
  .hf .hf-p, .hf .hf-ul { font-size: 17px; }
  .hf .seo-tablewrap { margin-inline: -4px; padding: 10px 10px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .hf .hf-related a, .hf .hf-more-grid a, .hf a, .hf .hf-btn { transition: none !important; }
}