html { scroll-padding-top: var(--pg-top, 124px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.pg { color: var(--wt-fg); font-size: var(--wt-text-2); line-height: var(--wt-text-2-lh); font-weight: var(--wt-w-body); }
.pg-wrap { max-width: var(--wt-max); margin-inline: auto; padding-inline: var(--wt-gutter); }
.pg a { color: var(--wt-link); }
.pg a:hover { color: var(--wt-link-hover); }
.pg a.wt-btn--brand, .pg a.cta-button { color: var(--wt-on-brand); }
.pg h1, .pg h2, .pg h3, .pg h4 { font-weight: var(--wt-w-head); color: var(--wt-fg); }
:where(.pg) :is(p, h1, h2, h3, h4, ul, ol) { margin: 0; padding: 0; }
.pg [hidden] { display: none !important; }
.pg ul, .pg ol { list-style: none; }

.pg-hero { background: var(--wt-bg-deep); padding-block: 48px 64px; }
.pg-back { font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted) !important; text-decoration: none; }
.pg-back:hover { color: var(--wt-fg) !important; }
.pg-title { margin-top: 16px; font-size: var(--wt-hero); line-height: var(--wt-hero-lh); letter-spacing: var(--wt-hero-ls); }
.pg-lede { margin-top: 24px; max-width: 60ch; font-size: var(--wt-text-1); line-height: var(--wt-text-1-lh); }

.pg-face { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 24px; margin-top: 48px; }
.pg-face--many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-vs { align-self: center; padding: 8px 16px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-pill); background: var(--wt-bg); color: var(--wt-fg-muted); font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); }
.pg-block { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }
.pg-block--self { background: var(--wt-brand-tint); }
.pg-block-head { display: flex; align-items: center; gap: 16px; }
.pg-logo { flex: none; width: 48px; height: 48px; border-radius: var(--wt-r-md); object-fit: contain; }
.pg-logo--s { width: 28px; height: 28px; border-radius: var(--wt-r-sm); }
.pg-block-name { font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-block-line { font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pg-price b { font-size: var(--wt-digits-2); line-height: var(--wt-digits-2-lh); font-weight: var(--wt-w-light); }
.pg-price span { font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-facts { align-self: stretch; }
.pg-facts li { padding-block: 12px; border-top: 1px solid var(--wt-border); }
.pg-block .wt-btn { margin-top: auto; }

.pg-bar { position: sticky; top: var(--wt-nav-h); z-index: 50; background: var(--wt-bg); border-bottom: 1px solid var(--wt-border); }
.pg-bar ul { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pg-bar ul::-webkit-scrollbar { display: none; }
.pg-bar a { display: block; padding: 14px 16px; white-space: nowrap; color: var(--wt-fg-muted); text-decoration: none; }
.pg-bar a:hover { color: var(--wt-fg); }
.pg-bar a.is-active { color: var(--wt-fg); box-shadow: inset 0 -2px 0 var(--wt-fg); }

.pg-sec { padding-block: 64px; }
.pg-sec--tint { background: var(--wt-bg-subtle); }
.pg-sec--tight { padding-block: 24px 64px; }
.pg-head { max-width: var(--wt-max-article); margin-bottom: 32px; }
.pg-h2 { font-size: var(--wt-h1); line-height: var(--wt-h1-lh); letter-spacing: var(--wt-h1-ls); }
.pg-sub { margin-top: 16px; font-size: var(--wt-text-1); line-height: var(--wt-text-1-lh); color: var(--wt-fg-muted); }

.pg-chip, .pg-switch { min-height: 44px; padding: 8px 24px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-pill); background: transparent; color: var(--wt-fg); font: inherit; cursor: pointer; transition: background var(--wt-dur); }
.pg-chip:hover, .pg-switch:hover { background: var(--wt-bg-inline); }
.pg-chip[aria-pressed="true"], .pg-switch[aria-checked="true"] { background: var(--wt-fg); border-color: var(--wt-fg); color: var(--wt-on-invert); }
.pg-chip:focus-visible, .pg-switch:focus-visible, .pg-bar a:focus-visible, .pg summary:focus-visible { outline: 2px solid var(--wt-focus); outline-offset: 2px; }

.pg-asks { display: grid; gap: 16px; }
.pg-asks li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.is-live > .pg-asks { display: flex; flex-wrap: wrap; gap: 16px; }
.is-live .pg-pick { display: none; }
.pg-verdict { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px 24px; margin-top: 32px; padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }
.pg-verdict h3 { font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-verdict p { grid-column: 1; max-width: 60ch; }
.pg-verdict .pg-link { grid-column: 2; grid-row: 1 / span 2; }

.pg-seg { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.is-live .pg-scn-title { display: none; }
.pg-scn + .pg-scn { margin-top: 48px; }
.is-live .pg-scn + .pg-scn { margin-top: 0; }
.pg-scn-title { margin-bottom: 16px; font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pg-plan { padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }
.pg-plan--self { background: var(--wt-brand-tint); }
.pg-plan h3 { font-size: var(--wt-text-2); line-height: var(--wt-text-2-lh); color: var(--wt-fg-muted); font-weight: var(--wt-w-body); }
.pg-plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; }
.pg-plan-price b { font-size: var(--wt-digits-2); line-height: var(--wt-digits-2-lh); font-weight: var(--wt-w-light); }
.pg-plan-price span, .pg-plan-note { font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-plan-note { margin-top: 8px; }
.pg-gap { margin-top: 24px; font-size: var(--wt-text-1); line-height: var(--wt-text-1-lh); }

.pg-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.pg-tools .pg-head { margin-bottom: 0; }
.pg-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.pg-table thead th { position: sticky; top: calc(var(--pg-top, 124px) - 4px); z-index: 5; padding: 16px; background: var(--wt-bg); border-top: 4px solid var(--wt-bg); border-bottom: 1px solid var(--wt-border); text-align: left; font-weight: var(--wt-w-head); }
.pg-th { display: flex; align-items: center; gap: 12px; }
.pg-table tbody th[scope="row"], .pg-table td { padding: 16px; border-bottom: 1px solid var(--wt-border-soft); vertical-align: top; text-align: left; }
.pg-table tbody th[scope="row"] { width: 30%; font-weight: var(--wt-w-head); }
.pg-info { display: block; margin-top: 4px; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); font-weight: var(--wt-w-body); }
.pg-group th { padding: 48px 16px 8px !important; border-bottom: 1px solid var(--wt-border) !important; font-size: var(--wt-h3); line-height: var(--wt-h3-lh); font-weight: var(--wt-w-head); text-align: left; }
.pg-table td.is-self { background: var(--wt-brand-tint); }
.pg-table[data-differ] tr[data-edge="same"], .pg-table[data-differ] tr[data-edge="open"], .pg-table [hidden] { display: none; }
.pg-v { display: flex; gap: 8px; }
.pg-v-text { padding-left: 28px; }
.pg-v svg { flex: none; width: 20px; height: 20px; margin-top: 2px; }
.pg-v-yes svg { color: var(--wt-positive); }
.pg-v-no svg { color: var(--wt-negative); }
.pg-v-unknown svg, .pg-v-unknown span { color: var(--wt-fg-muted); }
.pg-v small { display: block; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-v.is-edge span { font-weight: var(--wt-w-head); }
.pg-v sup a { margin-left: 2px; font-size: var(--wt-text-3); text-decoration: none; }
.pg-edge { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: var(--wt-r-sm); background: var(--wt-bg-inline); font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); }
.pg-edge--self { background: var(--wt-brand-tint-strong); }
.pg-count { margin-top: 16px; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }

.pg-either.pg-either--one { grid-template-columns: minmax(0, 1fr); }
.pg-wins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.pg-win { padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }
.pg-wins--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.pg-either { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.pg-either-col { padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg); }
.pg-either-col h3 { font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-either-col ul { margin-top: 16px; }
.pg-either-col li { padding-block: 16px; border-top: 1px solid var(--wt-border-soft); color: var(--wt-fg-muted); }
.pg-either-col li:first-child { border-top: 0; }
.pg-either-col b { font-weight: var(--wt-w-head); color: var(--wt-fg); }
.pg-win h2, .pg-win h3 { font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-win p { margin-top: 8px; color: var(--wt-fg-muted); }

.pg { --r: 1.3333; }
.pg .feature-row, .pg .feature-mockup { --fit: calc((100svh - var(--pg-top, 124px) - 52px) * var(--r)); }
.pg-scene { border-radius: var(--wt-r-lg); }
.pg .feature-mockup { aspect-ratio: var(--r); width: min(100%, var(--fit)); height: auto; margin-inline: auto; }
.pg img.feature-mockup { aspect-ratio: auto; }
.pg-scene--hero { margin-top: 48px; }
.pg-scene--hero .feature-mockup { width: min(100%, calc(var(--r) * 700px)); margin-inline: 0; }
.pg-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.pg-link { display: inline-block; margin-top: 16px; }
.pg-win--link { display: block; text-decoration: none; transition: background var(--wt-dur); }
.pg-win--link:hover { background: var(--wt-bg-inline); }
.pg-win--link p { color: var(--wt-fg-muted); }
.pg-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pg-limits li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pg-limits li { padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }

.pg-board { border: 1px solid var(--wt-border); border-radius: var(--wt-r-lg); background: var(--wt-bg); overflow: hidden; }
.pg-board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--wt-border); font-weight: var(--wt-w-head); }
.pg-board-list li { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--wt-border-soft); }
.pg-board-list li:last-child { border-bottom: 0; }
.pg-board strong { display: block; font-size: var(--wt-text-2); line-height: var(--wt-text-2-lh); }
.pg-board p { font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-vote { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 56px; min-height: 56px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-md); background: transparent; color: var(--wt-fg); font: inherit; cursor: pointer; transition: background var(--wt-dur); }
.pg-vote:hover { background: var(--wt-bg-inline); }
.pg-vote[aria-pressed="true"] { background: var(--wt-brand); color: var(--wt-on-brand); }
.pg-vote:focus-visible { outline: 2px solid var(--wt-focus); outline-offset: 2px; }
.pg-vote svg { width: 20px; height: 20px; }

.pg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-steps li, .pg-move { padding: 32px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-xl); background: var(--wt-bg-raised); }
.pg-steps h3, .pg-move h3 { font-size: var(--wt-h3); line-height: var(--wt-h3-lh); }
.pg-steps p { margin-top: 8px; color: var(--wt-fg-muted); }
.pg-moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.pg-move li { padding-block: 12px; border-top: 1px solid var(--wt-border); }
.pg-move h3 { margin-bottom: 16px; }

.pg-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 72px; padding: 96px; border-radius: var(--wt-r-xl); background: var(--wt-brand); color: var(--wt-on-brand); }
.pg-band h2 { max-width: 16ch; font-size: var(--wt-hero); line-height: var(--wt-hero-lh); color: var(--wt-on-brand); }
.pg-band p { max-width: 40ch; margin-top: 24px; color: var(--wt-on-brand); font-size: var(--wt-text-1); line-height: 1.5; }
.pg-band-actions { display: flex; flex-direction: column; align-items: stretch; gap: 16px; }
.pg-band .cta-button { background: var(--wt-on-brand); color: var(--wt-brand) !important; }
.pg-band .cta-button-outline { background: var(--wt-brand-hover); color: var(--wt-on-brand) !important; border-color: transparent; }
.pg-related { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
.plan-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--wt-rhythm); max-width: 1140px; margin-bottom: calc(var(--wt-rhythm) * 1.5); padding: calc(var(--wt-rhythm) * 1.5); border: 1px solid var(--wt-border); border-radius: var(--wt-r-lg); background: var(--wt-bg-raised); }
.plan-strip h2 { font-size: var(--wt-h3); line-height: 1.25; font-weight: var(--wt-w-head); }
.plan-strip p { margin-top: 8px; color: var(--wt-fg-muted); }
.plan-strip .price { color: var(--wt-fg); font-size: var(--wt-text-2); line-height: var(--wt-text-2-lh); font-weight: var(--wt-w-body); }
.plan-strip .pricing-cta { width: auto; min-width: 168px; margin: 0; }
@media (max-width: 760px) { .plan-strip { flex-direction: column; align-items: stretch; } .plan-strip .pricing-cta { width: 100%; } }
.pg-sources { margin-top: 32px; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg-sources summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.pg-sources ol { padding-left: 24px; list-style: decimal; }
.pg-sources li { padding-block: 4px; }

@media (max-width: 1023px) {
    .pg-hero { padding-block: 32px 48px; }
    .pg-title { font-size: var(--wt-h1); line-height: var(--wt-h1-lh); }
    .pg-band { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px; }
    .pg-band h2 { font-size: var(--wt-h1); line-height: var(--wt-h1-lh); }
    .pg-wins--3, .pg-steps, .pg-limits { grid-template-columns: minmax(0, 1fr); }
    .pg .wt-btn, .pg-link, .pg-back { display: inline-flex; align-items: center; min-height: 44px; }
    .faq-category-btn, .toggle-btn { min-height: 44px; }
}
@media (max-width: 767px) {
    .pg-face, .pg-face--many { grid-template-columns: minmax(0, 1fr); }
    .pg-vs { justify-self: center; }
    .pg-block, .pg-plan, .pg-win, .pg-verdict, .pg-either-col { padding: 24px; }
    .pg-plans, .pg-wins, .pg-moves, .pg-either { grid-template-columns: minmax(0, 1fr); }
    .pg-verdict { grid-template-columns: minmax(0, 1fr); }
    .pg-verdict p, .pg-verdict .pg-link { grid-column: 1; grid-row: auto; }
    .pg-sec { padding-block: 48px; }
    .pg-h2 { font-size: var(--wt-h2); line-height: var(--wt-h2-lh); }
    .pg-band { padding: 24px; }
    .pg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .pg-table, .pg-table tbody, .pg-table tr, .pg-table th, .pg-table td { display: block; }
    .pg-table tr[data-edge] { margin-top: 16px; padding: 16px; border: 1px solid var(--wt-border); border-radius: var(--wt-r-lg); background: var(--wt-bg-raised); }
    .pg-table tbody th[scope="row"], .pg-table td { width: auto; padding: 8px 0; border: 0; }
    .pg-table td::before { content: attr(data-label); display: block; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
    .pg-table td.is-self { padding: 12px; margin-inline: -12px; border-radius: var(--wt-r-md); }
    .pg-group th { padding: 32px 0 0 !important; border: 0 !important; }
}
.pg-title, .pg-h2, .pg .feature-heading { text-wrap: balance; }
.pg-title .highlighted { display: block; }
.pg-note { margin-top: 12px; font-size: var(--wt-text-3); line-height: var(--wt-text-3-lh); color: var(--wt-fg-muted); }
.pg .feature-showcase { gap: 24px; }
.pg .feature-row { padding: 24px; }
.pg .feature-heading { font-size: var(--wt-h2); line-height: var(--wt-h2-lh); }
.pg .feature-row.split, .pg .feature-row.flip { grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--fit), var(--w, 64%))); gap: 32px; align-items: center; }
.pg .feature-row.flip { grid-template-columns: minmax(0, min(var(--fit), var(--w, 64%))) minmax(0, 1fr); }
.pg .feature-row.stack { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.pg .feature-row.stack .feature-mockup { width: 100%; }
.pg .feature-row.flip .feature-text { order: 2; }
.pg .feature-description + .feature-description { margin-top: 12px; }
.pg-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: calc(var(--wt-rhythm) * 3); align-items: start; }
.pg-faq .pg-head { position: sticky; top: calc(var(--pg-top, 124px) + 24px); margin: 0; }
.pg-q { border-bottom: 1px solid var(--wt-border); }
.pg-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding-block: 20px; font-size: var(--wt-h3); line-height: var(--wt-h3-lh); font-weight: var(--wt-w-head); cursor: pointer; list-style: none; }
.pg-q summary::-webkit-details-marker { display: none; }
.pg-q summary::after { content: "+"; flex: none; font-weight: var(--wt-w-light); }
.pg-q[open] summary::after { content: "\2212"; }
.pg-q p { max-width: 60ch; padding-bottom: 20px; color: var(--wt-fg-muted); }
@media (min-width: 901px) {
    .pg .feature-row.stack .feature-text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px 32px; align-items: start; }
    .pg .feature-row.stack .feature-heading { grid-row: 1 / span 3; }
    .pg .feature-row.stack .feature-heading + .feature-description { margin-top: 0; }
}
footer .directory-disclosure summary, footer .directory-text-badge { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 900px) {
    .pg .feature-row.split, .pg .feature-row.flip, .pg .feature-row.stack { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px; }
    .pg .feature-row .pg-scene { margin-inline: -10px; }
    .pg .feature-row.flip .feature-text { order: 0; }
    .pg-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .pg-faq .pg-head { position: static; }
}