/* ============================================================
   unified.css — one design language for every GravelCalc page
   Reference style: centered oversized hero + dashed "tool card"
   Loaded LAST on every page, so it wins over legacy stylesheets.
   ============================================================ */

:root {
  --u-accent:       #5b52e8;
  --u-accent-dark:  #4a41d6;
  --u-accent-soft:  #eeecff;
  --u-accent-line:  #c3bdfb;
  --u-ink:          #0e1020;
  --u-ink-2:        #2b3040;
  --u-muted:        #636a7d;
  --u-line:         #e6e8f0;
  --u-card:         #ffffff;
  --u-tint:         #fafbff;
  --u-radius:       24px;
  --u-font:         "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Legacy token remap: every page inherits the one accent ── */
:root {
  --ds-primary:       #5b52e8;
  --ds-primary-hover: #4a41d6;
  --ds-primary-light: #eeecff;
  --ds-primary-bg:    #f7f6ff;
  --ds-font:          "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ds-font-display:  "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ref-blue:         #5b52e8;
  --ref-blue-dark:    #4a41d6;
  --forest:           #5b52e8;
  --lime:             #eeecff;
}

/* the two conversion pages still hard-code a green — pull them in line */
[style*="#158a4a"] { color: var(--u-accent) !important; }
.tcy-breadcrumbs a, .cyd-breadcrumbs a { color: var(--u-accent) !important; }
.tcy-mode-toggle button.active, .cyd-mode-toggle button.active,
.tcy-formula-box, .cyd-formula-box,
.tcy-density-display, .cyd-density-display,
.tcy-result-card, .cyd-result-card { border-color: var(--u-accent-line) !important; }
.tcy-formula-box, .cyd-formula-box { background: var(--u-accent-soft) !important; }
.tcy-result-card .rc-value, .cyd-result-card .rc-value,
.tcy-formula-box .fb-label, .cyd-formula-box .fb-label { color: var(--u-accent) !important; }
.tcy-result-card svg, .cyd-result-card svg { stroke: var(--u-accent) !important; }

/* ── Page shell ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #fff !important;
  color: var(--u-ink);
  font-family: var(--u-font);
  -webkit-font-smoothing: antialiased;
}

body main { background: #fff; }

/* ── Top bar ──────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 60px !important;
  min-height: 60px;
  padding: 0 max(4vw, 20px) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--u-line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.topbar .brand { font: 800 19px/1 var(--u-font) !important; color: var(--u-ink) !important; letter-spacing: -.5px; }
.topbar .brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--u-accent) !important; transform: none !important; box-shadow: none !important; }
.topbar .brand > span:last-child > span { color: var(--u-accent) !important; }

.topbar nav a,
.topbar .nav-trigger {
  color: var(--u-ink-2) !important;
  font: 600 14px/1 var(--u-font) !important;
}
.topbar nav a:hover,
.topbar .nav-trigger:hover { color: var(--u-accent) !important; }

.topbar .header-cta {
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  background: var(--u-accent) !important;
  color: #fff !important;
  font: 700 14px/1 var(--u-font) !important;
}
.topbar .header-cta:hover { background: var(--u-accent-dark) !important; }
.topbar .header-cta span { color: #fff !important; }

/* Promo/announce strip above the bar — muted, not competing with the hero */
.ad-strip, .announce-strip { display: none !important; }

/* ── Breadcrumbs ──────────────────────────────────────────── */
.breadcrumbs,
.wt-breadcrumbs,
.tcy-breadcrumbs,
.cyd-breadcrumbs,
nav[aria-label="Breadcrumb"] {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 1180px !important;
  margin: 10px auto 0 !important;
  padding: 0 24px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #9298a8 !important;
  font-size: 12px !important;
}
.breadcrumbs a, .wt-breadcrumbs a, .tcy-breadcrumbs a, .cyd-breadcrumbs a {
  color: var(--u-accent) !important; text-decoration: none !important; font-weight: 600 !important;
}

/* promo strip above the header: the reference layout has none */
.promo-bar { display: none !important; }

/* ── HERO — centered, oversized, keyword-highlighted ──────── */
.tool-hero,
.article-hero,
.trust-hero,
.partners-hero,
.tcy-title-block,
.cyd-title-block,
body main > .hero,
body .hero {
  display: block !important;
  position: static !important;
  max-width: 980px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 16px 24px 12px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--u-ink) !important;
  text-align: center !important;
  grid-template-columns: none !important;
  border: 0 !important;
}

.hero-inner { display: block !important; grid-template-columns: none !important; max-width: none !important; padding: 0 !important; }
.hero-left  { display: block !important; padding: 0 !important; max-width: none !important; }
.hero-copy  { max-width: none !important; }

/* decorative hero art has no place in the reference layout */
.hero-art,
.hero-illustration,
.hero-visual,
.measure-line,
.stone { display: none !important; }

/* eyebrow / badge */
.tool-badge,
.hero-badge,
.eyebrow,
.article-hero .kicker {
  display: inline-block !important;
  margin: 0 0 6px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--u-accent) !important;
  font: 800 11px/1 var(--u-font) !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase;
}

/* headline */
.tool-hero h1,
.article-hero h1,
.trust-hero h1,
.partners-hero h1,
.tcy-title-block h1,
.cyd-title-block h1,
body .hero h1 {
  max-width: 940px !important;
  margin: 0 auto 10px !important;
  color: var(--u-ink) !important;
  font-family: var(--u-font) !important;
  font-size: clamp(28px, 3.4vw, 44px) !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -1.8px !important;
  text-align: center !important;
}

/* the accent-coloured keyword(s) inside the headline */
.tool-hero h1 span,
.article-hero h1 span,
.trust-hero h1 span,
.partners-hero h1 span,
.tcy-title-block h1 span,
.cyd-title-block h1 span,
body .hero h1 span,
body .hero h1 em,
.u-hl {
  color: var(--u-accent) !important;
  font-style: normal !important;
  font-weight: inherit !important;
}

/* sub-headline */
.tool-hero > p:not(.tool-badge),
.article-hero > p:not(.kicker),
.trust-hero > p,
.partners-hero > p,
.hero-sub,
.tcy-subtitle,
.cyd-subtitle,
body .hero-copy > p,
body .hero > p {
  max-width: 860px !important;
  margin: 0 auto !important;
  color: var(--u-muted) !important;
  font-family: var(--u-font) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

/* hero stat chips — kept, but on one compact centred line */
.hero-stats,
.hero-proof {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 10px !important;
  margin: 16px 0 0 !important;
}
.hero-stat,
.hero-proof > * {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--u-line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  color: var(--u-muted);
}
.hero-stat strong { color: var(--u-ink) !important; font: 800 13px/1 var(--u-font) !important; }
.hero-stat span   { color: var(--u-muted) !important; font-size: 12px !important; }

/* helper pill under the hero */
.helper-pill {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0 !important;
  padding: 8px 16px !important;
  border: 1px solid var(--u-accent-line) !important;
  border-radius: 999px !important;
  background: var(--u-accent-soft) !important;
  color: var(--u-accent) !important;
  font: 600 12px/1 var(--u-font) !important;
  text-decoration: none !important;
}
.helper-pill b { font-weight: 800; letter-spacing: .8px; }

/* ── THE TOOL CARD — dashed accent frame, the page's centrepiece ── */

/* every calculator lives inside one dashed shell.
   auto-fit means: one panel fills the shell, two panels sit side by side. */
.calculator-wrap,
.u-tool,
.sgc-calc-section,
.crc-calc-section,
.fpc-calc-section,
.gdc-calc-section,
.gbc-calc-section,
.wwc-calc-section,
.wt-calc-section,
.cov-calc-wrap,
.cost-calc-wrap,
.tcy-calc-section,
.cyd-calc-section,
.lsc-calc-section {
  display: block !important;
  position: relative !important;
  width: auto !important;
  max-width: 1200px !important;
  margin: 0 auto 26px !important;
  padding: 12px !important;
  border: 2px dashed var(--u-accent-line) !important;
  border-radius: var(--u-radius) !important;
  background: var(--u-tint) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* shells whose children are two peer panels */
.u-tool.u-split,
.sgc-calc-section,
.crc-calc-section,
.fpc-calc-section,
.gdc-calc-section,
.gbc-calc-section,
.wwc-calc-section,
.lsc-calc-section {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* inner panels: plain white cards on the tinted shell */
.sgc-calc-card,
.crc-calc-card,
.fpc-calc-card,
.gdc-calc-card,
.gbc-calc-card,
.wwc-calc-card,
.wt-calc-card,
.cov-calc-card,
.cost-calc-card,
.tcy-calc-card,
.cyd-calc-card,
.lsc-calc-card,
.calc-card,
.u-tool > .results-section,
.input-panel,
.results-panel,
.results-panel.gravel-result,
.cov-input-panel,
.cov-result-panel,
.cost-input-panel,
.cost-result-panel {
  margin: 0 !important;
  border: 1px solid var(--u-line) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.sgc-calc-card, .crc-calc-card, .fpc-calc-card, .gdc-calc-card,
.gbc-calc-card, .wwc-calc-card, .lsc-calc-card, .calc-card, .u-tool > .results-section {
  padding: 14px 16px !important;
}

/* project/material pages: the dark results block becomes a light panel */
.u-tool > .results-section {
  max-width: none !important;
  color: var(--u-ink) !important;
}
.u-tool > .results-section .results-header h2 { color: var(--u-ink) !important; font: 800 17px/1.3 var(--u-font) !important; margin: 0 !important; }
.u-tool > .results-section .result-card { background: #fafbff !important; border: 1px solid var(--u-line) !important; color: var(--u-ink) !important; }
.u-tool > .results-section .result-card.primary { background: var(--u-accent) !important; border-color: var(--u-accent) !important; color: #fff !important; }
.u-tool > .results-section .result-card.primary .rc-label,
.u-tool > .results-section .result-card.primary .rc-sub { color: rgba(255,255,255,.82) !important; }
.u-tool > .results-section .rc-value { color: inherit !important; }

/* the section heading above a tool card is redundant next to the H1 */
.sgc-calc-section-title,
.crc-calc-section-title,
.fpc-calc-section-title,
.gdc-calc-section-title,
.gbc-calc-section-title,
.wwc-calc-section-title,
.lsc-calc-section-title { display: none !important; }

.sgc-calc-card-title,
.crc-calc-card-title,
.gbc-calc-card-title,
.wwc-calc-card-title,
.calc-card-title {
  margin: 0 0 14px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid var(--u-line) !important;
  color: var(--u-ink) !important;
  font: 800 17px/1.3 var(--u-font) !important;
  letter-spacing: -.3px;
}

/* inner grids stay flat on the shell */
.calculator-grid,
.cov-calc-body,
.cost-calc-body,
.wt-calc-body,
.calc-body {
  margin: 0 !important;
  gap: 16px !important;
  background: transparent !important;
}
.calculator-grid { display: grid !important; grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
.cov-calc-body, .cost-calc-body { gap: 0 !important; }

.calc-intro {
  margin: 0 0 14px !important;
  padding: 0 4px 12px !important;
  border-bottom: 1px solid var(--u-line) !important;
  background: transparent !important;
}
.calc-intro h2 { font: 800 17px/1.3 var(--u-font) !important; color: var(--u-ink) !important; letter-spacing: -.3px !important; }
.calc-intro .section-no { font: 800 24px/1 var(--u-font) !important; color: var(--u-accent-line) !important; }
.calc-intro .kicker { color: var(--u-accent) !important; }

/* ── Controls ─────────────────────────────────────────────── */
input[type="number"],
input[type="text"],
select,
.dimension-grid input,
.money input {
  font-family: var(--u-font) !important;
}

input[type="number"]:focus,
input[type="text"]:focus,
select:focus {
  outline: none;
  border-color: var(--u-accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 82, 232, .16) !important;
}

.unit-switch button.active,
.wt-mode-toggle button.active,
.tcy-mode-toggle button.active,
.cyd-mode-toggle button.active {
  background: #fff !important;
  color: var(--u-accent) !important;
  box-shadow: 0 1px 4px rgba(14, 16, 32, .1) !important;
}

.shape-options button.active,
.sgc-chip.active, .crc-chip.active, .fpc-chip.active,
.gdc-chip.active, .gbc-chip.active, .wwc-chip.active,
.tcy-unit-select button.active,
.cyd-unit-select button.active {
  border-color: var(--u-accent) !important;
  background: var(--u-accent-soft) !important;
  color: var(--u-accent) !important;
  box-shadow: none !important;
}

.calculate-button,
.copy-btn,
.primary-btn,
button.sgc-calc-btn, button.crc-calc-btn,
.cta-button {
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--u-accent) !important;
  color: #fff !important;
  font: 700 14px/1 var(--u-font) !important;
  cursor: pointer;
}
.calculate-button:hover,
.copy-btn:hover,
.primary-btn:hover { background: var(--u-accent-dark) !important; }

/* ── Sections below the fold ──────────────────────────────── */
main > section h2,
main > div > section h2 {
  font-family: var(--u-font) !important;
  letter-spacing: -.9px;
}

footer { background: var(--u-ink) !important; }
footer .brand, footer a, footer p { color: #c7cad6 !important; }

/* ── One screen: hero + tool card inside the first viewport ── */
@media (min-width: 901px) {
  .u-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - 60px);
    padding-bottom: 8px;
  }
}

/* short laptops — trim the hero so the card still clears the fold */
@media (min-width: 901px) and (max-height: 860px) {
  .tool-hero, .article-hero, .tcy-title-block, .cyd-title-block, body .hero { padding: 20px 24px 16px !important; }
  .tool-hero h1, .tcy-title-block h1, .cyd-title-block h1, body .hero h1 { font-size: clamp(28px, 3.2vw, 38px) !important; margin-bottom: 10px !important; }
  .tool-hero > p:not(.tool-badge), .hero-sub, .tcy-subtitle, .cyd-subtitle, body .hero > p { font-size: 14px !important; }
  .tool-badge, .hero-badge, .eyebrow { margin-bottom: 8px !important; }
  .hero-stats, .hero-proof, .helper-pill { margin-top: 10px !important; }
  .calculator-wrap, .calc-card, [class$="-calc-card"] { padding: 14px !important; }
}

@media (min-width: 901px) and (max-height: 720px) {
  .tool-hero, .article-hero, .tcy-title-block, .cyd-title-block, body .hero { padding: 14px 24px 12px !important; }
  .tool-hero h1, .tcy-title-block h1, .cyd-title-block h1, body .hero h1 { font-size: 30px !important; letter-spacing: -1.2px !important; }
  .hero-stats, .hero-proof, .helper-pill { display: none !important; }
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .topbar { height: auto !important; min-height: 56px; }
  .tool-hero, .article-hero, .trust-hero, .partners-hero,
  .tcy-title-block, .cyd-title-block, body .hero { padding: 24px 18px 18px !important; }
  .tool-hero h1, body .hero h1 { font-size: 28px !important; letter-spacing: -1.1px !important; }
  .tool-hero > p:not(.tool-badge), .hero-sub, body .hero > p { font-size: 14px !important; }
  .calculator-wrap, .calc-card, [class$="-calc-card"] { border-radius: 18px !important; padding: 12px !important; }
  .calculator-grid, .cov-calc-body, .cost-calc-body { grid-template-columns: 1fr !important; }
  .sgc-calc-section, .crc-calc-section, .fpc-calc-section, .gdc-calc-section,
  .gbc-calc-section, .wwc-calc-section, .wt-calc-section, .cov-calc-wrap,
  .cost-calc-wrap, .tcy-calc-section, .cyd-calc-section, .calc-shell { padding: 0 14px 20px !important; }
}

/* ── Density inside the tool card: keep it to one screen ──── */
.u-tool .result-cards,
.sgc-results, .crc-results, .fpc-results, .gdc-results,
.gbc-results, .wwc-results, .wt-results {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.u-tool .result-card,
.sgc-result-card, .crc-result-card, .fpc-result-card,
.gdc-result-card, .gbc-result-card, .wwc-result-card {
  padding: 11px 12px !important;
  border-radius: 12px !important;
}

.u-tool .rc-value,
.sgc-result-card .result-value, .crc-result-card .result-value,
.fpc-result-card .result-value, .gdc-result-card .result-value,
.gbc-result-card .result-value, .wwc-result-card .result-value {
  font: 800 23px/1.05 var(--u-font) !important;
  letter-spacing: -.7px !important;
}
.u-tool .rc-label, .u-tool .rc-sub,
.sgc-result-card .result-label, .crc-result-card .result-label,
.fpc-result-card .result-label, .gdc-result-card .result-label,
.gbc-result-card .result-label, .wwc-result-card .result-label {
  font-size: 10.5px !important;
  line-height: 1.3 !important;
}

/* trim the vertical rhythm of the form column */
.sgc-field, .crc-field, .fpc-field, .gdc-field, .gbc-field, .wwc-field { margin-bottom: 9px !important; }
.sgc-input-grid, .crc-input-grid, .fpc-input-grid, .gdc-input-grid,
.gbc-input-grid, .wwc-input-grid { gap: 9px !important; margin-bottom: 9px !important; }
.u-tool .form-row { margin-bottom: 9px !important; }
.u-tool .calc-divider { margin: 12px 0 !important; }
.u-tool .material-label { margin-bottom: 6px !important; }
.u-tool .preset-row, .u-tool .material-options, .u-tool .density-pills { gap: 7px !important; margin-bottom: 9px !important; }
.u-tool .calc-subtitle { margin-bottom: 10px !important; font-size: 12px !important; }
.u-tool .calc-btn { margin-top: 4px !important; }

.field-row { margin-bottom: 13px !important; }
.dimension-grid { margin-bottom: 12px !important; }
.select-field { margin-bottom: 12px !important; }

/* the shell never pushes the page sideways */
.u-tool > * { min-width: 0; }

/* ── Stacked converters → two columns inside the shell ────── */
.wt-calc-body,
.tcy-calc-card,
.cyd-calc-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

.u-col { min-width: 0; }

.wt-results, .tcy-results, .cyd-results {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  align-content: start !important;
}

.tcy-divider, .cyd-divider { display: none !important; }

.wt-result-card, .tcy-result-card, .cyd-result-card {
  padding: 11px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--u-line) !important;
  background: #fff !important;
}
.wt-result-card.primary { background: var(--u-accent) !important; border-color: var(--u-accent) !important; }
.wt-result-card.primary * { color: #fff !important; }
.tcy-result-card .rc-value, .cyd-result-card .rc-value, .wt-result-card .result-value {
  font: 800 23px/1.05 var(--u-font) !important; letter-spacing: -.7px !important;
}
.tcy-formula-box, .cyd-formula-box { margin-top: 12px !important; }

/* ── Shell density pass — everything inside the tool card ──── */
.u-shell { font-size: 13px; }

.u-shell label,
.u-shell .material-label,
.u-shell .sgc-field > label, .u-shell .crc-field > label,
.u-shell .fpc-field > label, .u-shell .gdc-field > label,
.u-shell .gbc-field > label, .u-shell .wwc-field > label {
  margin-bottom: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .2px;
}

.u-shell input[type="number"],
.u-shell input[type="text"],
.u-shell select {
  height: 34px !important;
  min-height: 0 !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  font-size: 13.5px !important;
}
.u-shell .dimension-grid input, .u-shell .money input { height: 34px !important; }

.u-shell button { font-family: var(--u-font) !important; }
.u-shell .sgc-project-tabs button, .u-shell .crc-project-tabs button,
.u-shell .fpc-project-tabs button, .u-shell .gdc-project-tabs button,
.u-shell .gbc-project-tabs button, .u-shell .wwc-project-tabs button,
.u-shell .preset-btn, .u-shell .shape-tab,
.u-shell .sgc-shape-tabs button, .u-shell .crc-shape-tabs button,
.u-shell .fpc-shape-tabs button, .u-shell .gdc-shape-tabs button,
.u-shell .gbc-shape-tabs button, .u-shell .wwc-shape-tabs button {
  padding: 8px 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.u-shell .shape-options button { height: 36px !important; }

.u-shell .sgc-recommended, .u-shell .crc-recommended, .u-shell .fpc-recommended,
.u-shell .gdc-recommended, .u-shell .gbc-recommended, .u-shell .wwc-recommended,
.u-shell .depth-rec {
  margin-top: 7px !important;
  padding: 7px 10px !important;
  font-size: 11.5px !important;
}

.u-shell .sgc-detail, .u-shell .crc-detail, .u-shell .fpc-detail,
.u-shell .gdc-detail, .u-shell .gbc-detail, .u-shell .wwc-detail { margin-top: 12px !important; }
.u-shell .sgc-detail-tabs, .u-shell .crc-detail-tabs, .u-shell .fpc-detail-tabs,
.u-shell .gdc-detail-tabs, .u-shell .gbc-detail-tabs, .u-shell .wwc-detail-tabs { margin-bottom: 10px !important; }
.u-shell .sgc-detail-list, .u-shell .crc-detail-list, .u-shell .fpc-detail-list,
.u-shell .gdc-detail-list, .u-shell .gbc-detail-list, .u-shell .wwc-detail-list { font-size: 12px !important; }
.u-shell .sgc-detail-list > *, .u-shell .crc-detail-list > *, .u-shell .fpc-detail-list > *,
.u-shell .gdc-detail-list > *, .u-shell .gbc-detail-list > *, .u-shell .wwc-detail-list > * { padding: 5px 0 !important; }
.u-shell .sgc-formula-box, .u-shell .crc-formula-box, .u-shell .fpc-formula-box,
.u-shell .gdc-formula-box, .u-shell .gbc-formula-box, .u-shell .wwc-formula-box {
  margin-top: 10px !important; padding: 10px 12px !important; font-size: 11.5px !important;
}

.u-shell .material-card, .u-shell .sgc-material-card-display,
.u-shell .material-options > * { padding: 9px 11px !important; font-size: 12px !important; }

.u-shell .waste-row, .u-shell .price-row { margin-bottom: 10px !important; }
.u-shell .results-header { margin-bottom: 10px !important; }
.u-shell .copy-btn, .u-shell .calc-btn { height: 40px !important; font-size: 13px !important; }

/* the shell's two columns */
.u-col { display: block; min-width: 0; }
.fpc-calc-card, .gdc-calc-card, .lsc-calc-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* ── Final trim so the whole tool clears the fold ─────────── */
.u-shell .calc-card-title { margin-bottom: 10px !important; padding-bottom: 9px !important; font-size: 16px !important; }
.u-shell .sgc-calc-card-title, .u-shell .crc-calc-card-title,
.u-shell .gbc-calc-card-title, .u-shell .wwc-calc-card-title { margin-bottom: 10px !important; padding-bottom: 9px !important; font-size: 16px !important; }

.u-shell .material-label { font-size: 10.5px !important; letter-spacing: .5px; margin-bottom: 5px !important; }
.u-shell .form-group label { font-size: 10.5px !important; }
.u-shell .waste-header { font-size: 11px !important; margin-bottom: 4px !important; }
.u-shell .waste-ticks { margin-top: 2px !important; }
.u-shell input[type="range"] { margin: 4px 0 !important; }
.u-shell .depth-rec { margin: 7px 0 !important; padding: 7px 10px !important; font-size: 11px !important; line-height: 1.4 !important; }
.u-shell .calc-divider { margin: 10px 0 !important; }

.u-shell .results-note, .u-shell .result-note { margin-top: 10px !important; padding: 9px 11px !important; font-size: 11px !important; }
.u-shell .wt-density-display, .u-shell .tcy-density-display, .u-shell .cyd-density-display { padding: 9px 11px !important; margin: 8px 0 !important; }
.u-shell .wt-input-row, .u-shell .tcy-input-row, .u-shell .cyd-input-row { gap: 10px !important; margin-bottom: 10px !important; }
.u-shell .wt-mode-toggle, .u-shell .tcy-mode-toggle, .u-shell .cyd-mode-toggle { margin-bottom: 10px !important; }
.u-shell .wt-calc-header, .u-shell .cov-calc-header, .u-shell .cost-calc-header { padding: 12px 16px !important; }
.u-shell .wt-calc-header p, .u-shell .cov-calc-header p, .u-shell .cost-calc-header p { margin: 2px 0 0 !important; font-size: 12px !important; }
.u-shell .wt-calc-body { padding: 14px 16px !important; }
.u-shell .cov-input-panel, .u-shell .cov-result-panel,
.u-shell .cost-input-panel, .u-shell .cost-result-panel { padding: 14px 16px !important; }

/* project pages: their own amber/dark accents fold into the system */
.u-shell .preset-btn.active, .u-shell .shape-tab.active,
.u-shell .material-option.active, .u-shell .density-pill.active,
.u-shell .gravel-option.active, .u-shell .size-btn.active {
  border-color: var(--u-accent) !important;
  background: var(--u-accent-soft) !important;
  color: var(--u-accent) !important;
}
.u-shell .depth-rec, .u-shell .overhang-note, .u-shell .note-box {
  border-left-color: var(--u-accent) !important;
  background: var(--u-accent-soft) !important;
  color: var(--u-ink-2) !important;
}
.u-shell input[type="range"] { accent-color: var(--u-accent) !important; }

/* ── Remove what the H1 already says ──────────────────────── */
@media (min-width: 901px) {
  .u-shell .calc-card-title,
  .u-shell .calc-subtitle,
  .u-shell .cov-calc-header,
  .u-shell .cost-calc-header,
  .u-shell .wt-calc-header { display: none !important; }

  .helper-pill { display: none !important; }

  .calc-intro { padding: 0 4px 10px !important; margin-bottom: 12px !important; }
  .calc-intro .section-no, .calc-intro .kicker { display: none !important; }
  .calc-intro h2 { font-size: 16px !important; }
}

/* the input/results panels breathe less */
.u-shell .input-panel, .u-shell .results-panel,
.u-shell .results-panel.gravel-result { min-height: 0 !important; padding: 16px 18px !important; }
.u-shell .result-breakdown div { padding: 6px 4px !important; }
.u-shell .result-detail { padding: 10px 0 !important; }
.u-shell .gravel-result .fine-print { margin: 10px 0 12px !important; }
.u-shell .primary-result strong { font-size: 30px !important; }
.u-shell .cov-coverage-row, .u-shell .cov-result-row, .u-shell .cost-result-row { padding: 8px 0 !important; }
.u-shell .cov-result-hero, .u-shell .cost-result-hero { padding: 14px !important; }

/* shorter viewports: trim harder */
@media (min-width: 901px) and (max-height: 900px) {
  .tool-hero, .article-hero, .tcy-title-block, .cyd-title-block, body .hero { padding: 12px 24px 10px !important; }
  .tool-hero h1, .tcy-title-block h1, .cyd-title-block h1, body .hero h1 {
    font-size: clamp(26px, 2.9vw, 36px) !important; margin-bottom: 8px !important; letter-spacing: -1.2px !important;
  }
  .tool-hero > p:not(.tool-badge), .hero-sub, .tcy-subtitle, .cyd-subtitle, body .hero > p { font-size: 13.5px !important; }
  .tool-badge, .hero-badge, .eyebrow { margin-bottom: 4px !important; font-size: 10px !important; }
  .hero-stats, .hero-proof { margin-top: 8px !important; }
  .hero-stat { padding: 5px 11px !important; font-size: 11px !important; }
  .breadcrumbs, .wt-breadcrumbs, .tcy-breadcrumbs, .cyd-breadcrumbs { margin-top: 8px !important; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .hero-stats, .hero-proof { display: none !important; }
  .tool-hero > p:not(.tool-badge), .hero-sub, .tcy-subtitle, .cyd-subtitle, body .hero > p { font-size: 13px !important; }
  .u-shell input[type="number"], .u-shell input[type="text"], .u-shell select { height: 32px !important; }
  .u-shell .u-tool, .u-shell { padding: 10px !important; }
}

/* ── Legacy per-page accents fold into the one accent ─────── */
:root {
  /* project pages */
  --dk-btn: #5b52e8;   --dk-btn-dark: #4a41d6; --dk-light: #f5f4ff; --dk-border: #c3bdfb; --accent: #5b52e8;
  --br: #5b52e8;  --br-mid: #4a41d6; --br-btn: #5b52e8; --br-btn-dark: #4a41d6; --br-light: #f5f4ff; --br-border: #c3bdfb;
  --sh: #5b52e8;  --sh-mid: #4a41d6; --sh-btn: #5b52e8; --sh-btn-dark: #4a41d6; --sh-light: #f5f4ff; --sh-border: #c3bdfb;
  --pu: #5b52e8;  --pu-dark: #4a41d6; --pu-light: #f5f4ff; --pu-border: #c3bdfb;
  --gr: #5b52e8;  --gr-dark: #4a41d6; --gr-xdark: #3a32b8; --gr-light: #f5f4ff; --gr-border: #c3bdfb;
  --gc-green: #5b52e8; --gc-purple: #5b52e8;
}

/* ── Result panels stay readable on the light card ────────── */
.u-shell .results-panel,
.u-shell .results-panel.gravel-result { color: var(--u-ink-2) !important; }
.u-shell .results-panel *:not(.copy-btn):not(.copy-btn *) { color: var(--u-ink-2) !important; }
.u-shell .results-panel .result-label,
.u-shell .results-panel .result-detail > span,
.u-shell .results-panel .cost-card span,
.u-shell .results-panel .result-stack span { color: var(--u-accent) !important; }
.u-shell .results-panel .primary-result strong { color: var(--u-ink) !important; }
.u-shell .results-panel .cost-card,
.u-shell .results-panel .result-stack > div {
  border: 1px solid var(--u-line) !important;
  background: #f7f8ff !important;
}
.u-shell .results-panel .result-breakdown { border-color: var(--u-line) !important; }
.u-shell .copy-btn, .u-shell .copy-btn * { color: #fff !important; }
.u-shell .copy-btn { background: var(--u-accent) !important; }

/* sliders */
.u-shell input[type="range"]::-webkit-slider-thumb { background: var(--u-accent) !important; border-color: var(--u-accent) !important; }
.u-shell input[type="range"]::-moz-range-thumb { background: var(--u-accent) !important; border-color: var(--u-accent) !important; }

/* limestone page shares the family conventions */
.lsc-field { margin-bottom: 9px !important; }
.lsc-input-grid { gap: 9px !important; margin-bottom: 9px !important; }
.lsc-results { display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; }
.lsc-result-card { padding: 11px 12px !important; border-radius: 12px !important; }
.lsc-result-card .result-value { font: 800 23px/1.05 var(--u-font) !important; letter-spacing: -.7px !important; }
.lsc-chip.active, .lsc-shape-tabs button.active, .lsc-project-tabs button.active, .lsc-unit-toggle button.active {
  border-color: var(--u-accent) !important; background: var(--u-accent-soft) !important; color: var(--u-accent) !important;
}
.u-shell .lsc-recommended { margin-top: 7px !important; padding: 7px 10px !important; font-size: 11.5px !important; }

/* ── Mobile: every shell collapses to a single column ─────── */
@media (max-width: 900px) {
  .u-tool.u-split,
  .sgc-calc-section, .crc-calc-section, .fpc-calc-section, .gdc-calc-section,
  .gbc-calc-section, .wwc-calc-section, .lsc-calc-section,
  .wt-calc-body, .tcy-calc-card, .cyd-calc-card,
  .fpc-calc-card, .gdc-calc-card, .lsc-calc-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .u-shell .wt-results, .u-shell .tcy-results, .u-shell .cyd-results,
  .u-shell .lsc-results, .u-shell .sgc-results, .u-shell .crc-results,
  .u-shell .fpc-results, .u-shell .gdc-results, .u-shell .gbc-results,
  .u-shell .wwc-results, .u-shell .result-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .u-shell, .u-shell * { max-width: 100%; }
  .u-shell .preset-row, .u-shell .material-options,
  .u-shell .density-pills, .u-shell .shape-tabs { flex-wrap: wrap !important; }
  .u-shell .form-row, .u-shell .form-row.triple { grid-template-columns: minmax(0,1fr) !important; }
}

/* hero decoration never survives the reset */
.tool-hero::before, .tool-hero::after,
body .hero::before, body .hero::after,
.article-hero::before, .article-hero::after,
.trust-hero::before, .trust-hero::after { display: none !important; }
.hero-inner, .hero-left, .hero-copy { background: transparent !important; background-image: none !important; }