/* Savings goal calculator: self-contained responsive result, chart and projection styles. */
.uk-mortgage-input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.uk-mortgage-input-grid .number-input-modern{max-width:none}.uk-mortgage-wide{grid-column:1/-1}.uk-mortgage-intro{color:var(--color-text-muted);line-height:1.5}.uk-mortgage-error{min-height:1.1rem;margin:.3rem 0 0;color:#b91c1c;font-size:.8rem;font-weight:700}.uk-mortgage-output{display:block;padding:.7rem 0;font-size:1.25rem;font-weight:800}.uk-mortgage-choice{display:grid;gap:.6rem}.uk-mortgage-choice label{display:flex;gap:.5rem;align-items:center}.uk-mortgage-calculator input:focus-visible,.uk-mortgage-calculator button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}.uk-mortgage-calculator input[aria-invalid="true"]{border-color:#b91c1c}.uk-mortgage-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}.uk-mortgage-sections section,.uk-mortgage-visual{padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}.uk-mortgage-sections h2,.uk-mortgage-visual h2{margin-top:0;font-size:1.1rem}.uk-mortgage-sections dl{display:grid;grid-template-columns:1fr auto;gap:.55rem 1rem;margin:0;font-variant-numeric:tabular-nums}.uk-mortgage-sections dt{color:var(--color-text-muted)}.uk-mortgage-sections dd{margin:0;font-weight:800;text-align:right}.uk-mortgage-warning{margin:1rem 0 0;padding:.8rem;border:2px solid #b45309;border-radius:var(--radius-sm);background:#fffbeb;color:#92400e;font-weight:800}.uk-mortgage-capital-due{font-size:1.1rem;font-weight:800}.uk-mortgage-bars{display:grid;gap:.5rem}.uk-mortgage-bars p{margin:0;padding:.6rem;border-left:5px solid var(--color-primary);background:var(--color-bg-card)}@media(max-width:640px){.uk-mortgage-input-grid,.uk-mortgage-sections{grid-template-columns:1fr}.uk-mortgage-wide{grid-column:auto}}
/* Result section styles for enhanced calculator sections */
.result-section-heading{font-size:1.15rem;font-weight:700;margin:1.5rem 0 1rem 0;color:var(--color-text-main);border-bottom:2px solid var(--color-primary-light);padding-bottom:0.5rem}
.result-note-text{color:var(--color-text-muted);font-size:0.9rem;line-height:1.5;margin:1rem 0 0 0;padding:0.75rem;background:var(--color-bg-subtle);border-left:3px solid var(--color-primary-light);border-radius:var(--radius-sm)}
.form-help-text{color:var(--color-text-muted);font-size:0.85rem;margin:0.25rem 0 0 0;line-height:1.4}
.finance-currency-note{margin:-.35rem 0 1.25rem;color:var(--color-text-muted);font-size:.9rem}.finance-status{min-height:1.25rem;margin:1rem 0 0;color:var(--color-text-muted);font-size:.85rem}.finance-chart-panel{padding:1.25rem}.finance-chart{display:block;width:100%;height:17rem;margin-top:1rem;color:var(--color-text-muted);overflow:visible}.finance-chart-legend{display:flex;flex-wrap:wrap;gap:1rem;color:var(--color-text-muted);font-size:.85rem}.finance-chart-legend span{display:inline-flex;align-items:center;gap:.4rem}.finance-chart-legend i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%}.finance-legend-contribution{background:#f59e0b}.finance-legend-interest{background:#38bdf8}.finance-chart-summary{margin:.75rem 0 0;color:var(--color-text-muted);font-size:.85rem;line-height:1.5}.finance-breakdown-panel{padding:1.25rem}.finance-breakdown-toggle{display:flex;justify-content:space-between;gap:1rem;align-items:center;min-height:44px;padding:.7rem 1rem;border:2px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-bg-card);color:var(--color-text-main);cursor:pointer;font-weight:800;list-style:none}.finance-breakdown-toggle::-webkit-details-marker{display:none}.finance-breakdown-toggle:hover{background:var(--color-primary-light);border-color:var(--color-primary-hover)}.finance-breakdown-toggle:focus-visible{outline:3px solid #2563eb;outline-offset:3px}.finance-breakdown-content{margin-top:1rem;overflow-x:auto}.finance-table-wrap table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.finance-table-wrap caption{margin-bottom:.75rem;color:var(--color-text-muted);text-align:left}.finance-table-wrap th,.finance-table-wrap td{padding:.7rem;border-bottom:1px solid var(--color-border);text-align:right;white-space:nowrap}.finance-table-wrap th:first-child,.finance-table-wrap td:first-child{text-align:left}.finance-table-wrap th{font-size:.78rem;text-transform:uppercase}@media(max-width:640px){.finance-chart-panel,.finance-breakdown-panel{padding:.85rem}.finance-chart{height:12rem}.finance-table-wrap table{min-width:38rem}}
.uk-cgt-input-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.uk-cgt-intro,.uk-cgt-help{margin:.35rem 0 0;color:var(--color-text-muted);font-size:.8125rem;line-height:1.45}.uk-cgt-intro{margin:0 0 1.25rem;font-size:.95rem}.uk-cgt-field-error{min-height:1.2rem;margin:.3rem 0 0;color:#b91c1c;font-size:.8125rem;font-weight:700}.uk-cgt-calculator input[aria-invalid="true"],.uk-cgt-calculator select[aria-invalid="true"]{border-color:#b91c1c}.uk-cgt-calculator input:focus-visible,.uk-cgt-calculator select:focus-visible,.uk-cgt-calculator button:focus-visible,.uk-cgt-breakdown-toggle:focus-visible{outline:3px solid #2563eb;outline-offset:2px}.uk-cgt-summary{margin-top:1rem}.uk-cgt-breakdown{display:none;margin-top:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}.uk-cgt-breakdown.is-visible{display:block}.uk-cgt-breakdown[hidden]{display:none}.uk-cgt-breakdown-details{display:block}.uk-cgt-breakdown-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:.7rem 1rem;border:2px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-bg-card);color:var(--color-primary-hover);font:inherit;font-weight:800;text-align:left;cursor:pointer;list-style:none;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast)}.uk-cgt-breakdown-toggle::-webkit-details-marker{display:none}.uk-cgt-breakdown-toggle:hover{border-color:var(--color-primary-hover);background:var(--color-primary-light)}.uk-cgt-breakdown-toggle-open{display:none}.uk-cgt-breakdown-details[open] .uk-cgt-breakdown-toggle-closed{display:none}.uk-cgt-breakdown-details[open] .uk-cgt-breakdown-toggle-open{display:inline}.uk-cgt-breakdown-toggle-icon{font-size:1.2rem;line-height:1;transition:transform var(--transition-fast)}.uk-cgt-breakdown-details[open] .uk-cgt-breakdown-toggle-icon{transform:rotate(180deg)}.uk-cgt-breakdown-content{display:grid;gap:.1rem;margin-top:.8rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.uk-cgt-breakdown-row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--color-border)}.uk-cgt-breakdown-row:last-child{border-bottom:0}.uk-cgt-disclaimer{margin-top:1rem}.uk-cgt-disclaimer a{color:var(--color-primary-hover);font-weight:700}:root[data-theme="dark"] .uk-cgt-breakdown-toggle{background:#172235;color:#fbbf24;border-color:var(--color-primary)}:root[data-theme="dark"] .uk-cgt-breakdown-toggle:hover{background:#243348;border-color:#fbbf24}@media(max-width:640px){.uk-cgt-input-grid{grid-template-columns:1fr}.uk-cgt-breakdown{padding:.8rem}.uk-cgt-breakdown-row{align-items:flex-start}.uk-cgt-breakdown-row strong{text-align:right}.uk-cgt-calculator .action-buttons-row{display:grid;grid-template-columns:1fr}.uk-cgt-calculator .action-buttons-row button{min-height:44px}}
.uk-iht-calculator input,.uk-iht-calculator select{box-sizing:border-box;width:100%;min-height:2.85rem;font:inherit}.uk-iht-calculator .input-prefix-wrapper,.uk-iht-calculator .input-suffix-wrapper{display:flex;align-items:stretch}.uk-iht-calculator .input-prefix-wrapper input{border-top-left-radius:0;border-bottom-left-radius:0}.uk-iht-calculator .input-suffix-wrapper input{border-top-right-radius:0;border-bottom-right-radius:0}.uk-iht-calculator .input-prefix,.uk-iht-calculator .input-suffix{display:flex;align-items:center;padding:0 .8rem;background:var(--color-bg-subtle);border:1px solid var(--color-border);color:var(--color-text-muted);font-weight:700}.uk-iht-calculator .input-prefix{border-right:0;border-radius:var(--radius-md) 0 0 var(--radius-md)}.uk-iht-calculator .input-suffix{border-left:0;border-radius:0 var(--radius-md) var(--radius-md) 0}.iht-field-error{min-height:1.15rem;margin:.35rem 0 0;color:#b91c1c;font-size:.8125rem;font-weight:700}.uk-iht-calculator input[aria-invalid="true"],.uk-iht-calculator select[aria-invalid="true"]{border-color:#b91c1c;box-shadow:0 0 0 3px rgb(185 28 28 / 12%)}.uk-iht-gifts{margin-top:2rem;padding:1.5rem 0 0;border-top:1px solid var(--color-border)}.uk-iht-gifts h3{margin:0 0 .35rem;font-size:1.1rem}.iht-gift-row{display:grid;grid-template-columns:minmax(9rem,1fr) minmax(9rem,1fr) minmax(13rem,1.4fr) auto;gap:1rem;align-items:end;margin:1rem 0;padding:1.1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}.iht-gift-row label{display:grid;gap:.4rem;font-weight:700;font-size:.875rem;line-height:1.35}.iht-gift-row input,.iht-gift-row select{width:100%;min-height:2.85rem}.iht-gift-row .btn-secondary{align-self:end;min-height:2.85rem;margin-bottom:1.5rem;white-space:nowrap}.uk-iht-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.5rem;margin-top:1.25rem}.uk-iht-breakdown-row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--color-border);font-variant-numeric:tabular-nums}.uk-iht-breakdown-row span{color:var(--color-text-muted)}.uk-iht-breakdown-row strong{text-align:right;color:var(--color-text)}.uk-iht-breakdown-row:nth-last-child(2),.uk-iht-breakdown-row:last-child{font-size:1.05rem;font-weight:700}.uk-iht-scenarios{border-top:3px solid var(--color-primary,#2563eb)}.uk-iht-scenarios .action-buttons-row{display:flex;flex-wrap:wrap;gap:.75rem}.uk-iht-scenarios button{min-height:2.85rem}.uk-iht-calculator input:focus-visible,.uk-iht-calculator select:focus-visible,.uk-iht-calculator button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}@media(max-width:640px){.uk-iht-input-grid{grid-template-columns:1fr;gap:1rem}.iht-gift-row{grid-template-columns:1fr;padding:.9rem}.iht-gift-row .btn-secondary{width:100%;margin-bottom:0}.uk-iht-result-grid{grid-template-columns:1fr}.uk-iht-scenarios .action-buttons-row{display:grid;grid-template-columns:1fr}.uk-iht-scenarios button{width:100%}}
.savings-goal-currency-field{max-width:16rem}.optional-label{font-size:.875em;font-weight:400}.savings-goal-actions{flex-wrap:wrap}.savings-exact-result{margin:.5rem 0 0;font-weight:600}.savings-assumptions,.savings-breakdown,.savings-projection{margin-top:1.5rem;padding:1rem;border:1px solid var(--border-color,#d1d5db);border-radius:.5rem}.savings-assumptions h3,.savings-breakdown h3{margin-top:0}.savings-chart{display:grid;gap:.75rem}.savings-chart-row{display:grid;grid-template-columns:minmax(10rem,1fr) minmax(8rem,2fr);align-items:center;gap:.75rem}.savings-chart-track{display:block;min-height:1rem;background:#e5e7eb;border-radius:999px;overflow:hidden}.savings-chart-bar{display:block;min-height:1rem;border-radius:999px}.savings-chart-bar.start{background:#5b21b6}.savings-chart-bar.contributions{background:#047857}.savings-chart-bar.interest{background:#0369a1}.savings-chart-bar.fees{background:#b45309}.savings-breakdown-table{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.25rem 1rem;margin-top:1rem}.savings-breakdown-table p{margin:0}.savings-projection h3{margin-top:0}.savings-projection-controls{margin:1rem 0}.savings-table-wrap{overflow-x:auto}.savings-table-wrap table{width:100%;border-collapse:collapse;white-space:nowrap}.savings-table-wrap th,.savings-table-wrap td{padding:.625rem;text-align:left;border-bottom:1px solid var(--border-color,#d1d5db)}.savings-table-wrap th{font-weight:700}.savings-goal-calculator input:focus-visible,.savings-goal-calculator select:focus-visible,.savings-goal-results button:focus-visible,.savings-projection input:focus-visible{outline:3px solid #2563eb;outline-offset:2px}@media(max-width:640px){.savings-goal-currency-field{max-width:none}.savings-goal-actions{display:grid;grid-template-columns:1fr}.savings-goal-actions button{min-height:44px}.savings-chart-row{grid-template-columns:1fr}.savings-breakdown-table{grid-template-columns:1fr}.savings-assumptions,.savings-breakdown,.savings-projection{padding:.75rem}}
/* Admin media library */
.roi-currency-field{max-width:20rem;margin-bottom:1.25rem}.roi-field-help,.roi-input-error{margin:.4rem 0 0;color:var(--color-text-muted);font-size:.8125rem;line-height:1.4}.roi-input-error{min-height:1.15rem;color:#b91c1c;font-weight:700}.roi-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roi-status-cell{grid-column:1/-1}.roi-status-cell .result-cell-val-modern{font-size:1rem}@media(max-width:640px){.roi-currency-field{max-width:none}.roi-result-grid{grid-template-columns:1fr}.roi-status-cell{grid-column:auto}}
.emergency-fund-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.emergency-fund-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-top:1rem}
.emergency-fund-breakdown{margin-top:1.25rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}
.emergency-fund-breakdown summary{cursor:pointer;color:var(--color-text-main);font-weight:800}
.emergency-fund-breakdown-content{margin-top:.75rem;color:var(--color-text-muted)}
.emergency-fund-breakdown-content p{margin:.5rem 0}
.emergency-fund-assumptions p:last-child{margin-bottom:0}
@media(max-width:640px){.emergency-fund-actions{align-items:stretch;flex-direction:column}.emergency-fund-actions .btn-secondary{width:100%}.emergency-fund-breakdown{padding:.85rem}.emergency-fund-breakdown-content{overflow-wrap:anywhere}}
.inflation-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.inflation-method-note{display:grid;gap:.4rem}.inflation-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}.inflation-result-definition{margin:.4rem 0 0;color:var(--color-text-muted);font-size:.75rem;line-height:1.35}.inflation-output-details{margin-top:1rem;padding:1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-subtle)}.inflation-output-details summary{cursor:pointer;color:var(--color-text-main);font-weight:800}.inflation-chart{height:15rem;margin-top:1rem;color:var(--color-primary-hover)}.inflation-chart svg{display:block;width:100%;height:12rem}.inflation-chart-caption{margin-top:.5rem;color:var(--color-text-muted);font-size:.8125rem}.inflation-table-wrap{margin-top:1rem;overflow-x:auto}.inflation-table-wrap table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.inflation-table-wrap caption{padding-bottom:.75rem;color:var(--color-text-muted);font-size:.8125rem;text-align:left}.inflation-table-wrap th,.inflation-table-wrap td{padding:.7rem;text-align:left;border-bottom:1px solid var(--color-border)}.inflation-table-wrap th{color:var(--color-text-main);font-size:.75rem;text-transform:uppercase}.inflation-table-wrap td:not(:first-child),.inflation-table-wrap th:not(:first-child){text-align:right}@media(max-width:640px){.inflation-actions{align-items:stretch;flex-direction:column}.inflation-actions .btn-secondary{width:100%}.inflation-output-details{padding:.85rem}.inflation-chart{height:11rem}.inflation-chart svg{height:8rem}.inflation-table-wrap table{min-width:32rem}}
.media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1rem; margin-top:1rem; }
.media-card { display:flex; flex-direction:column; gap:.45rem; }
.media-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:.5rem; background:#eef2f6; }
.media-card small { color:#667085; overflow-wrap:anywhere; }

/* Missing-page experience */
.not-found-shell{display:grid;place-items:center;min-height:calc(100vh - 18rem);padding:clamp(3rem,10vw,7rem) 1rem}
.not-found-card{width:min(100%,48rem);padding:clamp(2rem,6vw,4.5rem) clamp(1.5rem,6vw,4rem);border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);background:var(--color-bg-card);box-shadow:var(--shadow-sm);text-align:center}
.not-found-code{margin-bottom:.25rem;color:var(--color-primary);font-size:clamp(4rem,15vw,8rem);font-weight:800;letter-spacing:-.08em;line-height:.9}
.not-found-card .eyebrow{display:block;margin-top:1.25rem}
.not-found-card h1{margin:.35rem 0 .9rem;font-size:clamp(2rem,5vw,3.25rem);letter-spacing:-.05em}
.not-found-message{max-width:34rem;margin:0 auto;color:var(--color-text-muted);font-size:1.05rem}
.not-found-url{max-width:100%;margin:1.25rem auto 0;overflow:hidden;color:var(--color-text-muted);text-overflow:ellipsis;white-space:nowrap}
.not-found-url code{padding:.3rem .55rem;border-radius:var(--radius-sm);background:var(--color-bg-subtle);font-size:.82rem}
.not-found-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.not-found-actions a{text-decoration:none}
@media(max-width:480px){.not-found-actions{align-items:stretch;flex-direction:column}.not-found-actions a{justify-content:center}}

/* ISA calculator projection */
.isa-projection-table-wrap{overflow-x:auto;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card)}
.isa-projection-table{width:100%;min-width:620px;border-collapse:collapse;font-variant-numeric:tabular-nums}
.isa-projection-table th,.isa-projection-table td{padding:.85rem 1rem;border-bottom:1px solid var(--color-border);text-align:left;white-space:nowrap}
.isa-projection-table th{background:var(--color-bg-subtle);color:var(--color-text-main);font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.isa-projection-table tbody tr:nth-child(even){background:color-mix(in srgb,var(--color-bg-subtle) 55%,transparent)}
.isa-projection-table tbody tr:last-child td{border-bottom:0}
.isa-projection-table .isa-projection-money{text-align:right}
.isa-projection-table th:not(:first-child){text-align:right}
@media (max-width:640px){.isa-projection-table{min-width:0}.isa-projection-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.isa-projection-table,.isa-projection-table tbody,.isa-projection-table tr,.isa-projection-table td{display:block;width:100%}.isa-projection-table tr{padding:.7rem 1rem;border-bottom:1px solid var(--color-border)}.isa-projection-table tbody tr:last-child{border-bottom:0}.isa-projection-table td{display:flex;justify-content:space-between;gap:1rem;padding:.42rem 0;border:0;text-align:right!important;white-space:normal}.isa-projection-table td::before{content:attr(data-label);color:var(--color-text-muted);font-size:.8rem;font-weight:700;text-align:left}.isa-projection-table td:first-child{font-size:1rem;font-weight:800}.isa-projection-table td[colspan]{display:block;text-align:left!important}.isa-projection-table td[colspan]::before{content:none}}
/* Blog and administration */
.container {
  width: min(100% - 2rem, var(--max-width-content));
  margin-inline: auto;
}

.blog-shell,.admin-shell{padding-top:3rem;padding-bottom:5rem}
.blog-heading{max-width:760px;margin:0 auto 2.5rem}
.blog-index-layout,.blog-post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;align-items:start}
.blog-index-main,.blog-post-main{min-width:0}
.blog-sidebar{display:grid;gap:1.25rem;align-content:start;position:sticky;top:6rem}
.blog-sidebar-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg-card);padding:1.25rem;box-shadow:var(--shadow-sm)}
.blog-sidebar-card h2{font-size:1.5rem;margin:.2rem 0 .5rem}
.blog-sidebar-intro{color:var(--color-text-muted);font-size:.95rem;margin-bottom:1rem}
.blog-tool-list{display:grid;gap:.35rem}
.blog-tool-link{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.7rem .5rem;border-top:1px solid var(--color-border);color:var(--color-text-main);text-decoration:none;transition:background-color var(--transition-fast),color var(--transition-fast)}
.blog-tool-link:hover{background:var(--color-primary-light);color:var(--color-primary-hover)}
.blog-tool-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:var(--radius-sm);background:var(--color-primary-light);font-size:1.05rem}
.blog-tool-copy{display:grid;gap:.1rem;min-width:0}
.blog-tool-copy strong{font-size:.86rem;line-height:1.25}
.blog-tool-copy span{display:-webkit-box;overflow:hidden;color:var(--color-text-muted);font-size:.72rem;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.blog-tool-arrow{color:var(--color-primary-hover);font-weight:800}
.blog-sidebar-cta{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding:.75rem 0 0;border-top:1px solid var(--color-border);color:var(--color-primary-hover);font-size:.9rem;font-weight:800;text-decoration:none}
.blog-ad-box{margin-inline:auto}
.blog-ad-box-secondary{margin-top:.25rem}
.blog-section-heading{display:flex;justify-content:space-between;align-items:end;gap:1rem;margin:2rem 0 1rem}
.blog-section-heading h2{margin:.15rem 0 0}
.blog-section-heading .eyebrow{margin:0}
.blog-section-note{color:var(--color-text-muted);font-size:.85rem;text-align:right}
.blog-featured-section{padding:1.5rem;border:1px solid var(--color-primary-border);border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--color-primary-light),var(--color-bg-card) 65%);}
.blog-featured-section .blog-grid{margin-bottom:0}
.blog-featured-section + .blog-categories{margin-top:2rem}
.blog-latest-section{margin-top:2rem}
.blog-related-section{margin-top:3rem;padding-top:1rem;border-top:1px solid var(--color-border)}
.blog-heading h1,.admin-header h1{font-size:clamp(2rem,5vw,3.5rem);letter-spacing:-.04em;margin:.25rem 0 1rem}
.blog-heading>p:last-child{color:var(--color-text-muted);font-size:1.1rem}
.eyebrow{color:var(--color-primary-hover);font-weight:800;letter-spacing:.12em;font-size:.75rem}
.blog-shell h2{font-size:clamp(1.35rem,2vw,1.75rem);margin:2rem 0 1rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin:1rem 0 2.5rem}
.blog-card,.admin-panel{border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.blog-card{display:flex;flex-direction:column;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}
.blog-card:hover{transform:translateY(-2px);border-color:var(--color-primary-border);box-shadow:var(--shadow-card-hover)}
.blog-card img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--color-bg-subtle)}
.blog-card-body{display:flex;flex:1;flex-direction:column;padding:1.25rem}
.blog-card h3{font-size:1.15rem;line-height:1.35;margin:.35rem 0 .6rem}
.blog-card h3 a{color:var(--color-text-main);text-decoration:none}
.blog-card h3 a:hover,.blog-read-link:hover{color:var(--color-primary-hover)}
.blog-card-body>p:not(.blog-card-date){color:var(--color-text-muted);margin-bottom:1rem}
.blog-card-date,.article-byline{font-size:.85rem;color:var(--color-text-muted)}
.blog-read-link{margin-top:auto;color:var(--color-primary-hover);font-weight:700;text-decoration:none}
.blog-categories,.blog-pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 2rem}
.blog-categories a,.blog-pagination a{padding:.5rem .8rem;border:1px solid var(--color-border);border-radius:999px;color:var(--color-text-main);text-decoration:none;background:var(--color-bg-card)}
.blog-categories a:hover,.blog-pagination a:hover{border-color:var(--color-primary);background:var(--color-primary-light)}
.blog-categories a.active{border-color:var(--color-primary);background:var(--color-primary);color:#fff}
.breadcrumbs{display:flex;gap:.5rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-bottom:2rem;color:var(--color-text-muted)}
.breadcrumbs a{color:var(--color-primary-hover)}
.article-image{display:block;width:100%;border-radius:var(--radius-md);max-height:520px;object-fit:cover;margin:0 auto 2rem}
.blog-post-main .blog-heading{max-width:none;margin:0 0 2rem}
.blog-admin-edit{margin-top:.5rem}
.blog-post-main .article-image{max-height:520px}
.article-content{max-width:760px;margin:2rem auto;font-size:1.1rem;line-height:1.75}
.article-content h2,.article-content h3{margin-top:2rem;color:var(--color-text-main)}
.article-content p,.article-content ul,.article-content ol{margin-bottom:1rem}
.article-content a{color:var(--color-primary-hover)}
.article-content img{max-width:100%;height:auto;border-radius:var(--radius-sm)}
.article-tags{color:var(--color-text-muted)}
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem}
.admin-header>div:last-child{display:flex;gap:.5rem;align-items:center}.admin-header form,.admin-table-wrap form{display:inline}
.admin-panel{padding:1.5rem}.admin-shell label{display:block;font-weight:700;margin-bottom:1rem}
.admin-shell input,.admin-shell textarea,.admin-shell select{display:block;width:100%;margin-top:.35rem;padding:.7rem;border:1px solid var(--color-border);border-radius:7px;background:var(--color-bg-card);color:var(--color-text-main);font:inherit}
.admin-editor input,.admin-editor textarea,.admin-editor select{border:2px solid var(--color-primary-border);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.admin-editor input:hover,.admin-editor textarea:hover,.admin-editor select:hover{border-color:var(--color-primary)}
.admin-editor input:focus,.admin-editor textarea:focus,.admin-editor select:focus{outline:none;border-color:var(--color-primary-hover);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.admin-editor{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1.25rem}.admin-editor aside{display:grid;align-content:start;gap:1.25rem}
.check-label{display:flex!important;gap:.5rem;align-items:center}.check-label input{width:auto}.admin-table-wrap{padding:0;overflow:auto}
.admin-table-wrap table{width:100%;border-collapse:collapse}.admin-table-wrap th,.admin-table-wrap td{padding:1rem;text-align:left;border-bottom:1px solid var(--color-border)}
.admin-table-wrap small{display:block;color:var(--color-text-muted);margin-top:.25rem}.admin-table-actions{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;min-width:max-content}.admin-table-actions .btn{min-height:2.25rem;padding:.45rem .7rem;font-size:.85rem}.admin-delete-button{border:1px solid #b91c1c;background:#b91c1c;color:#fff;cursor:pointer}.admin-delete-button:hover{border-color:#991b1b;background:#991b1b}
.validation-message{color:#b91c1c}.status-message{padding:.8rem;background:#dcfce7;color:#166534;border-radius:8px}
.admin-login-shell{display:grid;place-items:start center;min-height:calc(100vh - 12rem);padding-top:clamp(2rem,8vh,5rem)}
.admin-login-card{width:min(100%,28rem);padding:clamp(1.5rem,5vw,2.25rem);border:1px solid var(--color-primary-border);box-shadow:0 12px 30px rgba(120,53,15,.08)}
.admin-login-heading{text-align:center;margin-bottom:1.75rem}.admin-login-heading .eyebrow{display:block;margin-bottom:.5rem}.admin-login-heading h1{font-size:clamp(1.75rem,4vw,2.25rem);letter-spacing:-.03em;margin:0 0 .5rem}.admin-login-heading p{color:var(--color-text-muted);margin:0}
.admin-login-fields{display:grid;gap:1rem}.admin-login-fields label{margin:0;font-size:.9rem}.admin-login-fields input{width:100%;min-height:3rem;margin-top:.45rem;padding:.75rem .85rem;border:2px solid var(--color-primary-border);border-radius:var(--radius-sm);background:var(--color-bg-card);box-shadow:inset 0 1px 2px rgba(15,23,42,.04);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.admin-login-fields input:hover{border-color:var(--color-primary)}.admin-login-fields input:focus{outline:none;border-color:var(--color-primary-hover);box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.admin-login-submit{width:100%;justify-content:center;margin-top:1.5rem;min-height:3rem}.admin-login-error{padding:.75rem 1rem;margin:0 0 1.25rem;border:1px solid #fecaca;border-radius:var(--radius-sm);background:#fef2f2}
.admin-login-divider{display:flex;align-items:center;gap:.75rem;width:min(100%,28rem);margin:1.25rem auto 0;color:var(--color-text-muted);font-size:.8rem;font-weight:700;text-transform:uppercase}.admin-login-divider::before,.admin-login-divider::after{flex:1;height:1px;background:var(--color-border);content:""}.admin-login-google-form{width:min(100%,28rem)}.admin-login-google-form .admin-login-submit{margin-top:1.25rem}
[data-theme="dark"] .admin-login-card{box-shadow:0 12px 30px rgba(0,0,0,.25)}
[data-theme="dark"] .admin-login-fields input{box-shadow:inset 0 1px 2px rgba(0,0,0,.2)}
.admin-dashboard-header{margin-bottom:2.25rem}.admin-dashboard-header .eyebrow{margin:0 0 .4rem}.admin-dashboard-header p:last-child{max-width:38rem;margin:0;color:var(--color-text-muted);font-size:1.05rem}.admin-dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;max-width:900px}.admin-dashboard-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.5rem;transition:transform var(--transition-fast),box-shadow var(--transition-fast),border-color var(--transition-fast)}.admin-dashboard-card:hover{transform:translateY(-2px);border-color:var(--color-primary-border);box-shadow:var(--shadow-card-hover)}.admin-dashboard-card h2{margin:.15rem 0 .6rem;font-size:1.35rem}.admin-dashboard-card p:not(.eyebrow){margin:0;color:var(--color-text-muted);line-height:1.55}.admin-dashboard-card .btn{grid-column:2;justify-self:start;margin-top:.25rem}.admin-dashboard-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:var(--radius-sm);background:var(--color-primary-light);color:var(--color-primary-hover);font-size:1.4rem;font-weight:800}
.admin-user-menu{display:inline-flex;align-items:center;gap:.5rem;min-width:0;padding-left:.75rem;border-left:1px solid var(--color-border)}.admin-user-avatar{display:grid;flex:0 0 auto;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--color-primary-light);color:var(--color-primary-hover);font-size:.8rem;font-weight:800;object-fit:cover}.admin-user-name{max-width:10rem;overflow:hidden;font-size:.82rem;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.admin-user-menu form{display:inline}.admin-user-signout{padding:0;border:0;background:transparent;color:var(--color-primary-hover);font:inherit;font-size:.8rem;font-weight:700;cursor:pointer}.admin-user-signout:hover{text-decoration:underline}.admin-user-signout:focus-visible{outline:3px solid #2563eb;outline-offset:3px;border-radius:var(--radius-sm)}
@media(max-width:1000px){.blog-index-layout,.blog-post-layout{grid-template-columns:minmax(0,1fr) 300px;gap:1.5rem}}
@media(max-width:760px){.blog-grid,.admin-dashboard-grid{grid-template-columns:1fr}.blog-index-layout,.blog-post-layout{grid-template-columns:1fr}.blog-sidebar{position:static}.blog-section-heading{align-items:flex-start;flex-direction:column}.blog-section-note{text-align:left}.blog-featured-section{padding:1rem}.admin-editor{grid-template-columns:1fr}.admin-header{align-items:flex-start;flex-direction:column}.admin-table-actions{min-width:0}.admin-user-menu{padding-left:0;border-left:0}.admin-user-name{max-width:7rem}}
/* ==========================================================================
   1. COLOR PALETTE & CSS VARIABLES
   ========================================================================== */
:root {
  /* Brand Palette (Warm Gold / Amber Accent) */
  --color-primary: #f59e0b;
  --color-primary-hover: #d97706;
  --color-primary-light: #fffbe0;
  --color-primary-border: #fde68a;
  
  /* Neutral Palette */
  --color-bg-page: #fffbeb;
  --color-bg-card: #ffffff;
  --color-bg-calculator-panel: #f8fafc;
  --color-bg-subtle: #f8fafc;
  --color-border: #f1f5f9;
  --color-border-hover: #fde68a;
  --color-text-main: #1e293b;
  --color-text-muted: #64748b;
  --color-text-light: #94a3b8;
  
  /* Badge Status Colors */
  --badge-new-bg: #f3e8ff;
  --badge-new-text: #7c3aed;
  --badge-popular-bg: #fef3c7;
  --badge-popular-text: #b45309;
  --badge-updated-bg: #dcfce7;
  --badge-updated-text: #15803d;
  
  /* Breakdown Bar Colors */
  --color-takehome: #10b981;
  --color-tax: #ef4444;
  --color-ni: #f59e0b;
  --color-pension: #8b5cf6;
  --color-student-loan: #0ea5e9;
  --color-takehome-surface: #f0fdf4;
  --color-takehome-border: #bbf7d0;
  --color-takehome-label: #166534;
  --color-takehome-value: #15803d;
  
  /* Layout & Shadows */
  --max-width-content: 1440px;
  --sidebar-width: 400px;
  --tool-control-max-width: 28rem;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 10px 25px -5px rgba(245, 158, 11, 0.12), 0 0 0 2px #fde68a;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* User-selected low-light palette. Keeping these as tokens lets the existing
   calculator and content components inherit the theme without page changes. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-page: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-calculator-panel: #1e293b;
  --color-bg-subtle: #273449;
  --color-border: #334155;
  --color-border-hover: #b7791f;
  --color-primary-light: #422006;
  --color-primary-border: #92400e;
  --color-text-main: #f1f5f9;
  --color-text-muted: #cbd5e1;
  --color-text-light: #94a3b8;
  --color-takehome-surface: #123d2c;
  --color-takehome-border: #166534;
  --color-takehome-label: #bbf7d0;
  --color-takehome-value: #86efac;
  --badge-new-bg: #3b2463;
  --badge-new-text: #d8b4fe;
  --badge-popular-bg: #4a3108;
  --badge-popular-text: #fcd34d;
  --badge-updated-bg: #123d2c;
  --badge-updated-text: #86efac;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--color-bg-page);
  color: var(--color-text-main);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.numeric-display {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Keep calculator results visually separate from their input card. */
.tool-results-gap {
  margin-top: 2rem;
}

/* Developer tools reuse the approved panels and form controls while allowing
   source editors and previews to use the available column width. */
.developer-tool-body { display: grid; gap: 1rem; }
.developer-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.developer-textarea { width: 100%; min-height: 10rem; resize: vertical; }
.developer-output { background: var(--color-bg-page); }
.developer-actions, .action-buttons-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; }
.developer-regex-row { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; gap: 1rem; }
.developer-colour-preview, .developer-preview { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 1rem; min-height: 5rem; background: var(--color-bg-page); overflow: auto; }
.developer-warning, .developer-privacy, .developer-status { border-radius: var(--radius-sm); padding: .75rem 1rem; font-size: .9rem; }
.developer-warning { background: var(--color-primary-light); border: 1px solid var(--color-primary-border); }
.developer-privacy { color: var(--color-text-muted); background: var(--color-bg-page); }
.developer-status { border: 1px solid var(--badge-updated-bg); color: var(--badge-updated-text); background: var(--badge-updated-bg); }
.developer-status.is-error { border-color: #fecaca; color: #b91c1c; background: #fef2f2; }
.developer-mono, .code-textarea { font-family: "JetBrains Mono", Consolas, monospace; }
@media (max-width: 720px) { .developer-editor-grid, .developer-regex-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   2. ADVERTISEMENT STRIPS & PLACEMENTS
   ========================================================================== */
.top-ad-strip {
  background-color: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 0;
  text-align: center;
}

.top-ad-container {
  max-width: 728px;
  height: 90px;
  margin: 0 auto;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  position: relative;
  overflow: hidden;
}

.adsterra-unit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.adsterra-unit--mobile {
  display: none;
}

.adsterra-unit script,
.adsterra-unit iframe {
  border: 0;
}

.ad-consent-fallback {
  width: 100%;
  height: 100%;
  padding: 1rem 1.5rem;
  color: var(--color-text-main);
  text-decoration: none;
  text-align: left;
  background: linear-gradient(135deg, var(--color-bg-card), var(--color-primary-light));
  border-radius: inherit;
}

.ad-consent-fallback:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
}

.ad-consent-fallback:hover {
  color: var(--color-text-main);
  background: linear-gradient(135deg, var(--color-bg-card), #fde68a);
}

.ad-consent-fallback:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: -3px;
}

.ad-consent-fallback__eyebrow {
  color: var(--color-text-muted);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ad-consent-fallback__title {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
}

.ad-consent-fallback__copy {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.ad-consent-fallback__action {
  margin-top: 0.15rem;
  color: var(--color-primary-hover);
  font-size: 0.75rem;
  font-weight: 800;
}

.ad-consent-fallback--top {
  align-items: center;
  padding: 0.75rem 1.5rem;
  text-align: center;
}

.ad-consent-fallback--top .ad-consent-fallback__title {
  font-size: 1.05rem;
}

.ad-consent-fallback-active .adsterra-unit {
  display: none;
}

.top-ad-container::before {
  content: 'Advertisement';
  position: absolute;
  top: 0.375rem;
  right: 0.625rem;
  font-size: 0.5625rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.top-ad-container span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.25rem 0.625rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

.sidebar-ad-box {
  width: 300px;
  height: 250px;
  margin: 0;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.sidebar-ad-box::before {
  content: 'Advertisement';
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-ad-box span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: rgba(255, 255, 255, 0.8);
  padding: 0.375rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .top-ad-container {
    width: 320px;
    max-width: 100%;
    height: 50px;
  }

  .adsterra-unit--desktop {
    display: none;
  }

  .adsterra-unit--mobile {
    display: flex;
  }

  .ad-consent-fallback--top {
    padding: 0.35rem 1rem;
    gap: 0.1rem;
  }

  .ad-consent-fallback--top .ad-consent-fallback__eyebrow,
  .ad-consent-fallback--top .ad-consent-fallback__action {
    display: none;
  }

  .ad-consent-fallback--top .ad-consent-fallback__title {
    font-size: 0.75rem;
  }
}

/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  background-color: var(--color-bg-card);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.header-container > * {
  min-width: 0;
}

.site-logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.header-search {
  position: relative;
  flex: 1;
  max-width: 480px;
}

.header-search input {
  width: 100%;
  padding: 0.55rem 0.875rem 0.55rem 2.25rem;
  font-size: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background-color: #f8fafc;
  outline: none;
  transition: all var(--transition-fast);
}

.header-search input:focus {
  border-color: var(--color-primary-border);
  background-color: var(--color-bg-card);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.search-icon {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-light);
  pointer-events: none;
}

.search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.search-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.search-result {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--color-text-main);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.search-result:last-child { border-bottom: 0; }
.search-result:hover, .search-result:focus { background: var(--color-primary-light); outline: none; }
.search-result-icon { width: 1.5rem; font-size: 1.25rem; text-align: center; }
.search-result strong, .search-result small { display: block; }
.search-result strong { font-size: 0.8125rem; }
.search-result > span:last-child { min-width: 0; flex: 1; }
.search-result small { margin-top: 0.15rem; color: var(--color-text-muted); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-empty { padding: 0.9rem 1rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.search-summary { margin-top: 0.75rem; color: var(--color-text-muted); font-size: 0.875rem; }
.search-summary a { color: var(--color-primary-hover); font-weight: 600; }

.header-nav {
  display: flex;
  gap: 1.25rem;
}

.nav-link {
  text-decoration: none;
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   4. LAYOUT & CONTAINER STRUCTURES
   ========================================================================== */
.site-wrapper,
.full-width-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  padding: 1.5rem;
}

.full-width-container {
  padding: 0;
  width: 100%;
}

.breadcrumb-trail {
  margin-bottom: 1rem;
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

.breadcrumb-list a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.breadcrumb-list a:hover {
  color: var(--color-primary-hover);
}

.breadcrumb-separator {
  margin: 0 0.5rem;
  color: var(--color-text-light);
}

.tool-header {
  margin-bottom: 1.75rem;
}

.tool-badge {
  display: inline-block;
  background-color: var(--badge-updated-bg);
  color: var(--badge-updated-text);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  margin-bottom: 0.5rem;
}

.tool-category-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  margin-bottom: 0.625rem;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background-color: #f1f5f9;
  border: 1px solid var(--color-border);
  transition: all var(--transition-fast);
}

.tool-category-link:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-hover);
}

.tool-title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}

.tool-description {
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 900px;
}

.tool-header.text-center .tool-description {
  margin: 0 auto;
}

/* About page */
.about-page{padding-top:2rem;padding-bottom:4rem}
.about-hero{max-width:52rem;margin-bottom:2.5rem}
.about-eyebrow{display:block;margin-bottom:.65rem;color:var(--color-primary-hover);font-size:.75rem;font-weight:800;letter-spacing:.12em}
.about-hero .tool-title{max-width:42rem;font-size:clamp(2.4rem,5vw,4rem);line-height:1.08}
.about-hero .tool-description{max-width:42rem;font-size:1.1rem;line-height:1.65}
.about-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;padding:clamp(1.5rem,4vw,2.5rem);border-color:var(--color-primary-border);background:linear-gradient(135deg,var(--color-primary-light),var(--color-bg-card) 70%)}
.about-intro h2,.about-cta h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.025em}
.about-intro p,.about-cta p{max-width:44rem;margin-top:.7rem;color:var(--color-text-muted);line-height:1.65}
.about-intro-cta,.about-cta-actions .btn-primary{display:inline-flex;align-items:center;gap:.5rem;justify-content:center;white-space:nowrap;text-decoration:none}
.about-section{margin-top:4rem}
.about-section-heading{max-width:42rem;margin-bottom:1.5rem}
.about-section-heading h2{font-size:clamp(1.65rem,3vw,2.25rem);letter-spacing:-.03em}
.about-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.about-feature-card{padding:1.5rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-card);box-shadow:var(--shadow-sm)}
.about-feature-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:1rem;border-radius:var(--radius-sm);background:var(--color-primary-light);color:var(--color-primary-hover);font-size:1.25rem;font-weight:800}
.about-feature-card h3{font-size:1.1rem}.about-feature-card p{margin-top:.55rem;color:var(--color-text-muted);font-size:.925rem;line-height:1.6}
.about-principle-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.about-principle-list article{padding:1.25rem 0;border-top:2px solid var(--color-primary-border)}
.about-principle-list h3{display:flex;gap:.65rem;align-items:center;font-size:1rem}.about-principle-list h3 span{color:var(--color-primary-hover);font-size:.8rem;letter-spacing:.06em}
.about-principle-list p{margin-top:.7rem;color:var(--color-text-muted);font-size:.925rem;line-height:1.6}.about-principle-list a{color:var(--color-primary-hover);font-weight:700}
.about-cta{display:flex;justify-content:space-between;gap:2rem;align-items:center;margin-top:4rem;padding:clamp(1.5rem,4vw,2.5rem);background:var(--color-bg-card)}
.about-cta-actions{display:flex;align-items:center;gap:1rem;flex-shrink:0}.about-secondary-link{color:var(--color-primary-hover);font-weight:700;text-decoration:none}.about-secondary-link:hover{text-decoration:underline}
@media(max-width:760px){.about-feature-grid,.about-principle-list{grid-template-columns:1fr}.about-intro,.about-cta{grid-template-columns:1fr;display:grid;align-items:start}.about-intro-cta{justify-self:start}.about-cta-actions{flex-wrap:wrap}.about-section{margin-top:3rem}}
@media(max-width:480px){.about-page{padding-top:1.5rem}.about-cta-actions{display:grid;width:100%}.about-cta-actions .btn-primary{width:100%}}

/* Page Layout Grid */
.page-layout-grid {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  gap: 2rem;
  align-items: start;
}

.main-content-column {
  min-width: 0;
}

.sidebar-column {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.tool-actions-card { padding-bottom: 1rem; }
.tool-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
  padding: 0 1rem;
}
.tool-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 2.65rem;
  padding: .55rem .65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-main);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.tool-action-button:hover, .tool-action-button:focus-visible {
  background: var(--color-primary-light);
  border-color: var(--color-primary-border);
  color: var(--color-primary-hover);
}
.tool-action-button span { font-size: 1rem; line-height: 1; }
.tool-action-status {
  min-height: 1.25rem;
  margin: .65rem 1rem 0;
  color: var(--color-text-muted);
  font-size: .75rem;
  text-align: center;
}

.card-panel {
  background-color: var(--color-bg-calculator-panel);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.margin-top-lg {
  margin-top: 1.75rem;
}

.action-buttons-column {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Separates the calorie calculator's trust statement from its breakdown. */
.calorie-calculator-trust {
  margin-top: 2rem;
}

/* Separates the body-fat calculator's trust statement from its results. */
.body-fat-calculator-trust {
  margin-top: 2rem;
}

/* Header control */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: var(--color-bg-card);
  color: var(--color-text-main);
  font-size: 0.8125rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.theme-toggle:hover { border-color: var(--color-primary-border); color: var(--color-primary); }
.theme-toggle:focus-visible { outline: 3px solid rgba(245, 158, 11, 0.35); outline-offset: 2px; }
.theme-toggle-icon { font-size: 1rem; line-height: 1; }

/* A few legacy controls still use literal light colours. */
:root[data-theme="dark"] .top-ad-strip,
:root[data-theme="dark"] .top-ad-container,
:root[data-theme="dark"] .sidebar-ad-box { background: #172235; border-color: var(--color-border); }
:root[data-theme="dark"] .top-ad-container span,
:root[data-theme="dark"] .sidebar-ad-box span,
:root[data-theme="dark"] .header-search input,
:root[data-theme="dark"] .tool-category-link,
:root[data-theme="dark"] .segmented-control,
:root[data-theme="dark"] .accordion-summary,
:root[data-theme="dark"] .accordion-body,
:root[data-theme="dark"] .calculator-input,
:root[data-theme="dark"] .select-input,
:root[data-theme="dark"] .input-suffix-wrapper input,
:root[data-theme="dark"] .select-input-modern,
:root[data-theme="dark"] .number-input-modern { background-color: #172235; color: var(--color-text-main); }
:root[data-theme="dark"] .accordion-summary:hover,
:root[data-theme="dark"] .input-suffix-wrapper input:hover,
:root[data-theme="dark"] .select-input-modern:hover { background-color: #243348; }
:root[data-theme="dark"] .input-suffix { background: #334155; }
:root[data-theme="dark"] .range-slider { background: #475569; }

/* Keep controls and selected states readable when their light-mode surfaces
   are intentionally white. */
:root[data-theme="dark"] .calculator-input,
:root[data-theme="dark"] .select-input,
:root[data-theme="dark"] .number-input-modern,
:root[data-theme="dark"] .select-input-modern,
:root[data-theme="dark"] .input-suffix-wrapper input {
  background-color: #172235;
  color: var(--color-text-main);
  border-color: var(--color-primary);
}

:root[data-theme="dark"] .calculator-input::placeholder,
:root[data-theme="dark"] .select-input::placeholder,
:root[data-theme="dark"] .number-input-modern::placeholder {
  color: var(--color-text-light);
}

:root[data-theme="dark"] .segmented-control input[type="radio"]:checked + label,
:root[data-theme="dark"] .segmented-control-modern input[type="radio"]:checked + label,
:root[data-theme="dark"] .due-date-method-control .unit-btn.active {
  background-color: #334155;
  color: var(--color-text-main);
}

:root[data-theme="dark"] .segmented-control,
:root[data-theme="dark"] .segmented-control-modern {
  background: #172235;
}

:root[data-theme="dark"] .accordion-body,
:root[data-theme="dark"] .accordion-modern .accordion-body,
:root[data-theme="dark"] .code-textarea {
  background-color: #172235;
  color: var(--color-text-main);
  border-color: var(--color-primary);
}

:root[data-theme="dark"] .category-read-more {
  background-color: #172235;
  border-color: var(--color-border);
}

:root[data-theme="dark"] .category-read-more-body {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .developer-editor-field .code-textarea {
  background: #172235;
  box-shadow: none;
}

:root[data-theme="dark"] .developer-editor-field .code-textarea:focus {
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

:root[data-theme="dark"] .line-numbers-gutter {
  background: linear-gradient(180deg, #1e293b 0%, #172235 100%);
  border-right-color: var(--color-border);
  color: #64748b;
}

@media (max-width: 720px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { padding: 0.55rem 0.65rem; }
}

/* ==========================================================================
   5. TOOL TILE GRID & CARD ACCENTS
   ========================================================================== */

.how-to-steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.step-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  min-height: 120px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.step-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.step-content h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.step-content p {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* Status Badges */
.badge-new {
  background-color: var(--badge-new-bg);
  color: var(--badge-new-text);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.badge-popular {
  background-color: var(--badge-popular-bg);
  color: var(--badge-popular-text);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.badge-updated {
  background-color: var(--badge-updated-bg);
  color: var(--badge-updated-text);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

/* ==========================================================================
   6. CALCULATOR INPUT FORMS
   ========================================================================== */
.form-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}

.inputs-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* Sequential calculator inputs, such as tax and pay forms. */
.inputs-form-grid--stacked {
  grid-template-columns: 1fr;
  gap: 1.25rem;
  max-width: 42rem;
}

.inputs-form-grid--stacked > .full-width-row {
  grid-column: auto;
}

/* Maths calculators use a readable single-column control stack. */
.maths-input-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  max-width: var(--tool-control-max-width);
}

.maths-input-stack > .form-group-modern {
  width: 100%;
  max-width: var(--tool-control-max-width);
  margin: 0;
}

/* Keep maths controls readable even when their parent spans the content column. */
.card-panel .number-input-modern,
.card-panel .select-input-modern {
  max-width: var(--tool-control-max-width);
}

.card-panel textarea.number-input-modern,
.card-panel input[type="text"].number-input-modern,
.card-panel input[type="date"].number-input-modern {
  max-width: var(--tool-control-max-width);
}

/* Keep reset/action controls clear of the preceding field in every maths tool. */
.card-panel .action-buttons-row {
  margin-top: 1.25rem;
}

.maths-input-stack + .action-buttons-row,
.maths-input-stack ~ .action-buttons-row {
  margin-top: 1.25rem;
}

.full-width-row {
  grid-column: 1 / -1;
}

.span-two-cols {
  grid-column: span 2;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
}

.calculator-input,
.select-input {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background-color: #fff;
  outline: none;
  transition: all var(--transition-fast);
}

.calculator-input:focus,
.select-input:focus {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.input-prefix-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-prefix {
  position: absolute;
  left: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
}

.input-prefix-wrapper input {
  padding-left: 2rem;
}

.segmented-control {
  display: flex;
  background-color: #f1f5f9;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  gap: 0.25rem;
}

.segmented-control input[type="radio"] {
  display: none;
}

.segmented-control label {
  flex: 1;
  text-align: center;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.segmented-control input[type="radio"]:checked + label {
  background-color: #fff;
  color: var(--color-text-main);
  box-shadow: var(--shadow-sm);
}

.pension-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pension-output {
  font-weight: 700;
  color: var(--color-primary-hover);
}

.range-slider {
  width: 100%;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  outline: none;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.accordion-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-top: 1rem;
  overflow: hidden;
}

.accordion-summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.875rem;
  background-color: #f8fafc;
  cursor: pointer;
  user-select: none;
}

.accordion-summary:hover {
  background-color: #f1f5f9;
}

.accordion-body {
  padding: 1rem;
  background-color: #fff;
}

/* ==========================================================================
   TOOL INPUT CONTROLS - MODERN STYLING
   --------------------------------------------------------------------------
   Shared source of truth for reusable calculator/tool input and result UI.
   Add any new reusable tool-control styles within this section, then document
   the class and its intended markup in docs/design-system.md and
   docs/tool-template.md.
   ========================================================================== */

/* Input with suffix (unit label like cm, kg, lbs) */
.input-suffix-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.input-suffix-wrapper input {
  width: 100%;
  padding: 0.75rem 1rem;
  padding-right: 3rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  background-color: #f8fafc;
  color: var(--color-text-main);
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-suffix-wrapper input:hover {
  border-color: var(--color-primary);
  background-color: #fff;
}

.input-suffix-wrapper input:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

.input-suffix {
  position: absolute;
  right: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
  background: #f1f5f9;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

/* Leave the browser's native number-input up/down arrows unobstructed. */
.input-suffix-wrapper--number input[type="number"] {
  padding-right: 5.5rem;
}

.input-suffix-wrapper--number .input-suffix {
  right: 2rem;
}

/* Dual input wrapper for ft/in */
.dual-input-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Modern select styling */
.select-input-modern {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  background-color: #f8fafc;
  color: var(--color-text-main);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.select-input-modern:hover {
  border-color: var(--color-primary);
  background-color: #fff;
}

.select-input-modern:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

/* UK student-loan calculator: visualisations use the shared card/table language. */
.student-loan-frequency,
.student-loan-analysis-tabs { margin: 1.25rem 0; }
.student-loan-frequency .unit-btn,
.student-loan-analysis-tabs .unit-btn { flex: 1; border: 0; background: transparent; padding: .625rem .75rem; border-radius: 10px; color: var(--color-text-muted); font: inherit; font-weight: 600; cursor: pointer; }
.student-loan-frequency .unit-btn.active,
.student-loan-analysis-tabs .unit-btn.active { background: #fff; color: var(--color-primary-hover); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.range-scale { display: flex; justify-content: space-between; margin-top: .35rem; color: var(--color-text-muted); font-size: .75rem; }
.section-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-heading-row .form-title { margin-bottom: 0; }
.student-loan-breakdown { margin-top: 1rem; }
.student-loan-breakdown-panel { background: var(--color-bg-card); }
.student-loan-breakdown-cell { min-height: 5.5rem; }
.student-loan-breakdown-cell .result-cell-val-modern { font-variant-numeric: tabular-nums; }
.student-loan-breakdown-cell.is-total {
  border-color: var(--color-primary-border);
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
}
.student-loan-breakdown-cell.is-total .result-cell-label-modern,
.student-loan-breakdown-cell.is-total .result-cell-val-modern {
  color: var(--color-primary-hover);
  font-weight: 800;
}
.student-loan-breakdown-panel .btn-secondary { font-size: .8125rem; }
.student-loan-chart { display: flex; align-items: end; gap: .45rem; min-height: 15rem; padding: 2rem .5rem .25rem; overflow-x: auto; border-bottom: 1px solid var(--color-border); }
.student-loan-chart-bar { --bar-height: 50%; display: flex; flex: 1 0 3.25rem; min-width: 3.25rem; height: 13rem; flex-direction: column; align-items: center; justify-content: end; gap: .35rem; }
.student-loan-chart-value { color: var(--color-text-muted); font-size: .65rem; white-space: nowrap; }
.student-loan-chart-fill { width: min(2rem, 80%); height: var(--bar-height); min-height: .25rem; border-radius: 6px 6px 0 0; background: var(--color-primary); transition: height .2s ease; }
.student-loan-chart-bar.is-current .student-loan-chart-fill { background: var(--color-secondary, #0f766e); }
.student-loan-chart-label { color: var(--color-text-muted); font-size: .7rem; white-space: nowrap; }
.student-loan-legend-dot { background: var(--color-primary); }

/* Student-loan dark mode. These controls use real buttons (not the radio-label
   markup used by the older segmented control), so style the complete cascade
   locally rather than relying on the generic radio selectors above. */
:root[data-theme="dark"] .student-loan-calculator .student-loan-frequency,
:root[data-theme="dark"] .student-loan-calculator .student-loan-analysis-tabs {
  background: #172235;
  border: 1px solid #334155;
  box-shadow: none;
}

:root[data-theme="dark"] .student-loan-calculator .student-loan-frequency .unit-btn,
:root[data-theme="dark"] .student-loan-calculator .student-loan-analysis-tabs .unit-btn {
  color: #94a3b8;
  background: transparent;
}

:root[data-theme="dark"] .student-loan-calculator .student-loan-frequency .unit-btn:hover,
:root[data-theme="dark"] .student-loan-calculator .student-loan-frequency .unit-btn:focus-visible,
:root[data-theme="dark"] .student-loan-calculator .student-loan-analysis-tabs .unit-btn:hover,
:root[data-theme="dark"] .student-loan-calculator .student-loan-analysis-tabs .unit-btn:focus-visible {
  color: #cbd5e1;
  background: #243348;
}

:root[data-theme="dark"] .student-loan-calculator .student-loan-frequency .unit-btn.active,
:root[data-theme="dark"] .student-loan-calculator .student-loan-analysis-tabs .unit-btn.active {
  color: #f59e0b;
  background: #334155;
  box-shadow: none;
}

:root[data-theme="dark"] .student-loan-calculator .form-title,
:root[data-theme="dark"] .student-loan-calculator .form-label-modern,
:root[data-theme="dark"] .student-loan-calculator .field-label-note,
:root[data-theme="dark"] .student-loan-calculator .field-help,
:root[data-theme="dark"] .student-loan-calculator .range-scale,
:root[data-theme="dark"] .student-loan-calculator .input-prefix,
:root[data-theme="dark"] .student-loan-calculator .input-suffix,
:root[data-theme="dark"] .student-loan-calculator .student-loan-chart-value,
:root[data-theme="dark"] .student-loan-calculator .student-loan-chart-label,
:root[data-theme="dark"] .student-loan-calculator .chart-legend,
:root[data-theme="dark"] .student-loan-calculator .result-cell-label-modern,
:root[data-theme="dark"] .student-loan-calculator .breakdown-table td {
  color: #cbd5e1;
}

:root[data-theme="dark"] .student-loan-calculator .result-cell-val-modern,
:root[data-theme="dark"] .student-loan-calculator .breakdown-table th {
  color: #f1f5f9;
}

:root[data-theme="dark"] .student-loan-calculator .student-loan-breakdown-cell.is-total .result-cell-label-modern,
:root[data-theme="dark"] .student-loan-calculator .student-loan-breakdown-cell.is-total .result-cell-val-modern {
  color: #fbbf24;
}

:root[data-theme="dark"] .student-loan-calculator .breakdown-table th,
:root[data-theme="dark"] .student-loan-calculator .breakdown-table td {
  border-color: #475569;
}

:root[data-theme="dark"] .student-loan-calculator .breakdown-table th {
  background: #334155;
}

/* Modern number input */
.number-input-modern {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 500;
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  background-color: #f8fafc;
  color: var(--color-text-main);
  outline: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.number-input-modern:hover {
  border-color: var(--color-primary);
  background-color: #fff;
}

.number-input-modern:focus {
  border-color: var(--color-primary);
  background-color: #fff;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
}

/* Enhanced segmented control for unit toggle */
.segmented-control-modern {
  display: flex;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  padding: 0.375rem;
  border-radius: 14px;
  gap: 0.375rem;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}

.segmented-control-modern input[type="radio"] {
  display: none;
}

.segmented-control-modern label {
  flex: 1;
  text-align: center;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.segmented-control-modern label:hover {
  color: var(--color-text-main);
  background-color: rgba(255, 255, 255, 0.5);
}

.segmented-control-modern input[type="radio"]:checked + label {
  background-color: #fff;
  color: var(--color-primary-hover);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  font-weight: 700;
}

/* Advanced options modern styling */
.accordion-modern {
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  margin-top: 1.25rem;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

.accordion-modern:hover {
  border-color: #cbd5e1;
}

.accordion-modern[open] {
  border-color: var(--color-primary-border);
}

.accordion-modern summary {
  padding: 0.875rem 1.25rem;
  font-weight: 600;
  font-size: 0.875rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.25s ease;
  list-style: none;
}

.accordion-modern summary::-webkit-details-marker {
  display: none;
}

.accordion-modern summary::before {
  content: '⚙️';
  font-size: 1rem;
}

.accordion-modern summary::after {
  content: '';
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.accordion-modern[open] summary::after {
  transform: rotate(-135deg);
}

.accordion-modern summary:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.accordion-modern .accordion-body {
  padding: 1.25rem;
  background-color: #fff;
  border-top: 1px solid #e2e8f0;
}

/* Informational disclosure used on category listing pages. */
.category-read-more {
  margin-top: 2rem;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.category-read-more summary {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  color: var(--color-primary-hover);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.category-read-more summary::-webkit-details-marker {
  display: none;
}

.category-read-more summary::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.category-read-more[open] summary::after {
  transform: rotate(-135deg);
}

.category-read-more-body {
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--color-border);
}

.category-read-more-body h2 {
  margin: 1.25rem 0 0.75rem;
  font-size: 1.125rem;
}

.category-read-more-body p {
  margin: 0.75rem 0 0;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* Form group styling */
.form-group-modern {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Keep field-level guidance readable and distinct from its related input. */
.form-group-modern > .disclaimer-notice {
  display: block;
  padding: 1rem 1.25rem;
  line-height: 1.45;
}

/* Supporting text belongs to a field; reserve .disclaimer-notice for panel-level guidance. */
.field-help {
  display: block;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Keep validation and actions visually separated from the final input. */
.calc-panel form > .disclaimer-notice {
  margin: 1.25rem 0 0;
}

.calc-panel form > .action-buttons-row {
  margin-top: 1.5rem;
}

.form-group-modern[hidden] {
  display: none;
}

/* Contact and tool-suggestion pages */
.feedback-page { max-width: 48rem; padding-top: 2rem; padding-bottom: 4rem; }
.feedback-page-header { margin-bottom: 1.5rem; }
.feedback-panel { background-color: var(--color-bg-card); }
.feedback-panel-title { margin: 0 0 1.5rem; font-size: 1.25rem; }
.feedback-form { display: grid; gap: 1.25rem; }
.feedback-form .number-input-modern,
.feedback-form .select-input-modern { width: 100%; }
.feedback-textarea { min-height: 8rem; resize: vertical; }
.feedback-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.feedback-submit { justify-self: start; min-height: 3rem; }
.validation-summary:empty { display: none; }
.validation-summary { color: #b91c1c; font-size: .875rem; }
.feedback-success { text-align: center; padding: clamp(2rem, 7vw, 3.5rem); }
.feedback-success-icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; border-radius: 50%; background: var(--badge-updated-bg); color: var(--badge-updated-text); font-size: 2rem; font-weight: 800; }
.feedback-success h2 { margin-bottom: .5rem; font-size: 1.5rem; }
.feedback-success p { margin: 0 auto 1.5rem; color: var(--color-text-muted); max-width: 37rem; }
.feedback-next-steps { margin-top: 1.5rem; padding: 1.25rem; border-radius: var(--radius-md); background: var(--color-primary-light); color: var(--color-text-main); }
.feedback-next-steps h2 { margin-bottom: .5rem; font-size: 1rem; }
.feedback-next-steps ul { padding-left: 1.25rem; color: var(--color-text-muted); font-size: .9rem; line-height: 1.7; }

.form-label-modern {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Result grid container */
.result-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.results-section-title {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
}

/* Small calculation-status text should not sit directly against the results. */
.result-status {
  margin-top: 1.25rem;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.contractor-comparison {
  overflow: hidden;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contractor-comparison-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #fff7ed 0%, #fffbeb 100%);
  border-bottom: 1px solid #fed7aa;
}

.contractor-comparison-eyebrow {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-primary-hover);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contractor-comparison-header h2 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.contractor-comparison-icon {
  display: grid;
  flex: 0 0 2.5rem;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  background: #fff;
  border: 1px solid #fed7aa;
  border-radius: 50%;
  font-size: 1.125rem;
}

.contractor-comparison-body {
  padding: 1.5rem;
}

.contractor-comparison-body > p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.contractor-comparison-value {
  display: block;
  margin: 0.75rem 0 1rem;
  color: var(--color-text-main);
  font-size: 2rem;
  line-height: 1.1;
}

.contractor-comparison-note {
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.8125rem !important;
}

/* Result cell modern styling */
.result-cell-modern {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  text-align: center;
  transition: all 0.25s ease;
}

.result-cell-modern:hover {
  border-color: var(--color-primary-border);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.08);
  transform: translateY(-2px);
}

.result-cell-label-modern {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.375rem;
}

.result-cell-val-modern {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-main);
}

/* Result cells keep a light surface in dark mode, so use dark text tokens
   rather than inheriting the page's light-on-dark text colors. */
:root[data-theme="dark"] .result-cell-modern {
  background: linear-gradient(135deg, #273449 0%, #1e293b 100%);
  border-color: var(--color-border);
  color: var(--color-text-main);
}

:root[data-theme="dark"] .result-cell-modern .result-cell-label-modern,
:root[data-theme="dark"] .result-cell-modern .result-cell-sub {
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .result-cell-modern .result-cell-val-modern {
  color: var(--color-text-main);
}

/* Modern controls use light-mode gradients, so their dark-mode surfaces must
   be declared after the shared component rules to override those gradients. */
:root[data-theme="dark"] .segmented-control-modern {
  background: #172235;
  border: 1px solid var(--color-border);
}

:root[data-theme="dark"] .segmented-control-modern label {
  color: var(--color-text-muted);
}

:root[data-theme="dark"] .segmented-control-modern label:hover {
  background: #243348;
  color: var(--color-text-main);
}

:root[data-theme="dark"] .segmented-control-modern input[type="radio"]:checked + label {
  background: #334155;
  color: var(--color-text-main);
  box-shadow: none;
}

:root[data-theme="dark"] .accordion-modern {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .accordion-modern summary {
  background: #172235;
  color: var(--color-text-main);
}

:root[data-theme="dark"] .accordion-modern summary:hover {
  background: #243348;
}

:root[data-theme="dark"] .accordion-modern .accordion-body {
  background: #172235;
  border-color: var(--color-border);
}

/* Visual scale wrapper */
.visual-scale-wrapper {
  margin: 1.5rem 0;
  padding: 1rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

:root[data-theme="dark"] .visual-scale-wrapper {
  background: #172235;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* Disclaimer notice */
.disclaimer-notice {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #f59e0b;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: 0.875rem;
  color: #92400e;
}

.disclaimer-notice strong {
  color: #78350f;
}

/* Panel notices follow the input grid rather than occupying an implicit grid row. */
.wellbeing-notice {
  margin-top: 1.5rem;
}

/*
   Every panel-level disclaimer must use this class. It keeps the notice clear
   of the final input row in migrated and newly generated calculator forms.
*/
.tool-panel-notice {
  margin-top: 1.5rem;
}

/* Due date calculator */
.due-date-calculator-heading {
  margin-bottom: 1.5rem;
}

.due-date-calculator-eyebrow {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-primary-hover);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.due-date-calculator-heading .form-title,
.due-date-reference .section-heading {
  margin-bottom: 0.5rem;
}

.due-date-calculator-heading p {
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.due-date-method-control {
  margin-bottom: 1.5rem;
}

.due-date-method-control .unit-btn {
  flex: 1;
  padding: 0.625rem 1rem;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.due-date-method-control .unit-btn:hover {
  color: var(--color-text-main);
  background-color: rgba(255, 255, 255, 0.5);
}

.due-date-method-control .unit-btn.active {
  color: var(--color-primary-hover);
  font-weight: 700;
  background-color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.due-date-method-control .unit-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.due-date-reference-heading {
  margin-bottom: 1.25rem;
}

.due-date-reference-heading .seo-lead {
  margin-bottom: 0;
}

.due-date-reference-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.due-date-reference-item {
  padding: 1.125rem;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
}

.due-date-reference-value {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--color-primary-hover);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
}

.due-date-reference-item h3 {
  margin-bottom: 0.35rem;
  color: var(--color-text-main);
  font-size: 0.9375rem;
}

.due-date-reference-item p {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Calorie calculator result lists */
.calorie-goal-list, .calorie-breakdown-list { display: grid; gap: 0.625rem; margin: 1rem 0 0; }
.calorie-goal-row, .calorie-breakdown-list > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #f8fafc; }
.calorie-goal-row.is-recommended { border-color: var(--color-primary-border); background: var(--color-primary-light); }
.calorie-goal-row strong, .calorie-goal-row span { display: block; }
.calorie-goal-row strong, .calorie-breakdown-list dt { font-size: 0.875rem; color: var(--color-text-main); }
.calorie-goal-row span { margin-top: 0.125rem; font-size: 0.75rem; color: var(--color-text-muted); }
.calorie-goal-row output, .calorie-breakdown-list dd { margin: 0; font-weight: 700; color: var(--color-text-main); white-space: nowrap; }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.75rem;
}

.checkbox-tile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: var(--color-text-main);
  cursor: pointer;
}

.checkbox-tile input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
}

/* ==========================================================================
   7. RESULTS DISPLAY & VISUALIZATIONS
   ========================================================================== */
.results-panel {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

/* Give the main input/output and supporting content panels on every tool page
   the same solid amber treatment as calculator input controls. */
.page-layout-grid .main-content-column > .card-panel,
.page-layout-grid .main-content-column > .results-panel,
.page-layout-grid .main-content-column > .card-panel .faq-item,
.page-layout-grid .sidebar-column > .quick-ref-card {
  border: 2px solid var(--color-primary);
}

/* Homepage collection panels use the same solid amber boundary as tool inputs. */
.homepage-tool-panel {
  border: 2px solid var(--color-primary);
}

/* Separate health calculator measurement and estimate panels. */
.card-panel[data-health-tool="bmr-calculator"] + .results-panel,
.card-panel[data-health-tool="body-fat-calculator"] + .results-panel {
  margin-top: 1.5rem;
}

.results-panel + .tool-trust {
  margin-top: 1.5rem;
}

/* UK Stamp Duty Calculator: compact calculation summary and a readable marginal-band table. */
.stamp-duty-result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stamp-duty-breakdown {
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.stamp-duty-breakdown-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.stamp-duty-breakdown-heading .section-heading {
  margin: 0;
}

.stamp-duty-breakdown-heading p {
  margin: .35rem 0 0;
  color: var(--color-text-muted);
  font-size: .875rem;
}

.stamp-duty-table-wrapper {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.stamp-duty-table {
  width: 100%;
  min-width: 28rem;
  margin: 0;
}

.stamp-duty-table caption {
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-align: left;
}

.stamp-duty-table th:nth-child(2),
.stamp-duty-table th:nth-child(3),
.stamp-duty-table td:nth-child(2),
.stamp-duty-table td:nth-child(3) {
  text-align: right;
}

.stamp-duty-table td:last-child {
  font-weight: 700;
}

.stamp-duty-breakdown .disclaimer-notice {
  margin-top: 1rem;
}

@media (max-width: 640px) {
  .stamp-duty-result-grid {
    grid-template-columns: 1fr;
  }

  .stamp-duty-breakdown-heading {
    align-items: start;
    flex-direction: column;
  }

  .stamp-duty-results {
    padding: 1rem;
  }
}

/* Keep the developer-tool privacy/trust summary clear of its tool card. */
.developer-tool-panel + .tool-trust {
  margin-top: 1.5rem;
}

.takehome-hero {
  text-align: center;
  background: var(--color-takehome-surface);
  border: 1px solid var(--color-takehome-border);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

.takehome-label {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--color-takehome-label);
}

.takehome-value {
  font-size: 3rem;
  font-weight: 800;
  color: var(--color-takehome-value);
  line-height: 1.1;
  margin: 0.25rem 0;
}

.takehome-subtext {
  font-size: 0.875rem;
  color: var(--color-takehome-label);
}

.takehome-summary {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 1rem 0 0;
}

.takehome-summary div { min-width: 9rem; }
.takehome-summary dt { color: var(--color-takehome-label); font-size: 0.8125rem; }
.takehome-summary dd { margin: 0.25rem 0 0; color: var(--color-takehome-value); font-weight: 700; }

.breakdown-bar-wrapper {
  margin-bottom: 1.5rem;
}

.breakdown-bar-title {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.breakdown-bar {
  display: flex;
  height: 14px;
  width: 100%;
  border-radius: 9999px;
  overflow: hidden;
  background-color: #e2e8f0;
}

.bar-segment {
  height: 100%;
  transition: width 0.3s ease;
}

.segment-takehome { background-color: var(--color-takehome); }
.segment-tax { background-color: var(--color-tax); }
.segment-ni { background-color: var(--color-ni); }
.segment-pension { background-color: var(--color-pension); }
.segment-student-loan { background-color: var(--color-student-loan); }

.breakdown-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0;
  margin: 0.75rem 0 0;
  list-style: none;
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.breakdown-legend li { display: flex; align-items: center; gap: 0.35rem; }
.legend-swatch { width: 0.875rem; height: 0.875rem; border-radius: 2px; }

.table-responsive-wrapper {
  overflow-x: auto;
}

.breakdown-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.875rem;
}

.breakdown-table th {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-main);
  font-weight: 600;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-table td {
  padding: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.breakdown-table tr:last-child td {
  border-bottom: none;
}

.breakdown-table .breakdown-group th {
  padding: 0.75rem;
  background-color: var(--color-bg-subtle);
  color: var(--color-text-main);
  text-align: left;
}

.table-row-total {
  font-weight: 700;
  background-color: var(--color-bg-subtle);
}

.salary-provenance {
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

.salary-provenance h2 { color: var(--color-text-main); font-size: 1rem; margin: 0 0 0.5rem; }
.salary-provenance p { margin: 0.5rem 0; }

@media (max-width: 480px) {
  .takehome-summary { align-items: stretch; flex-direction: column; gap: 0.75rem; }
  .takehome-summary div { min-width: 0; }
}

/* ==========================================================================
   8. SEO CONTENT & SIDEBAR
   ========================================================================== */
.section-heading {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.seo-lead {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
}

.faq-question {
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.faq-answer {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.quick-ref-card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.375rem;
  margin-bottom: 0;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast);
  width: 100%;
  max-width: 100%;
}

.quick-ref-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.quick-ref-title {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-primary-border);
  color: var(--color-text-main);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quick-ref-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 2px;
}

.quick-ref-card table {
  width: 100%;
  border-collapse: collapse;
}

.quick-ref-card table tr {
  transition: background-color var(--transition-fast);
}

.quick-ref-card table tr:hover {
  background-color: var(--color-primary-light);
}

.quick-ref-card table td {
  padding: 0.7rem 0.625rem;
  font-size: 0.8125rem;
  border-bottom: 1px solid #cbd5e1;
  color: var(--color-text-muted);
}

.quick-ref-card table td:first-child {
  padding-left: 0;
}

.quick-ref-card table td:last-child {
  padding-right: 0;
}

.quick-ref-card table tr:last-child td {
  border-bottom: none;
}

.quick-ref-card table td:first-child {
  color: var(--color-text-main);
  font-weight: 500;
}

.quick-ref-card table td.numeric-display {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-main);
  font-weight: 600;
}

.sidebar-links-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}

.sidebar-links-list li {
  transition: background-color var(--transition-fast);
  border-radius: 6px;
}

.sidebar-links-list li + li {
  border-top: 1px solid #cbd5e1;
}

.sidebar-links-list li:hover {
  background-color: var(--color-primary-light);
}

.sidebar-links-list a {
  display: block;
  text-decoration: none;
  font-size: 0.8125rem;
  color: var(--color-primary-hover);
  font-weight: 600;
  padding: 0.7rem 0.75rem;
  border-radius: 6px;
  transition: color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast);
}

.sidebar-links-list a:hover {
  text-decoration: none;
  color: var(--color-primary);
}

.sidebar-links-list a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: 0.75rem 1.25rem;
  box-shadow: 0 -4px 10px rgba(0,0,0,0.05);
  z-index: 99;
  justify-content: space-between;
  align-items: center;
}

.mobile-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: 700;
}

.mobile-amount {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-takehome-value);
}

.mobile-action-btn {
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Compound-interest calculator validation remains legible in both theme variants. */
.field-validation-message,
.field-help-text {
  margin: 0.375rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.field-help-text {
  color: var(--color-text-muted);
}

.field-validation-message {
  min-height: 1.15rem;
  color: #b91c1c;
  font-weight: 600;
}

.number-input-modern[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.18);
}

.number-input-modern[aria-invalid="true"]:focus {
  outline-color: #dc2626;
}

@media (max-width: 560px) {
  .field-validation-message,
  .field-help-text {
    overflow-wrap: anywhere;
  }
}

.text-center { text-align: center; }
.text-decoration-none { text-decoration: none; color: inherit; }
.text-decoration-none:hover h3 { color: var(--color-primary-hover); }

/* ==========================================================================
   9. TOOLS GRID & CARDS
   ========================================================================== */

/* Medium Tool Card (Homepage Featured Tools size) */
.tools-grid-medium {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.tool-card-medium {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  min-height: 120px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.tool-card-medium:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.tool-card-medium-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.75rem;
}

.tool-card-medium-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.tool-card-medium-badge {
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
}

.tool-card-medium-badge.badge-popular {
  background-color: var(--badge-popular-bg);
  color: var(--badge-popular-text);
}

.tool-card-medium-badge.badge-updated {
  background-color: var(--badge-updated-bg);
  color: var(--badge-updated-text);
}

.tool-card-medium-badge.badge-new {
  background-color: var(--badge-new-bg);
  color: var(--badge-new-text);
}

.tool-card-medium-content {
  flex: 1;
}

.tool-card-medium-name {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.tool-card-medium-desc {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  margin: 0;
}

/* Category and all-tools listings share this card. Fixed grid rows and
   full-height cards keep every panel aligned when descriptions vary. */
.tools-grid-medium {
  grid-auto-rows: 12.325rem;
}

.tools-grid-medium > .tool-card-medium,
.tools-grid-medium > .tool-card-wrapper,
.tool-card-wrapper > .tool-card-medium {
  height: 100%;
  min-height: 0;
}

@media (max-width: 560px) {
  .tools-grid-medium {
    grid-auto-rows: auto;
  }

  .tool-card-medium,
  .tool-card-wrapper > .tool-card-medium {
    min-height: 12.325rem;
  }
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  min-height: 180px;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: inherit;
}

.tool-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-3px);
}

.tool-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.tool-card-icon {
  font-size: 2rem;
  line-height: 1;
}

.tool-card-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  text-transform: uppercase;
}

.tool-card-badge.badge-popular {
  background-color: var(--badge-popular-bg);
  color: var(--badge-popular-text);
}

.tool-card-badge.badge-updated {
  background-color: var(--badge-updated-bg);
  color: var(--badge-updated-text);
}

.tool-card-badge.badge-new {
  background-color: var(--badge-new-bg);
  color: var(--badge-new-text);
}

.tool-card-content {
  flex: 1;
}

.tool-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.tool-card-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

.tool-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.tool-card-category {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.tool-card-cta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  transition: color var(--transition-fast);
}

.tool-card:hover .tool-card-cta {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   9.3. CATEGORY FILTER TABS
   ========================================================================== */
.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.25rem 0;
  margin-bottom: 0.5rem;
}

.category-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-muted);
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.category-tab:hover {
  border-color: var(--color-primary-border);
  color: var(--color-primary-hover);
  background-color: var(--color-primary-light);
}

.category-tab.active {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  font-weight: 600;
}

.category-tab.active:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.category-tab-count {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  background-color: #f1f5f9;
  color: var(--color-text-muted);
}

.category-tab.active .category-tab-count {
  background-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.no-results-message {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
}

/* ==========================================================================
   9.5. DEVELOPER TOOLS STYLING
   ========================================================================== */

/* Code Editor Textarea */
.code-textarea {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 1rem;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: #fafafa;
  color: var(--color-text-main);
  resize: vertical;
  min-height: 300px;
  max-height: 600px;
  overflow-y: auto;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.code-textarea:focus {
  outline: none;
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
  background: #fff;
}

.code-textarea::placeholder {
  color: var(--color-text-light);
}

/* Full-width editing areas retain the tool layout while providing a focused code-editor surface. */
.inputs-form-grid.maths-input-stack > .developer-editor-field {
  width: 100%;
  max-width: none;
}

.developer-editor-field .code-textarea {
  display: block;
  min-height: clamp(19rem, 38vh, 34rem);
  padding: 1.25rem 1.375rem;
  border-color: var(--color-primary);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, rgba(245, 158, 11, 0.045) 0, rgba(245, 158, 11, 0.045) 3.25rem, transparent 3.25rem),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(15, 23, 42, 0.04);
  caret-color: var(--color-primary-hover);
}

.developer-editor-field .code-textarea:hover {
  border-color: var(--color-primary);
}

.developer-editor-field .code-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* SQL Editor Container with Line Numbers */
.sql-editor-container {
  display: flex;
  position: relative;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: #fafafa;
  overflow: hidden;
  max-height: 600px;
  height: clamp(19rem, 38vh, 34rem);
}

/* Syntax Highlighting Styles */
.sql-keyword {
  color: #2563eb;
  font-weight: 600;
}

.sql-string {
  color: #16a34a;
}

.sql-number {
  color: #ea580c;
}

.sql-comment {
  color: #6b7280;
  font-style: italic;
}

.sql-function {
  color: #0891b2;
}

/* Dark mode syntax highlighting */
:root[data-theme="dark"] .sql-keyword {
  color: #60a5fa;
}

:root[data-theme="dark"] .sql-string {
  color: #4ade80;
}

:root[data-theme="dark"] .sql-number {
  color: #fb923c;
}

:root[data-theme="dark"] .sql-comment {
  color: #9ca3af;
}

:root[data-theme="dark"] .sql-function {
  color: #22d3ee;
}

.line-numbers-gutter {
  flex-shrink: 0;
  width: 3.5rem;
  padding: 1.25rem 0.5rem 1.25rem 0.75rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-right: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  text-align: right;
  user-select: none;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.sql-editor-container .code-textarea {
  flex: 1;
  border: none;
  border-radius: 0;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  padding: 1.25rem 1.375rem;
  background: transparent;
  resize: none;
}

.sql-editor-container .code-textarea:focus {
  box-shadow: none;
}

/* Keyboard Shortcuts Help */
.shortcuts-help-btn {
  margin-top: 0.5rem;
  padding: 0.25rem 0.5rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.875rem;
  transition: all var(--transition-fast);
}

.shortcuts-help-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.shortcuts-help-panel {
  margin-top: 0.75rem;
  padding: 1rem;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.shortcuts-help-panel h4 {
  margin: 0 0 0.75rem 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-main);
}

.shortcuts-help-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.shortcuts-help-panel li {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text-main);
}

.shortcuts-help-panel kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.75rem;
  color: var(--color-text-main);
  box-shadow: 0 1px 0 var(--color-border);
}

@media (max-width: 640px) {
  .salary-result-actions {
    align-items: stretch;
  }

  .salary-result-actions .btn-secondary {
    flex: 1 1 calc(50% - 0.5rem);
    min-height: 2.75rem;
  }

  .salary-result-actions .form-help {
    flex-basis: 100%;
  }

  .developer-editor-field .code-textarea {
    min-height: 18rem;
    padding: 1rem;
    border-radius: var(--radius-md);
  }
}

/* Action Buttons Row */
.action-buttons-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Tool input controls are intentionally stacked on calculator pages. */
:root {
  --tool-control-max-width: 28rem;
}

.inputs-form-grid.maths-input-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

/* Developer editors occupy the entire available main-content column. */
.inputs-form-grid.maths-input-stack.developer-editor-stack {
  max-width: none;
  width: 100%;
}

.inputs-form-grid.maths-input-stack > .form-group-modern,
.inputs-form-grid.maths-input-stack > .full-width-row {
  width: min(100%, var(--tool-control-max-width));
}

/* The large source editors intentionally use the full main-content column. */
.inputs-form-grid.maths-input-stack > .form-group-modern.developer-editor-field {
  width: 100%;
  max-width: none;
}

.inputs-form-grid.maths-input-stack .number-input-modern,
.inputs-form-grid.maths-input-stack .select-input-modern,
.inputs-form-grid.maths-input-stack .input-prefix-wrapper,
.inputs-form-grid.maths-input-stack .input-suffix-wrapper {
  width: 100%;
}

.maths-input-stack + .action-buttons-row {
  margin-top: 1.5rem;
}

.inputs-form-grid--stacked + .action-buttons-row {
  margin-top: 1.5rem;
}

.developer-privacy {
  margin-top: 1rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.developer-privacy:first-child {
  margin-top: 0;
}

.developer-privacy + .developer-privacy {
  margin-top: 1rem;
}

/* Button Styles */
.btn-primary,
.btn-secondary,
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background-color: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-main);
  /* Keep secondary actions visible against white and subtle tool panels. */
  border-color: var(--color-primary);
}

.btn-secondary:hover {
  background-color: #f8fafc;
  border-color: var(--color-border-hover);
  color: var(--color-primary-hover);
}

.btn-secondary:active {
  background-color: #f1f5f9;
}

.btn-icon {
  padding: 0.5rem;
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
  font-size: 1.125rem;
}

.btn-icon:hover {
  background-color: #f8fafc;
  color: var(--color-primary-hover);
}

/* Code Output Display */
.code-output {
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0;
  white-space: pre-wrap;
  word-wrap: break-word;
  min-height: 100px;
}

.code-output code {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  padding: 0;
}

/* Output Header */
.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.output-header h3 {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--color-text-main);
  margin: 0;
}

.output-actions {
  display: flex;
  gap: 0.375rem;
}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.water-intake-trust {
  margin-top: 1rem;
}

.site-footer {
  background-color: var(--color-bg-card);
  border-top: 1px solid var(--color-border);
  padding: 2rem 1.5rem;
  margin-top: 3rem;
}

.footer-container {
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copy {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-primary-hover);
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1200px) {
  .inputs-form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .page-layout-grid {
    grid-template-columns: 1fr;
  }
  
  .sidebar-column {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .quick-ref-card {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .site-header .header-container {
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .header-search {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
  }

  .header-search input {
    min-height: 2.75rem;
    font-size: 1rem;
  }

  .search-results {
    right: 0;
    max-width: 100%;
  }

  .search-result {
    min-width: 0;
  }

  .search-result small {
    max-width: 100%;
  }

  .inputs-form-grid {
    grid-template-columns: 1fr;
  }

  .span-two-cols {
    grid-column: span 1;
  }

  .mobile-sticky-bar {
    display: flex;
  }

  body {
    padding-bottom: 60px;
  }

  .takehome-value {
    font-size: 2.25rem;
  }
}

/* Opt-in tool print views. The sidebar only exposes Print for tools that have
   a meaningful result, while these shared rules remove surrounding chrome. */
@media print {
  .top-ad-strip,
  .site-header,
  .site-footer,
  .breadcrumb-trail,
  .sidebar-column,
  .tool-header,
  .tool-actions-card,
  .mobile-sticky-bar,
  .action-buttons-row,
  .salary-comparison-cta,
  .disclaimer-notice {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .site-wrapper {
    max-width: none;
    padding: 0;
  }

  .page-layout-grid {
    display: block;
  }

  .main-content-column {
    width: 100%;
  }

  .card-panel {
    border: 0;
    box-shadow: none;
    padding: 0;
  }

  .results-panel,
  .salary-provenance {
    margin-top: 0 !important;
    break-inside: avoid;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

/* UK Stamp Duty Calculator: keep the common journey short and make statutory
   declarations available only when a buyer needs them. */
.stamp-duty-primary-field,
.stamp-duty-scenario-field {
  border: 0;
  padding: 0;
  margin: 0;
}

.stamp-duty-choice-list {
  display: grid;
  gap: .65rem;
  margin-top: .75rem;
}

.stamp-duty-choice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-card);
  cursor: pointer;
}

.stamp-duty-choice:has(input:checked) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.stamp-duty-choice input { margin-top: .25rem; accent-color: var(--color-primary); }
.stamp-duty-choice strong,
.stamp-duty-choice small { display: block; }
.stamp-duty-choice small { margin-top: .2rem; color: var(--color-text-muted); }
.stamp-duty-more-options { margin-top: .25rem; }

/* The shared accordion retains a literal light gradient by default. Give the
   Stamp Duty optional fields an explicit token-based dark-mode surface so its
   summary remains readable before it is opened. */
:root[data-theme="dark"] .stamp-duty-more-options {
  border-color: var(--color-border);
}

:root[data-theme="dark"] .stamp-duty-more-options summary {
  background: #172235;
  color: var(--color-text-main);
}

:root[data-theme="dark"] .stamp-duty-more-options summary:hover {
  background: #243348;
}

:root[data-theme="dark"] .stamp-duty-more-options .accordion-body {
  background: #172235;
  border-color: var(--color-border);
}

/* UK IHT: the shared prefix/suffix components are normally decorative,
   absolutely positioned labels. Currency and percentage labels in this
   calculator are real adjoining control segments, so keep them in the flex
   flow and reset the shared input padding that would otherwise leave them
   floating beside the grid fields. This declaration is intentionally late in
   the stylesheet because the shared component rules occur after the IHT block. */
.uk-iht-calculator .input-prefix-wrapper,
.uk-iht-calculator .input-suffix-wrapper { position:static; width:100%; }
.uk-iht-calculator .input-prefix,
.uk-iht-calculator .input-suffix { position:static; flex:0 0 auto; }
.uk-iht-calculator .input-prefix-wrapper input,
.uk-iht-calculator .input-suffix-wrapper input { flex:1 1 auto; min-width:0; padding-left:.875rem; padding-right:.875rem; }

/* IHT grid labels vary from a single line to two lines. Reserve the same label
   space for every grid field and bottom-align the text so its related control
   has a shared baseline across each row. */
.uk-iht-input-grid > .form-group-modern > .form-label-modern {
  display:flex;
  align-items:flex-end;
  min-height:2.7rem;
  line-height:1.35;
}

@media(max-width:640px){
  .uk-iht-input-grid > .form-group-modern > .form-label-modern { min-height:0; }
}

/* Gift help and validation copy can wrap to different heights. Align each gift
   field from the top so that copy below a control cannot move that control out
   of line with its neighbours. Offset the action by one label line to align it
   with the controls rather than with the labels. */
.iht-gift-row { align-items:start; }
.iht-gift-row .iht-remove-gift {
  align-self:start;
  margin-top:1.18125rem;
  margin-bottom:0;
}

@media(max-width:640px){
  .iht-gift-row .iht-remove-gift { margin-top:0; }
}

/* ==========================================================================
   COOKIE CONSENT BANNER
   ========================================================================== */
.cookie-consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--color-bg-card);
  border-top: 2px solid var(--color-primary-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  padding: 1.25rem 1.5rem;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.cookie-consent-banner--visible {
  transform: translateY(0);
}

.cookie-consent-content {
  max-width: var(--max-width-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cookie-consent-text {
  flex: 1;
  min-width: 280px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-main);
}

.cookie-consent-text a {
  color: var(--color-primary-hover);
  text-decoration: underline;
}

.cookie-consent-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cookie-consent-btn {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-primary);
  background: transparent;
  color: var(--color-text-main);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.cookie-consent-btn:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

.cookie-consent-btn[data-consent-action="accept"] {
  background: var(--color-primary);
  color: #fff;
}

.cookie-consent-btn[data-consent-action="accept"]:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
}

.cookie-consent-btn:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .cookie-consent-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cookie-consent-text {
    min-width: 0;
    margin-bottom: 0.5rem;
  }
  
  .cookie-consent-actions {
    flex-direction: column;
  }
  
  .cookie-consent-btn {
    width: 100%;
  }
}

:root[data-theme="dark"] .cookie-consent-banner {
  background: var(--color-bg-card);
  border-top-color: var(--color-primary-border);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
}

/* Footer advertising disclosure */
.footer-advertising-disclosure {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.4;
  max-width: 36rem;
}

.footer-advertising-disclosure a {
  color: var(--color-primary-hover);
  text-decoration: underline;
}