/* Layout additions only. Shared Hosting CSS owns colours, typography, navigation,
   hero, buttons, plan cards and footer; this page defines no alternate theme. */
html{scroll-padding-top:110px}
.plans-page [hidden]{display:none!important}
.plans-page button,.plans-page select,.plans-page textarea,.plans-page input{font-family:inherit}
.plans-page button,.plans-page input,.plans-page select{accent-color:var(--primary)}
.plans-page button:focus-visible,.plans-page a:focus-visible,.plans-page input:focus-visible,.plans-page select:focus-visible,.plans-page textarea:focus-visible,.plans-page [tabindex]:focus-visible{outline:2px solid var(--primary);outline-offset:4px}
.plans-page .skip-link{position:fixed;top:-80px;left:20px;z-index:100;background:var(--foreground);color:var(--background);padding:12px 20px;border-radius:6px}
.plans-page .skip-link:focus{top:12px}
.plans-page .scope-note{max-width:58rem;margin:2rem auto 0;color:var(--muted-foreground);font-size:.875rem}
.plans-page .scope-note strong{color:var(--foreground)}
.plans-page .catalog{padding:1.5rem 1rem 4rem}
.plans-page .filter-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;margin-bottom:2rem}
.plans-page .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}
.plans-page .filters button{padding:.75rem 1.25rem;border:1px solid var(--border);border-radius:.375rem;background:var(--background);color:var(--foreground);font-size:1rem;cursor:pointer}
/* Same blue as the shared .btn-primary, so the active filter matches the buttons beside it. */
.plans-page .filters button[aria-pressed="true"]{background:#2563eb;border-color:#2563eb;color:var(--primary-foreground)}
.plans-page .small-copy{color:var(--muted-foreground);font-size:.875rem}
.plans-page .plan-card{width:100%;display:flex;flex-direction:column}
.plans-page .card-body{display:flex;flex-direction:column;flex:1}
.plans-page .version-tag{color:var(--muted-foreground);font-size:.875rem;margin-bottom:.75rem}
.plans-page .card-summary{flex:1}
.plans-page .tier-label{margin:.75rem 0 .25rem;font-weight:500}
.plans-page .price-currency{color:var(--muted-foreground);font-size:.875rem;font-weight:400}
.plans-page .resource-line{color:var(--muted-foreground);font-size:.875rem}
.plans-page .card-includes{margin:1rem 0 1.5rem}
.plans-page .card-actions{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:auto}
.plans-page .card-actions .btn{gap:.6rem;padding-inline:1.25rem}
.plans-page .compare-toggle{display:flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;font-size:.875rem}
.plans-page .compare-toggle input{width:18px;height:18px}
.plans-page .pricing-note{max-width:68rem;margin:2rem auto 0;color:var(--muted-foreground);text-align:center;font-size:.875rem}
.plans-page .pricing-note a,.plans-page .scope-note a{color:var(--primary);text-underline-offset:3px}
.plans-page .comparison-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:.75rem;background:var(--card)}
.plans-page table{border-collapse:collapse;width:100%;min-width:750px;text-align:left;font-size:1rem}
.plans-page th,.plans-page td{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);vertical-align:top}
.plans-page thead th{font-weight:600}
.plans-page tbody th{font-weight:500;color:var(--muted-foreground)}
.plans-page td small{display:block;color:var(--muted-foreground);font-size:.875rem;margin-top:.25rem}
.plans-page tr:last-child>th,.plans-page tr:last-child>td{border-bottom:0}
.plans-page .comparison-empty{padding:2rem;color:var(--muted-foreground);font-size:1rem}
.plans-page .guide-section{padding-top:4rem;padding-bottom:3rem}
.plans-page .guide-picker{display:flex;flex-direction:column;gap:.5rem;max-width:25rem;margin:2rem auto 0;font-size:1rem;color:var(--muted-foreground)}
.plans-page .guide-picker select{width:100%;min-height:48px;padding:.75rem 1rem;border:1px solid var(--border);border-radius:.375rem;background:var(--card);color:var(--foreground);font-size:1rem}
.plans-page .guide-layout{max-width:62rem;margin:0 auto}
.plans-page .guide-summary{text-align:center;padding-bottom:3rem;border-bottom:1px solid var(--border);margin-bottom:3rem}
.plans-page .guide-summary h3{font-size:1.75rem;font-weight:600;margin-bottom:1rem}
.plans-page .guide-summary p{color:var(--muted-foreground);margin:1rem auto;max-width:56rem;font-size:1rem}
.plans-page .guide-summary .suggested-tier{color:var(--foreground)}
.plans-page .guide-summary .btn{margin-top:1rem;gap:.75rem}
.plans-page .text-link{color:var(--primary);font-size:1rem;text-decoration:underline;text-underline-offset:4px}
.plans-page .guide-summary .text-link{display:block;width:fit-content;margin:1rem auto 0}
.plans-page .guide-scope{color:var(--muted-foreground);font-size:.875rem;margin:1.5rem auto 0;max-width:52rem}
.plans-page .guide-body h3{font-size:1.5rem;font-weight:600}
.plans-page .prerequisites{padding-left:1.5rem;margin:1rem 0 2.5rem}
.plans-page .prerequisites li{color:var(--muted-foreground);font-size:1rem;margin-bottom:1rem;padding-left:.25rem}
.plans-page .guide-progress{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem}
.plans-page .progress-copy{color:var(--muted-foreground);font-size:.875rem}
.plans-page progress:not(.motion-progress-native){width:100%;height:8px;display:block;appearance:none;border:0;border-radius:4px;overflow:hidden;background:var(--border)}
.plans-page progress:not(.motion-progress-native)::-webkit-progress-bar{background:var(--border)}
.plans-page progress:not(.motion-progress-native)::-webkit-progress-value{background:var(--primary)}
.plans-page progress:not(.motion-progress-native)::-moz-progress-bar{background:var(--primary)}
.plans-page .checklist{list-style:none;margin-top:1rem}
.plans-page .check-item{display:flex;gap:1rem;padding:1.5rem 0;border-bottom:1px solid var(--border);cursor:pointer}
.plans-page .check-item input{width:20px;height:20px;flex-shrink:0;margin-top:4px}
.plans-page .check-item strong{display:block;font-size:1rem;font-weight:600}
.plans-page .check-item small{display:block;font-size:1rem;color:var(--muted-foreground);margin-top:.5rem}
.plans-page .check-item.completed strong{text-decoration:line-through;color:var(--muted-foreground)}
.plans-page .local-note{color:var(--muted-foreground);font-size:.875rem;margin-top:1rem}
.plans-page .checklist-actions{display:flex;flex-wrap:wrap;gap:1rem;margin:1.5rem 0 3rem}
.plans-page .checklist-actions .btn{gap:.75rem}
.plans-page .reset-button{padding:.75rem;background:transparent;border:0;color:var(--muted-foreground);font-size:1rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.plans-page .upgrade-list{margin:1rem 0 2rem;padding-left:1.5rem;color:var(--muted-foreground);font-size:1rem}
.plans-page .upgrade-list li{margin-bottom:1rem;padding-left:.25rem}
.plans-page .sources{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;margin-top:1rem}
.plans-page .sources a{color:var(--primary);font-size:1rem;text-underline-offset:3px}
.plans-page .reviewed-note{color:var(--muted-foreground);font-size:.875rem;margin-top:1rem}
.plans-page .action-status{min-height:26px;max-width:62rem;margin:1.5rem auto 0;color:var(--primary);font-size:1rem}
.plans-page .copy-fallback{max-width:62rem;margin:1rem auto 0;padding:1.5rem;border:1px solid var(--border);border-radius:.75rem;background:var(--card)}
.plans-page .copy-fallback label{display:block;font-weight:500;margin-bottom:1rem}
.plans-page .copy-fallback textarea{display:block;width:100%;resize:vertical;font-size:1rem;color:var(--foreground);background:var(--background);border:1px solid var(--border);border-radius:.375rem;padding:1rem;margin-bottom:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:767px){html{scroll-padding-top:130px}.plans-page .filter-row{flex-direction:column}.plans-page .filters{width:100%;display:grid;grid-template-columns:1fr 1fr}.plans-page .filters button{padding-inline:.75rem}.plans-page .guide-section{padding-top:2.5rem}.plans-page .checklist-actions{flex-direction:column}.plans-page .checklist-actions .btn{width:100%}.plans-page .copy-fallback{padding:1rem}}
@media(prefers-reduced-motion:reduce){.plans-page *,.plans-page *::before,.plans-page *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Interactive accents use the same Hosting palette and standard controls. */
.plans-page .filters{position:relative;isolation:isolate}
.plans-page .filters button{position:relative;z-index:1;transition:color .18s ease,border-color .18s ease}
.plans-page #filter-indicator{display:none;position:absolute;left:0;top:0;z-index:0;border-radius:.375rem;background:#2563eb;pointer-events:none;will-change:transform,width,height}
.plans-page .filters.has-indicator #filter-indicator{display:block}
.plans-page .filters.has-indicator button{background:transparent}
.plans-page .filters.has-indicator button[aria-pressed="true"]{border-color:transparent;color:var(--primary-foreground)}
.plans-page .filters button:not([aria-pressed="true"]):hover{border-color:var(--primary)}
.plans-page .comparison-tools{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding:1rem 0;border-top:1px solid var(--border)}
.plans-page .comparison-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}
.plans-page .comparison-actions .btn{gap:.65rem;padding:.65rem 1rem}
.plans-page .comparison-total{display:inline-grid;place-items:center;min-width:1.7rem;height:1.7rem;border-radius:50%;background:var(--border);font-size:.875rem;font-weight:600}
.plans-page .comparison-actions button:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}
.plans-page .is-current-guide{border-color:var(--primary)}
.plans-page .guide-state{font-size:.875rem}
.plans-page [data-guide][aria-pressed="true"]{outline:1px solid var(--primary);outline-offset:3px}
.plans-page .check-item{border-radius:.375rem;transition:background-color .2s ease}
.plans-page .check-item:hover{background:color-mix(in srgb,var(--primary) 4%,transparent)}
.plans-page .check-item.completed{background:color-mix(in srgb,var(--primary) 6%,transparent)}
.plans-page .checklist-complete{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;margin-top:1.25rem;border:1px solid color-mix(in srgb,var(--primary) 45%,var(--border));border-radius:.75rem;background:color-mix(in srgb,var(--primary) 6%,var(--card))}
.plans-page .completion-symbol{display:grid;place-items:center;flex-shrink:0;width:2rem;height:2rem;border-radius:50%;background:var(--primary);color:var(--primary-foreground);font-size:1.125rem;font-weight:600}
.plans-page .checklist-complete strong{font-size:1rem}
.plans-page .checklist-complete p{font-size:.875rem;color:var(--muted-foreground);margin-top:.35rem}
.plans-page [data-feedback="success"]{border-color:var(--primary);color:var(--primary)}
.plans-page .action-status.has-message{padding:.8rem 1rem;border-left:3px solid var(--primary);background:color-mix(in srgb,var(--primary) 5%,transparent);border-radius:0 .375rem .375rem 0}
@media(max-width:767px){.plans-page .comparison-tools{align-items:flex-start}.plans-page .comparison-actions{width:100%;justify-content:space-between}.plans-page #compare-jump{width:100%}.plans-page .checklist-complete{padding:1rem}}