/* ==========================================================================
   AllEasyCalc — design system
   Identity: engineer's graph paper. White ground, green ink, amber signal,
   serif headlines, mono numerals. One stylesheet, no framework.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-400-700.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('/assets/fonts/instrument-sans-400-700i.woff2') format('woff2');
  font-weight: 400 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk-var.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --paper:      #ffffff;
  --ink:        #17211b;
  --ink-2:      #51615a;
  --ink-3:      #7d8b85;
  --hairline:   #e2e9e4;
  --hairline-2: #ccd7d0;
  --grid-line:  #edf2ee;
  --grid-accent:#dfe8e2;
  --wash:       #f5f8f6;
  --wash-green: #e9f3ed;
  --green:      #0b6b48;
  --green-deep: #084f36;
  --green-soft: #2e8f6a;
  --amber:      #9a5b00;
  --amber-bg:   #fdf3e3;
  --amber-line: #eccf9e;
  --chart-amber:#d9942b;
  --slate:      #3d5a6e;
  --danger:     #a33528;
  --danger-bg:  #fbeeec;
  --danger-line:#ecc4bd;

  --font-sans:    'Instrument Sans', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'Schibsted Grotesk', 'Instrument Sans', system-ui, sans-serif;

  --r-s: 6px;
  --r-m: 10px;
  --r-l: 14px;
  --shadow-1: 0 1px 2px rgba(23, 33, 27, .05);
  --shadow-2: 0 10px 30px rgba(23, 33, 27, .10);
  --wrap-max: 1180px;
  --head-h: 64px;

  --grid-paper:
    linear-gradient(var(--grid-accent) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-accent) 1px, transparent 1px),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  --grid-paper-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 18px); }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--grid-paper);
  background-size: var(--grid-paper-size);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
::selection { background: #cfe8db; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }
kbd {
  font-size: .72em; font-weight: 600;
  border: 1px solid var(--hairline-2); border-bottom-width: 2px;
  border-radius: 4px; padding: .1em .45em; background: var(--paper); color: var(--ink-2);
}

.wrap { max-width: var(--wrap-max); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 200;
  background: var(--green); color: #fff; padding: 10px 16px; border-radius: var(--r-s);
  transition: top .15s ease;
}
.skip-link:focus { top: 12px; color: #fff; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }

/* ------------------------------------------------------------- typography */
h1, .h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.3vw, 3rem); line-height: 1.08; letter-spacing: -.022em;
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.45rem, 2.7vw, 1.85rem); line-height: 1.18; letter-spacing: -.014em;
}
h3, .h3 { font-size: 1.13rem; font-weight: 600; line-height: 1.3; }
.lede { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-2); line-height: 1.55; }
.num { font-weight: 600; font-variant-numeric: tabular-nums; }

/* Solid surface for text content sitting on the page grid. */
.sheet {
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: var(--r-l); padding: clamp(20px, 4vw, 42px);
}
.page-sheet { margin-block: clamp(22px, 4.5vw, 52px); }
.sheet .page-head-simple { padding-block: 0 6px; }
.sheet .legal-prose { padding-block: 14px 0; }
.sheet .all-head { padding-block: 0 6px; }

.prose { max-width: 68ch; }
/* Full-width copy on standalone pages (about, custom calculators): the sheet
   itself bounds the line length, so let the text use the whole section. */
.page-sheet .prose, .page-sheet .page-head-simple .lede { max-width: none; }
.prose p, .prose ul, .prose ol { margin-block: 0 1.1em; }
.prose h2 { margin: 2.2em 0 .55em; }
.prose h3 { margin: 1.8em 0 .45em; }
.prose li { margin-block: .3em; }
.prose ul { padding-left: 1.2em; list-style: none; }
.prose ul > li { position: relative; padding-left: .4em; }
.prose ul > li::before {
  content: ''; position: absolute; left: -1em; top: .66em;
  width: .55em; height: 2px; background: var(--green);
}
.prose ol { padding-left: 1.4em; }
.prose table { margin-block: .4em 1.4em; }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-s); border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; line-height: 1.2; text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
  min-height: 44px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-deep); color: #fff; }
.btn-ghost { background: var(--paper); color: var(--ink); border-color: var(--hairline-2); }
.btn-ghost:hover { border-color: var(--ink-2); color: var(--ink); }
.btn-small { padding: 7px 14px; min-height: 36px; font-size: .88rem; }
.link-btn {
  background: none; border: 0; padding: 0; color: var(--green);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  font-size: inherit;
}
.link-btn:hover { color: var(--green-deep); }

/* ----------------------------------------------------------------- header */
.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.site-head-row { display: flex; align-items: center; gap: 26px; height: var(--head-h); }

/* Mega menu */
.nav-mega { display: inline-flex; align-items: center; }
.nav-mega > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-mega > a svg { transition: transform .15s ease; }
.mega-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--paper); border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-mega:hover .mega-panel, .nav-mega:focus-within .mega-panel, .nav-mega.is-open .mega-panel {
  opacity: 1; visibility: visible; transform: none;
}
.nav-mega:hover > a svg, .nav-mega.is-open > a svg { transform: rotate(180deg); }
.mega-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 22px;
  padding-block: 26px 20px;
}
.mega-cat {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--ink); text-decoration: none; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--hairline);
}
.mega-cat:hover { color: var(--green); }
.mega-col ul { list-style: none; margin: 0; padding: 0; }
.mega-col li { margin: 0 0 2px; }
.mega-col li a {
  display: block; padding: 5px 8px; margin-left: -8px; border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: .92rem;
}
.mega-col li a:hover { background: var(--wash); color: var(--green); }
.mega-foot { grid-column: 1 / -1; border-top: 1px solid var(--hairline); padding-top: 14px; font-size: .92rem; }
.mega-foot a { text-decoration: none; font-weight: 600; }
.mobile-nav .mobile-nav-sub { padding-left: 26px; font-size: .95rem; color: var(--ink-2); }
.tool-bar {
  position: sticky; top: var(--head-h); z-index: 99;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hairline);
}
.tool-bar-row {
  display: flex; align-items: center; gap: 14px; height: 44px;
  overflow-x: auto; scrollbar-width: none;
}
.tool-bar-row::-webkit-scrollbar { display: none; }
.tool-bar-name {
  font-size: .85rem; font-weight: 600; color: var(--ink-2);
  white-space: nowrap; flex: 0 0 auto;
}
.tool-bar-btns { display: flex; gap: 8px; margin-left: auto; flex: 0 0 auto; }
.tool-bar-btns .btn { white-space: nowrap; gap: 6px; }
.tool-bar-btns .btn svg { flex: none; opacity: .8; }
html:has(.tool-bar) { scroll-padding-top: calc(var(--head-h) + 62px); }
@media (max-width: 700px) { .tool-bar-name { display: none; } .tool-bar-btns { margin-left: 0; } }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-name { font-weight: 500; font-size: 1.14rem; letter-spacing: -.015em; }
.brand-name b { color: var(--green); font-weight: 700; }
.site-nav { display: flex; gap: 22px; margin-left: 8px; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; padding: 6px 2px; }
.site-nav a:hover { color: var(--ink); }
.head-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.search-launch {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--hairline-2); background: var(--wash); color: var(--ink-2);
  border-radius: var(--r-s); padding: 9px 14px 9px 12px; font-size: .9rem; min-height: 40px;
  transition: border-color .15s ease, color .15s ease;
}
.search-launch:hover { border-color: var(--ink-3); color: var(--ink); }
.search-launch kbd { background: var(--paper); }
.head-bug { padding: 9px 11px; min-height: 40px; color: var(--ink-2); }
.head-bug:hover { color: var(--ink); }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; color: var(--ink); }
.mobile-nav { display: none; }

@media (max-width: 820px) {
  .site-nav, .head-suggest { display: none; }
  .nav-toggle { display: block; }
  .search-launch span { display: none; }
  .search-launch { padding: 9px 12px; }
  .mobile-nav[data-mobile-nav]:not([hidden]) {
    display: flex; flex-direction: column; border-top: 1px solid var(--hairline);
    background: var(--paper); padding: 8px clamp(18px, 4vw, 32px) 16px;
  }
  .mobile-nav a { padding: 12px 0; text-decoration: none; color: var(--ink); font-weight: 500; border-bottom: 1px solid var(--hairline); }
  .mobile-nav a:last-child { border-bottom: 0; }
}

/* ----------------------------------------------------------------- footer */
.site-foot { border-top: 1px solid var(--hairline); margin-top: clamp(56px, 9vw, 110px); background: var(--wash); }
.foot-grid {
  display: grid; gap: 36px; padding-block: 48px 36px;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
}
.foot-brand p { color: var(--ink-2); font-size: .93rem; margin-top: 14px; max-width: 34ch; }
.foot-col h2 {
  font-family: var(--font-sans); font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.foot-col li { margin: 0 0 12px; font-size: .93rem; }
.foot-col a, .foot-col .link-btn { color: var(--ink-2); text-decoration: none; font-size: .93rem; text-align: left; }
.foot-col a:hover, .foot-col .link-btn:hover { color: var(--green); text-decoration: underline; }
.foot-more { font-weight: 600; color: var(--green) !important; }
.cu-select {
  appearance: none; -webkit-appearance: none;
  font: 600 .78rem/1 var(--font-sans); color: var(--ink-2);
  background: var(--wash) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5"><path d="M1 1l3 3 3-3" fill="none" stroke="%2317211B" stroke-width="1.4" stroke-linecap="round"/></svg>') no-repeat right 8px center;
  border: 1px solid var(--hairline); border-radius: 8px;
  padding: 6px 22px 6px 9px; max-width: 132px; cursor: pointer;
}
.cu-select:hover { border-color: var(--ink-3); }
.cu-select:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.foot-col-wide { grid-column: span 2; }
.foot-col-wide ul { columns: 2; column-gap: 32px; }
.foot-col-wide li { break-inside: avoid; }
.foot-all { margin-top: 14px; font-size: .93rem; }
@media (max-width: 540px) {
  .foot-col-wide { grid-column: auto; }
  .foot-col-wide ul { columns: 1; }
}
.foot-legal {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--hairline); padding-block: 18px 22px;
  color: var(--ink-3); font-size: .85rem;
}
.foot-legal p { margin: 0; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------------------------------------------------------------- dialogs */
dialog { border: 0; padding: 0; background: transparent; }
dialog::backdrop { background: rgba(23, 33, 27, .42); backdrop-filter: blur(2px); }
.search-dialog, .suggest-dialog {
  width: min(640px, calc(100vw - 32px));
  margin: clamp(24px, 12vh, 120px) auto auto;
  background: var(--paper); border-radius: var(--r-l);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-2);
}
.search-box {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--hairline); color: var(--ink-2);
}
.search-box input {
  flex: 1; border: 0; outline: none; background: none;
  font-size: 1.08rem; color: var(--ink); min-width: 0;
}
.dialog-x {
  background: none; border: 1px solid var(--hairline-2); border-radius: 4px;
  color: var(--ink-3); font-size: .72rem; font-weight: 600; padding: 3px 8px;
}
.dialog-x:hover { color: var(--ink); border-color: var(--ink-3); }
.search-results { max-height: min(50vh, 430px); overflow-y: auto; padding: 8px; }
.search-empty { padding: 28px 18px; color: var(--ink-2); text-align: center; font-size: .95rem; }
.search-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 11px 12px; border: 0; border-radius: var(--r-s); background: none;
  text-decoration: none; color: var(--ink);
}
.search-item .si-name { display: block; font-weight: 600; font-size: .97rem; }
.search-item .si-blurb {
  display: block; color: var(--ink-3); font-size: .85rem; line-height: 1.45;
  white-space: normal; overflow-wrap: anywhere;
}
.search-item .si-text { min-width: 0; flex: 1; }
.search-item.is-hot, .search-item:hover { background: var(--wash-green); }
.badge {
  font-size: .68rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; white-space: nowrap;
}
.badge-live { color: var(--green); }
.badge-soon { color: var(--ink-3); }
.badge-cat { color: var(--ink-3); }
.search-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; border-top: 1px solid var(--hairline);
  color: var(--ink-3); font-size: .82rem;
}
.suggest-dialog form { padding: 22px 24px 24px; }
.dialog-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.dialog-head h2 { font-size: 1.45rem; }
.dialog-sub { color: var(--ink-2); font-size: .95rem; margin: 6px 0 18px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ------------------------------------------------------------------ forms */
.field { margin-block: 0 16px; }
/* Lay a run of SMALL fields (steppers, short numbers, compact selects) out in
   columns instead of a full-width stack; collapses naturally on narrow
   screens. Wrap the .field blocks in one of these. */
.field-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: 22px; align-items: start; }
.field > label:not(.switch):not(.check), .field > .field-label {
  display: block; font-weight: 600; font-size: .92rem; margin-bottom: 7px;
}
.field > label.switch { margin-bottom: 7px; }
.label-opt { font-weight: 400; color: var(--ink-3); font-size: .84rem; }
.field-hint { color: var(--ink-3); font-size: .84rem; margin-top: 6px; }
input[type="text"], input[type="search"], input[type="email"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"],
input[type="tel"], input[type="url"], select, textarea {
  width: 100%; padding: 10px 13px; border-radius: var(--r-s);
  border: 1px solid var(--hairline-2); background: var(--paper);
  min-height: 44px; transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; line-height: 1.5; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(11, 107, 72, .16);
}
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"] { font-weight: 600; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2351615a' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 36px;
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: .84rem; margin-top: 6px; }
.form-error { color: var(--danger); font-size: .9rem; background: var(--danger-bg); border: 1px solid var(--danger-line); border-radius: var(--r-s); padding: 10px 12px; }
.form-ok { color: var(--green); font-weight: 600; margin-top: 14px; }

/* stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline-2); border-radius: var(--r-s); overflow: hidden; background: var(--paper); }
.stepper input {
  width: 74px; text-align: center; border: 0; border-radius: 0; min-height: 42px;
  border-inline: 1px solid var(--hairline); -moz-appearance: textfield; appearance: textfield;
}
.stepper input[max^="2000000"], .stepper input[max^="1000000"] { width: 104px; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { box-shadow: inset 0 0 0 2px var(--green); }
.stepper button {
  width: 42px; border: 0; background: var(--wash); color: var(--ink-2);
  font-size: 1.15rem; line-height: 1;
}
.stepper button:hover { background: var(--wash-green); color: var(--green); }
.stepper button:active { background: var(--wash-green); }

/* label row with an inline unit toggle */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; flex-wrap: wrap; }
@media (max-width: 480px) {
  .label-row .seg { flex-wrap: wrap; }
}
.field .label-row label, .field .label-row .field-label { margin-bottom: 0; }

/* segmented control */
.seg { display: inline-flex; padding: 3px; background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--r-m); gap: 2px; }
.seg-mini { padding: 2px; border-radius: 8px; }
.seg-mini span { padding: 4px 11px; min-height: 28px; font-size: .78rem; border-radius: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.seg span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: .9rem;
  color: var(--ink-2); min-height: 38px; transition: color .12s ease, background-color .12s ease;
  cursor: pointer; user-select: none;
}
.seg input:checked + span { background: var(--paper); color: var(--green); box-shadow: var(--shadow-1); border: 1px solid var(--hairline-2); }
.seg input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 1px; }
.seg-block { display: flex; }
.seg-block label { flex: 1; }
.seg-block span { width: 100%; }
@media (max-width: 480px) {
  .seg-block { flex-wrap: wrap; }
  .seg-block label { flex: 1 1 auto; }
}

/* option cards (radio cards) */
.option-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* custom-calculators example gallery */
/* Custom-calculators sales page */
.cc-band { padding-block: clamp(44px, 7vw, 80px); background: var(--paper); }
.cc-band-wash { background: var(--wash); }
.cc-hero { border-bottom: 1px solid var(--hairline); }
.cc-duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cc-duo img { width: 100%; height: auto; border-radius: var(--r-l); border: 1px solid var(--hairline); background: var(--paper); }
.cc-duo h2 { margin-bottom: 14px; }
.cc-duo .lede { margin-top: 16px; }
.cc-duo p + p { margin-top: 12px; }
.cc-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cc-cta-center { justify-content: center; }
.cc-link-row { margin-top: 18px; font-weight: 600; }
.cc-link-row a { text-decoration: none; }
.cc-link-row a:hover { text-decoration: underline; }
.cc-process-head { max-width: 760px; margin-bottom: 26px; }
.cc-process-head .lede { margin-top: 12px; }
.cc-process-img { width: 100%; height: auto; border-radius: var(--r-l); border: 1px solid var(--hairline); background: var(--paper); margin-bottom: 26px; }
.cc-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(20px, 4vw, 40px); }
.cc-process h3 { margin-bottom: 8px; }
.cc-process p { color: var(--ink-2); }
.cc-form-wrap { max-width: 640px; }
.cc-form-wrap .lede { margin-top: 12px; }
@media (max-width: 820px) {
  .cc-duo { grid-template-columns: 1fr; }
  .cc-duo-flip img { order: -1; }
}

.example-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.example-card {
  display: block; border: 1px solid var(--hairline); border-radius: var(--r-m);
  overflow: hidden; background: var(--paper); text-decoration: none; color: var(--ink);
  transition: border-color .12s ease;
}
.example-card img { display: block; width: 100%; height: auto; }
.example-card span { display: block; padding: 10px 14px; font-weight: 600; font-size: .92rem; border-top: 1px solid var(--hairline); }
.example-card:hover { border-color: var(--green-soft); }
.option-card {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 4px 12px;
  align-items: start; align-content: start; padding: 13px 15px; border: 1px solid var(--hairline-2);
  border-radius: var(--r-m); cursor: pointer; background: var(--paper);
  transition: border-color .12s ease, background-color .12s ease;
}
.option-card:hover { border-color: var(--ink-3); }
.option-card input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.option-card .oc-dot {
  grid-row: span 2; margin-top: 3px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--hairline-2); transition: border-color .12s ease, box-shadow .12s ease;
}
.option-card .oc-title { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.option-card .oc-desc { grid-column: 2 / -1; color: var(--ink-2); font-size: .82rem; line-height: 1.45; }
.option-card .oc-meta { font-size: .78rem; font-weight: 600; color: var(--ink-3); margin-top: 2px; }
.option-card:has(input:checked) { border-color: var(--green); background: var(--wash-green); }
.option-card:has(input:checked) .oc-dot { border-color: var(--green); box-shadow: inset 0 0 0 4.5px var(--green); }
.option-card:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }

/* checkbox + switch */
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--green); cursor: pointer; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: .92rem; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .sw {
  width: 42px; height: 24px; border-radius: 999px; background: var(--hairline-2);
  position: relative; transition: background-color .15s ease; flex: none;
}
.switch .sw::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-1);
  transition: transform .15s ease;
}
.switch input:checked + .sw { background: var(--green); }
.switch input:checked + .sw::after { transform: translateX(18px); }
.switch input:focus-visible + .sw { outline: 2px solid var(--green); outline-offset: 2px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--hairline-2); background: var(--paper); color: var(--ink-2);
  border-radius: var(--r-s); padding: 7px 14px; font-size: .87rem; font-weight: 600; min-height: 36px;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* tabs */
.tabs { border-bottom: 1px solid var(--hairline); display: flex; gap: 4px; }
.tab {
  border: 0; background: none; padding: 10px 14px 12px; font-weight: 600; font-size: .93rem;
  color: var(--ink-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--green); border-bottom-color: var(--green); }

/* sliders — the house control. Ruler ticks + mono value readout. */
.slider-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.slider-row .stepper, .slider-row .slider-value { grid-column: 2; grid-row: 1; }
.slider-shell { grid-column: 1; grid-row: 1; padding-top: 6px; }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 34px;
  background: transparent; margin: 0; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px;
  background: linear-gradient(to right, var(--green) 0%, var(--green) var(--fill, 50%), var(--hairline-2) var(--fill, 50%));
}
input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: var(--hairline-2); }
input[type="range"]::-moz-range-progress { height: 5px; border-radius: 999px; background: var(--green); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--green);
  margin-top: -8.5px; box-shadow: var(--shadow-1);
  transition: box-shadow .12s ease;
}
input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--paper); border: 2.5px solid var(--green); box-shadow: var(--shadow-1);
}
input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(11, 107, 72, .12); }
input[type="range"]:focus-visible { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(11, 107, 72, .22); }
input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 6px rgba(11, 107, 72, .22); }
input[type="range"].is-warn::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--chart-amber) 0%, var(--chart-amber) var(--fill, 50%), var(--hairline-2) var(--fill, 50%));
}
input[type="range"].is-warn::-webkit-slider-thumb { border-color: var(--chart-amber); }
input[type="range"].is-warn::-moz-range-progress { background: var(--chart-amber); }
input[type="range"].is-warn::-moz-range-thumb { border-color: var(--chart-amber); }
.slider-ticks {
  display: flex; justify-content: space-between; padding: 0 10px; margin-top: -4px;
}
.slider-ticks i { width: 1px; height: 7px; background: var(--hairline-2); }
.slider-ticks i:nth-child(5n+1) { height: 11px; background: var(--ink-3); }
.slider-scale {
  display: flex; justify-content: space-between; margin-top: 3px; padding: 0 2px;
  font-size: .76rem; color: var(--ink-3);
}
.slider-value {
  font-weight: 700; font-size: 1.02rem; white-space: nowrap;
  padding: 7px 12px; background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--r-s);
}
.slider-value small { color: var(--ink-3); font-weight: 500; font-size: .8em; }

/* composite imperial height input */
.duo { display: flex; gap: 10px; align-items: center; }
.duo .stepper input { width: 62px; }
.duo-unit { font-size: .84rem; color: var(--ink-3); }

/* fieldset groups */
fieldset { min-width: 0; }
.fgroup { border: 0; padding: 0; margin: 0 0 26px; }
.fgroup > legend {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; padding: 0;
}
.fgroup-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
/* Per-row controls (sign toggle, "Remove row") travel as one right-aligned
   cluster instead of wrapping independently mid-row. */
.row-tools { display: flex; align-items: end; gap: 12px 16px; margin-left: auto; flex-wrap: wrap; }
.row-tools .field { margin: 0; }
.row-tools .btn { white-space: nowrap; }

/* details / accordion */
details.acc { border: 1px solid var(--hairline); border-radius: var(--r-m); background: var(--paper); }
details.acc + details.acc { margin-top: 10px; }
details.acc > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px;
  cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: .97rem;
}
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary::after {
  content: ''; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .15s ease; margin-right: 4px;
}
details.acc[open] > summary::after { transform: rotate(225deg); margin-top: 6px; }
details.acc > .acc-body { padding: 0 16px 16px; color: var(--ink-2); }
details.acc > .acc-body > :first-child { margin-top: 0; }

/* --------------------------------------------------------------- callouts */
.callout {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  border-radius: var(--r-m); padding: 13px 15px; font-size: .92rem; line-height: 1.5;
}
.callout svg { margin-top: 2px; }
.callout strong { display: block; }
.callout-warn { background: var(--amber-bg); border: 1px solid var(--amber-line); color: #5d3f10; }
.callout-warn svg { color: var(--amber); }
.callout-danger { background: var(--danger-bg); border: 1px solid var(--danger-line); color: #6e2a20; }
.callout-danger svg { color: var(--danger); }
.callout-info { background: var(--wash); border: 1px solid var(--hairline); color: var(--ink-2); }
.callout-info svg { color: var(--slate); }

/* ------------------------------------------------------------------ cards */
.card { border: 1px solid var(--hairline); border-radius: var(--r-l); background: var(--paper); }
.card-pad { padding: clamp(18px, 3vw, 28px); }


/* the answer paper — results panel (plain surface; grids stay on section
   backgrounds only, never behind results or inputs) */
.answer-paper {
  position: relative; border: 1px solid var(--hairline-2); border-radius: var(--r-l);
  background-color: var(--paper);
  box-shadow: var(--shadow-1);
}
.paper-tab {
  position: absolute; top: -12px; left: 22px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  background: var(--ink); color: #fff; border-radius: 4px; padding: 4px 10px;
}
.paper-tab-green { background: var(--green); }

/* result blocks */
.result-hero { padding: clamp(20px, 3.4vw, 30px) clamp(18px, 3vw, 28px) 6px; }
.result-hero .rh-label { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.rh-value {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(2.5rem, 5.4vw, 3.4rem); line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rh-value small { font-size: .36em; font-weight: 600; color: var(--ink-3); letter-spacing: -.01em; }
.rh-sub { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: .9rem; color: var(--ink-2); }
.rh-sub .num { color: var(--ink); }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.stat {
  border: 1px solid var(--hairline); border-radius: var(--r-m); background: rgba(255,255,255,.8);
  padding: 12px 14px;
}
.stat .st-label { display: block; font-size: .78rem; color: var(--ink-3); font-weight: 600; }
.stat .st-value { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin-top: 2px; font-variant-numeric: tabular-nums; }
.stat .st-value small { font-size: .68em; color: var(--ink-3); font-weight: 500; }

/* ----------------------------------------------------------------- charts */
.chart { width: 100%; }
.chart svg { width: 100%; height: auto; }
.chart-title { font-weight: 600; font-size: .95rem; margin-bottom: 4px; }
.chart-sub { color: var(--ink-3); font-size: .82rem; margin-bottom: 10px; }
.chart-note { color: var(--ink-3); font-size: .8rem; margin-top: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-size: .84rem; color: var(--ink-2); }
.legend i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.legend i.dot { width: 10px; height: 10px; border-radius: 50%; }
.aec-tip {
  position: fixed; z-index: 300; pointer-events: none;
  background: var(--ink); color: #fff; border-radius: var(--r-s);
  font-size: .8rem; font-weight: 500; line-height: 1.5;
  padding: 7px 10px; box-shadow: var(--shadow-2); max-width: 240px;
  opacity: 0; transform: translateY(3px); transition: opacity .12s ease, transform .12s ease;
}
.aec-tip.is-on { opacity: 1; transform: none; }
.aec-tip .tip-head { color: #9fc4b2; }

/* tables */
.table-scroll { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-m); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.data-table caption { text-align: left; padding: 12px 14px 4px; font-weight: 600; }
.data-table th, .data-table td { padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--hairline); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table th {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-3); background: var(--wash);
  position: sticky; top: 0;
}
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.num { font-weight: 600; }
/* Dense variant for wide tables that must fit their column without scrolling. */
.data-table.dt-compact th, .data-table.dt-compact td { padding: 8px 8px; }
.data-table.dt-compact th { letter-spacing: .04em; }
.data-table tr.is-goal td { background: var(--wash-green); font-weight: 600; }
@media (max-width: 480px) {
  .data-table { font-size: .84rem; }
  .data-table th, .data-table td { padding: 8px 10px; }
}

/* --------------------------------------------------------------- homepage */
.hero {
  background: linear-gradient(180deg, var(--wash) 0%, #fff 100%);
  border-bottom: 1px solid var(--hairline);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: clamp(48px, 8vw, 104px);
}
.hero h1 { max-width: 13ch; }
.hero h1 em { white-space: nowrap; }
.hero .lede { margin-top: 18px; max-width: 46ch; }
.hero-search { margin-top: 30px; max-width: 520px; }
.hero-search form {
  display: flex; align-items: center; gap: 10px; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: var(--r-m); padding: 6px 6px 6px 16px;
  box-shadow: var(--shadow-1);
}
.hero-search svg { color: var(--ink-3); flex: none; }
.hero-search input { border: 0; outline: none; flex: 1; font-size: 1.02rem; min-width: 0; background: none; }
.hero-search .btn { flex: none; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.hero-chips .hc-label { font-size: .84rem; color: var(--ink-3); margin-right: 2px; }
.hero-chips a {
  text-decoration: none; font-size: .86rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--hairline-2); border-radius: var(--r-s); padding: 6px 13px; background: rgba(255,255,255,.75);
}
.hero-chips a:hover { border-color: var(--green); color: var(--green); }

/* the specimen card (hero, right column) */
.specimen { position: relative; }
.specimen .answer-paper { padding: 26px 24px 22px; }
.specimen .sp-title { font-weight: 600; font-size: .97rem; }
.specimen .sp-sub { color: var(--ink-3); font-size: .84rem; margin: 2px 0 18px; }
.specimen .sp-read { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.specimen .sp-big { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; font-variant-numeric: tabular-nums; }
.specimen .sp-per { color: var(--ink-3); font-size: .88rem; }
.specimen .sp-spark { margin-top: 14px; }
.specimen figcaption { margin-top: 14px; font-size: .8rem; color: var(--ink-3); }

.home-section { padding-block: clamp(44px, 7vw, 84px); background: var(--paper); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.section-head p { color: var(--ink-2); max-width: 52ch; margin-top: 8px; }

.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-tile {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-l); padding: 22px 20px 18px;
  background: var(--paper); transition: border-color .15s ease, box-shadow .15s ease;
}
.cat-tile:hover { border-color: var(--green); box-shadow: var(--shadow-1); color: var(--ink); }
.cat-tile .ct-count { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
.cat-tile h3 { font-size: 1.05rem; }
.cat-tile p { color: var(--ink-2); font-size: .87rem; line-height: 1.5; flex: 1; }
.cat-tile .ct-go { color: var(--green); font-weight: 600; font-size: .88rem; }
@media (max-width: 980px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .cat-grid { grid-template-columns: 1fr; } }

.featured { background: var(--wash); border-block: 1px solid var(--hairline); }
.featured-card {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
.featured-copy h2 { margin-bottom: 12px; }
.featured-copy p { color: var(--ink-2); max-width: 50ch; }
.featured-copy .btn { margin-top: 22px; }
.featured-copy .feat-points { margin-top: 18px; display: grid; gap: 8px; }
.featured-copy .feat-points li { display: flex; gap: 10px; align-items: start; font-size: .93rem; color: var(--ink-2); }
.featured-copy .feat-points svg { flex: none; margin-top: 4px; color: var(--green); }
.featured-demo .answer-paper { padding: 22px 20px 18px; }

.roadmap-strip { border-top: 1px solid var(--hairline); }
.roadmap-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  padding-block: clamp(30px, 5vw, 48px);
}
.roadmap-inner h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); max-width: 22ch; }
.roadmap-inner .rm-nums { color: var(--ink-2); font-size: .92rem; font-weight: 500; margin-top: 8px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .specimen { max-width: 460px; }
  .featured-card { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- calculator page */
.calc-hero { border-bottom: 1px solid var(--hairline); background: linear-gradient(180deg, var(--wash) 0%, #fff 100%); }
.calc-hero-inner { padding-block: clamp(30px, 5vw, 52px) clamp(22px, 4vw, 36px); }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; font-size: .84rem; color: var(--ink-3); margin-bottom: 14px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--green); text-decoration: underline; }
.crumbs .sep { color: var(--hairline-2); }
.calc-hero h1 { max-width: 30ch; }
.calc-hero .lede { margin-top: 12px; }
.calc-meta { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* Inputs first, results below — stacked single column. */
.calc-layout {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 36px); align-items: start; padding-block: clamp(26px, 4vw, 44px);
}
.calc-form-col .card-pad { padding-bottom: 12px; }
.calc-results-col .answer-paper { padding-bottom: 8px; }
.results-body {
  padding: 0 clamp(18px, 3vw, 28px) 18px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px;
}
.results-block { min-width: 0; }
.results-block h3 { font-size: .95rem; margin-bottom: 8px; }
.rb-span { grid-column: 1 / -1; }
.macro-cols { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px 28px; align-items: center; margin-top: 14px; }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 clamp(18px, 3vw, 28px) 20px; }
@media (max-width: 900px) {
  .results-body { grid-template-columns: minmax(0, 1fr); }
  .macro-cols { grid-template-columns: minmax(0, 1fr); }
}

/* Two-column field rows inside the form */
.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
@media (max-width: 820px) { .form-cols { grid-template-columns: minmax(0, 1fr); } }

/* Side-by-side layout for calculators with few inputs (stacks on mobile). */
.calc-duo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(22px, 3vw, 36px); align-items: start; padding-block: clamp(26px, 4vw, 44px);
}
.calc-duo .results-body { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .calc-duo { grid-template-columns: minmax(0, 1fr); } }

/* category tone helpers */
.tone-green { color: var(--green); }
.tone-amber { color: var(--amber); }
.tone-danger { color: var(--danger); }
.tone-slate { color: var(--slate); }
.data-table tr.is-current td { background: var(--wash-green); font-weight: 600; }

.formula {
  font-size: .95rem; font-weight: 600; line-height: 1.7;
  background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 14px 16px; white-space: pre-wrap; overflow-wrap: break-word; max-width: 100%;
}
.seo-copy { margin-block: clamp(6px, 1.5vw, 14px) clamp(26px, 4vw, 44px); }
.seo-copy .prose { margin-inline: 0; }
.copy-columns { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 5vw, 64px); align-items: start; }
.copy-columns .prose > :first-child { margin-top: 0; }
.copy-aside { position: sticky; top: calc(var(--head-h) + 18px); display: grid; gap: 14px; }
html:has(.tool-bar) .copy-aside { top: calc(var(--head-h) + 62px); }
.copy-aside .card { padding: 18px; }
.copy-aside h3 { font-size: .95rem; margin-bottom: 10px; }
.copy-aside li { margin-block: 7px; font-size: .9rem; }
@media (max-width: 980px) { .copy-columns { grid-template-columns: minmax(0, 1fr); } .copy-aside { position: static; } }

.faq details.acc > summary { font-size: 1rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.related-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-m); padding: 16px;
  transition: border-color .15s ease;
}
.related-card:hover { border-color: var(--green); color: var(--ink); }
.related-card .rc-name { font-weight: 600; font-size: .95rem; }
.related-card .rc-blurb { color: var(--ink-2); font-size: .84rem; line-height: 1.45; }
.related-card .badge { align-self: start; }
@media (max-width: 800px) { .related-grid { grid-template-columns: 1fr; } }

/* quote-demo cards (gallery + sales page): iconed, on a solid surface, firmer border */
.demo-card { background: var(--paper); border-color: #c3d1c8; box-shadow: 0 1px 3px rgba(23, 33, 27, .06); }
.demo-card:hover { border-color: var(--green); box-shadow: 0 3px 10px rgba(23, 33, 27, .09); }
.dc-head { display: flex; align-items: center; gap: 12px; }
.dc-icon { width: 48px; height: 48px; flex: none; border-radius: 8px; }

.disclaimer { color: var(--ink-3); font-size: .84rem; border-top: 1px solid var(--hairline); margin-top: clamp(30px, 5vw, 54px); padding-top: 18px; max-width: 74ch; }

/* --------------------------------------------------------------- all page */
.all-head { padding-block: clamp(36px, 6vw, 64px) 8px; }
.all-search { max-width: 460px; margin-top: 18px; }
.all-cat { padding-block: 26px; }
.all-cat h2 { margin-bottom: 4px; }
.all-subcat { margin-top: 22px; }
.all-subcat h3 { font-size: 1.02rem; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.all-subcat h3 a { color: inherit; text-decoration: none; }
.all-subcat h3 a:hover { color: var(--green); text-decoration: underline; }

/* Topic (subcategory) SEO pages */
.topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-block: 12px 6px; }
.topic-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 18px 20px; text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.topic-card:hover { border-color: var(--green-soft); box-shadow: var(--shadow-1); color: inherit; }
.topic-card p { color: var(--ink-2); font-size: .92rem; line-height: 1.5; flex: 1; }
.topic-card-go { color: var(--green); font-weight: 600; font-size: .9rem; }
.topic-copy { margin-top: 38px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.topic-siblings { margin-top: 38px; }
.topic-siblings h2 { margin-bottom: 14px; }
.topic-sibling-row { display: flex; flex-wrap: wrap; gap: 10px; }
.topic-more { margin-top: 12px; font-size: .93rem; }
.cat-h-link { color: inherit; text-decoration: none; }
.cat-h-link:hover { color: var(--green); text-decoration: underline; }
.all-cat .cat-strap { color: var(--ink-2); margin-bottom: 18px; }
.tool-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 22px; }
.tool-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border-radius: var(--r-s); font-size: .93rem;
}
.tool-row a { text-decoration: none; font-weight: 600; }
.tool-row .link-btn { font-weight: 400; color: var(--ink-2); text-decoration: none; }
.tool-row .link-btn:hover { color: var(--green); text-decoration: underline; }
.tool-row:hover { background: var(--wash); }
@media (max-width: 900px) { .tool-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tool-list { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- demo page */
.demo-section { padding-block: 34px; border-bottom: 1px solid var(--hairline); }
.demo-section:last-child { border-bottom: 0; }
.demo-section > h2 { margin-bottom: 6px; }
.demo-section > .demo-note { color: var(--ink-2); margin-bottom: 24px; max-width: 70ch; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.demo-cell { display: grid; gap: 10px; align-content: start; justify-items: start; }
.demo-cell > .field, .demo-cell > .slider-row, .demo-cell > .dual-range,
.demo-cell > .option-cards, .demo-cell > .tabs, .demo-cell > [role="tabpanel"],
.demo-cell > details, .demo-cell > .callout, .demo-cell > .answer-paper, .demo-cell > .chart { justify-self: stretch; }
.demo-cell > h3 { font-size: .93rem; color: var(--ink-2); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.swatch { border: 1px solid var(--hairline); border-radius: var(--r-m); overflow: hidden; }
.swatch i { display: block; height: 64px; }
.swatch figcaption { padding: 8px 12px; font-size: .78rem; font-weight: 500; color: var(--ink-2); }
.type-specimen > * { border-bottom: 1px dashed var(--hairline); padding-block: 10px; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ misc */
.page-head-simple { padding-block: clamp(40px, 7vw, 72px) 0; }
.page-head-simple .lede { margin-top: 14px; }
.legal-prose { padding-block: 34px; }

.soon-box { text-align: center; padding-block: clamp(28px, 5vw, 60px); }
.soon-box h1 { margin-bottom: 14px; }
.soon-box .lede { margin-inline: auto; max-width: 52ch; }
.soon-box .btn { margin-top: 26px; }

/* buttons masquerading as cards/rows */
button.related-card { background: var(--paper); text-align: left; font: inherit; }
button.related-card:hover { border-color: var(--green); }
.tool-row .link-btn { font: inherit; }

/* dual-range (two-thumb) slider */
.dual-range { position: relative; height: 34px; }
.dual-range input[type="range"] { position: absolute; inset: 0; pointer-events: none; }
.dual-range input[type="range"]::-webkit-slider-runnable-track { background: transparent; }
.dual-range input[type="range"]::-moz-range-track { background: transparent; }
.dual-range input[type="range"]::-moz-range-progress { background: transparent; }
.dual-range input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.dual-range input[type="range"]::-moz-range-thumb { pointer-events: auto; }
.dual-range .dr-track {
  position: absolute; left: 10px; right: 10px; top: 50%; height: 5px;
  transform: translateY(-50%); border-radius: 999px; background: var(--hairline-2);
}
.dual-range .dr-fill {
  position: absolute; top: 50%; height: 5px; transform: translateY(-50%);
  border-radius: 999px; background: var(--green);
}

/* ---------------------------------------------------------------- embeds */
.is-embed { background-image: none; }
.is-embed .embed-main { padding: 14px 0 4px; }
.embed-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; padding: 0 clamp(14px, 3vw, 22px) 4px; }
.is-embed .wrap { padding-inline: clamp(12px, 2.5vw, 20px); }
.is-embed .calc-layout, .is-embed .calc-duo { padding-block: 8px 14px; gap: 16px; }
.is-embed .card-pad { padding: clamp(14px, 2.5vw, 20px); }
.embed-attr {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 16px; border-top: 1px solid var(--hairline); background: var(--wash);
  font-size: .82rem;
}
.embed-attr a { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; color: var(--ink-2); }
.embed-attr a:hover { color: var(--green); }
.embed-attr .logo-mark { width: 17px; height: 17px; }
#embed-code { font-size: .8rem; line-height: 1.5; }

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ----------------------------------------------------------------- print */
@media print {
  .site-head, .site-foot, dialog, .calc-form-col, .seo-copy, .results-actions,
  .related-section, .calc-meta, .crumbs, .skip-link { display: none !important; }
  .calc-layout { grid-template-columns: 1fr; padding: 0; }
  .calc-results-col { position: static; }
  .answer-paper { border: 1px solid #bbb; box-shadow: none; }
  body { font-size: 12px; }
  a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------ quote-calculator demos */
.qd-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--wash-green, #eef5f1); border: 1px solid var(--hairline);
  border-radius: var(--r-m); padding: 14px 18px; margin-bottom: 26px;
}
.qd-banner b { color: var(--green); }
.qd-banner p { margin: 0; font-size: .95rem; color: var(--ink-2); }
.qd-widget {
  border: 1px solid var(--hairline-2); border-radius: var(--r-l);
  background: var(--paper); overflow: hidden;
  box-shadow: 0 18px 44px -30px rgba(23, 33, 27, .35);
}
.qd-brand-head {
  background: var(--qd-accent, #33566B); color: #fff;
  padding: 18px 22px; display: flex; align-items: center; gap: 14px;
}
.qd-brand-mark {
  width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, .16);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  font-family: var(--font-display); letter-spacing: .02em;
}
.qd-brand-head .qd-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.qd-brand-head .qd-brand-strap { font-size: .85rem; opacity: .85; }
.qd-widget-body { padding: clamp(18px, 3vw, 30px); }
.qd-widget .btn-primary { background: var(--qd-accent, #33566B); }
.qd-widget .btn-primary:hover { background: var(--qd-accent-deep, #244052); }
.qd-widget .seg [aria-pressed="true"], .qd-widget .seg input:checked + label { border-color: var(--qd-accent, #33566B); color: var(--qd-accent-deep, #244052); }
.qd-quote {
  border-top: 1px solid var(--hairline); margin-top: 26px; padding-top: 22px;
}
.qd-quote-range {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.9rem, 4vw, 2.6rem); color: var(--qd-accent-deep, #244052);
}
.qd-quote-note { color: var(--ink-3); font-size: .85rem; margin-top: 6px; }
.qd-lead { border-top: 1px solid var(--hairline); margin-top: 26px; padding-top: 22px; }
.qd-lead h3 { margin-bottom: 6px; }
.qd-lead .qd-lead-sub { color: var(--ink-2); font-size: .92rem; margin-bottom: 16px; }
.qd-lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.qd-lead-grid .field-wide { grid-column: 1 / -1; }
.qd-lead-ok {
  background: var(--wash-green, #eef5f1); border: 1px solid var(--green);
  border-radius: var(--r-m); padding: 18px;
}
.qd-lead-ok b { color: var(--green); }
.qd-lead-ok p { margin: 6px 0 0; color: var(--ink-2); font-size: .95rem; }
.qd-sales { margin-top: clamp(44px, 7vw, 72px); }
.qd-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.qd-tier {
  border: 1px solid var(--hairline); border-radius: var(--r-l); background: var(--paper);
  padding: 22px; display: flex; flex-direction: column; gap: 10px;
}
.qd-tier.is-featured { border-color: var(--green); box-shadow: 0 14px 34px -26px rgba(11, 107, 72, .5); }
.qd-tier h3 { font-size: 1.05rem; }
.qd-tier .qd-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; }
.qd-tier .qd-price small { font-size: .55em; font-weight: 600; color: var(--ink-3); }
.qd-tier ul { list-style: none; margin: 0; padding: 0; }
.qd-tier li { padding-left: 22px; position: relative; margin-block: 7px; font-size: .92rem; color: var(--ink-2); }
.qd-tier li::before { content: ""; position: absolute; left: 0; top: .48em; width: 12px; height: 7px; border-left: 2.5px solid var(--green); border-bottom: 2.5px solid var(--green); transform: rotate(-45deg); }
.qd-tier .btn { margin-top: auto; }
@media (max-width: 860px) {
  .qd-tiers { grid-template-columns: 1fr; }
  .qd-lead-grid { grid-template-columns: 1fr; }
}

/* ----------------------------------------- quote-service nav + sales bits */
.mega-demos { padding-block: 26px 20px; }
.mega-demos-intro { color: var(--ink-2); font-size: .92rem; margin-bottom: 14px; }
.mega-demos ul { list-style: none; margin: 0; padding: 0; columns: 4; column-gap: 28px; }
.mega-demos li { margin: 0 0 2px; break-inside: avoid; }
.mega-demos li a {
  display: block; padding: 5px 8px; margin-left: -8px; border-radius: 6px;
  color: var(--ink-2); text-decoration: none; font-size: .92rem;
}
.mega-demos li a:hover { background: var(--wash); color: var(--green); }
.mega-demos .mega-foot { border-top: 1px solid var(--hairline); margin-top: 14px; padding-top: 14px; font-size: .92rem; }
.mega-demos .mega-foot a { text-decoration: none; font-weight: 600; }
@media (max-width: 1100px) { .mega-demos ul { columns: 3; } }

.qd-tiers-single { grid-template-columns: minmax(0, 560px); justify-content: center; }
.qd-tiers-note { text-align: center; color: var(--ink-3); font-size: .88rem; max-width: 74ch; margin: 16px auto 0; }

/* skim band on demo pages: boxed key points above the long-form copy.
   Flex (not grid) so a short last row stretches to fill its width. */
.qd-points-band { margin-top: clamp(40px, 6vw, 70px); }
.qd-points { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.qd-point {
  flex: 1 1 280px; min-width: 240px;
  background: var(--paper); border: 1px solid #c3d1c8; border-radius: var(--r-m);
  padding: 20px 18px; box-shadow: 0 1px 3px rgba(23, 33, 27, .06);
}
.qd-point img { width: 84px; height: 84px; display: block; margin: 0 auto; }
/* four-card variant: narrower basis so all four share one row on desktop */
.qd-points-4 .qd-point { flex-basis: 210px; min-width: 210px; }
.qd-point h3 { font-size: 1.02rem; margin: 12px 0 6px; }
.qd-point p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }

/* enquiry CTA strip: under the At-a-glance boxes and at the page bottom */
.qd-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 18px 22px; margin-top: clamp(26px, 4vw, 40px);
}
.qd-cta p { margin: 0; flex: 1 1 320px; color: var(--ink-2); }
.qd-cta p b { color: var(--ink); }
.qd-cta .btn { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) { .qd-cta .btn { margin-left: 0; } }

/* sticky enquiry bar under the main nav on the demo, gallery and sales pages */
.qd-topbar { position: sticky; top: var(--head-h); z-index: 99; background: var(--wash); border-bottom: 1px solid var(--hairline); }
.qd-topbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-block: 9px; }
.qd-topbar-row p { margin: 0; font-weight: 600; font-size: .95rem; min-width: 0; flex: 1 1 auto; }
.qd-topbar-row .btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.qd-contact { display: flex; align-items: center; gap: 2px; }
.qd-chip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-2); }
.qd-chip:hover { color: var(--green); background: #fff; }
.qd-chip svg { display: block; }
.qd-phone { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; font-weight: 700; font-size: 1.02rem; color: var(--ink); text-decoration: none; white-space: nowrap; }
.qd-phone:hover { color: var(--green); }
@media (max-width: 700px) {
  .qd-topbar-row p { flex: 1 1 100%; font-size: .84rem; line-height: 1.3; }
  .qd-contact { margin-right: auto; }
  .qd-phone { font-size: .95rem; }
}

/* white-label client widget pages, framed on customer sites: plain white
   ground (no grid texture inside someone else's page), zero chrome */
body.is-client-embed { background: #fff; }
.client-embed-main { padding: 4px; }
.client-embed-main .qd-widget { margin: 0; }

/* demo widgets framed on our own marketing sites (/embed-demo/<slug>/): the
   full demo template renders in client-embed mode, but only the working
   widget shows; the sales page around it is hidden */
body.is-demo-embed .page-head-simple,
body.is-demo-embed .qd-banner,
body.is-demo-embed .qd-sales,
body.is-demo-embed .qd-points-band,
body.is-demo-embed .seo-copy,
body.is-demo-embed .qd-cta { display: none; }
body.is-demo-embed .page-sheet { margin-block: 0; }
body.is-demo-embed .sheet { border: 0; border-radius: 0; padding: 0; background: transparent; }
body.is-demo-embed .wrap { max-width: none; padding-inline: 0; }

.cc-form-wrap { max-width: 980px; }
.cc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 22px; }
.cc-form-grid .cc-field-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .cc-form-grid { grid-template-columns: 1fr; } }

.trade-promo { background: var(--wash); border-top: 1px solid var(--hairline); }
.trade-promo-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  padding-block: clamp(22px, 3.5vw, 34px);
}
.trade-promo-inner p { margin: 0; max-width: 62ch; color: var(--ink-2); }
.trade-promo-inner p b { color: var(--ink); }
.trade-promo-inner .btn { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 720px) { .trade-promo-inner .btn { margin-left: 0; } }

/* trade promo: hero card + inline band (footer band styles are above) */
.calc-hero-inner.has-trade-promo { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(28px, 4vw, 56px); }
.calc-hero-inner.has-trade-promo > * { grid-column: 1; }
.trade-promo-hero {
  grid-column: 2 !important; grid-row: 1 / span 4; align-self: center; justify-self: end;
  width: 100%; max-width: 340px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-l);
  padding: 20px 22px; box-shadow: 0 14px 34px -28px rgba(23, 33, 27, .4);
}
.trade-promo-hero p { margin: 0 0 14px; font-size: .92rem; color: var(--ink-2); line-height: 1.55; }
.trade-promo-hero p b { color: var(--ink); }
@media (max-width: 1099px) {
  .calc-hero-inner.has-trade-promo { display: block; }
  .trade-promo-hero { display: none; }
}
.trade-promo-inline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  background: var(--wash); border: 1px solid var(--hairline); border-radius: var(--r-m);
  padding: 16px 20px; margin-block: clamp(26px, 4vw, 40px);
}
.trade-promo-inline p { margin: 0; max-width: 62ch; color: var(--ink-2); flex: 1 1 380px; }
.trade-promo-inline p b { color: var(--ink); }
.trade-promo-inline .btn { flex: 0 0 auto; white-space: nowrap; }

/* invisible hover bridge over the gap between the nav trigger and the panel */
.mega-panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 26px; }

/* --------------------------------------------------------------- live chat
   Visitor widget on the sales-funnel pages (aec-chat-*) and the internal
   console at /internal/chat/ (ca-*). */
.aec-chat-launch {
  position: fixed; right: 18px; bottom: 18px; z-index: 320;
  display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px;
  border: 0; border-radius: 10px; background: var(--green); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(23, 33, 27, .22);
}
.aec-chat-launch:hover { background: var(--green-deep); }
.aec-chat-launch[hidden] { display: none; }
.aec-chat-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 7px;
  background: #d9942b; color: #fff; font-size: .78rem; font-weight: 700;
}
.aec-chat-badge[hidden] { display: none; }
.aec-chat-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 320;
  width: min(370px, calc(100vw - 24px)); max-height: min(620px, calc(100vh - 40px));
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(23, 33, 27, .24);
}
.aec-chat-panel[hidden] { display: none; }
.aec-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 13px 16px 11px; background: var(--green); color: #fff; }
.aec-chat-head b { font-size: 1.02rem; }
.aec-chat-status { display: flex; align-items: center; gap: 7px; font-size: .8rem; opacity: .92; margin-top: 3px; }
.aec-chat-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8cdc9; flex: 0 0 auto; }
.aec-chat-dot.is-on { background: #7ee2a8; }
.aec-chat-min { border: 0; background: transparent; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 8px 3px; border-radius: 6px; flex: 0 0 auto; }
.aec-chat-min:hover { background: rgba(255, 255, 255, .16); }
.aec-chat-msgs { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 10px; min-height: 48px; }
.aec-chat-msg { display: flex; flex-direction: column; max-width: 86%; }
.aec-chat-msg.is-you { align-self: flex-end; align-items: flex-end; }
.aec-chat-msg.is-them { align-self: flex-start; align-items: flex-start; }
.aec-chat-bubble { padding: 8px 12px; border-radius: 9px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.aec-chat-msg.is-you .aec-chat-bubble { background: var(--green); color: #fff; border-bottom-right-radius: 3px; }
.aec-chat-msg.is-them .aec-chat-bubble { background: var(--wash); border: 1px solid var(--hairline); border-bottom-left-radius: 3px; }
.aec-chat-when { font-size: .72rem; color: var(--ink-3); margin-top: 3px; }
.aec-chat-note { text-align: center; font-size: .8rem; color: var(--ink-2); margin: 4px 0; }
.aec-chat-form { padding: 10px 16px 0; border-top: 1px solid var(--hairline); }
.aec-chat-prechat { display: grid; gap: 10px; margin-bottom: 10px; }
.aec-chat-prechat[hidden] { display: none; }
.aec-chat-composer { display: flex; align-items: flex-end; gap: 8px; }
.aec-chat-composer textarea { flex: 1 1 auto; resize: none; }
.aec-chat-composer .btn { padding: 10px 13px; flex: 0 0 auto; }
.aec-chat-alt { margin: 9px 16px 12px; font-size: .8rem; color: var(--ink-2); }
@media (max-width: 480px) {
  .aec-chat-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); }
  .aec-chat-launch { right: 12px; bottom: 12px; }
}

/* internal chat console */
.ca-toolbar { display: flex; align-items: center; gap: 16px 18px; margin: -6px 0 20px; flex-wrap: wrap; }
.ca-sound { display: flex; align-items: center; gap: 7px; font-size: .9rem; color: var(--ink-2); }
.ca-toolbar-links { margin-left: auto; display: flex; gap: 16px; align-items: center; font-size: .92rem; }
.ca-grid {
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
  grid-template-rows: 100%;
  border: 1px solid var(--hairline); border-radius: 10px; overflow: hidden;
  height: min(680px, max(460px, calc(100vh - 300px))); background: #fff;
}
.ca-list { border-right: 1px solid var(--hairline); overflow-y: auto; background: var(--wash); }
.ca-item { display: block; text-align: left; width: 100%; border: 0; border-bottom: 1px solid var(--hairline); background: transparent; padding: 12px 14px; cursor: pointer; font: inherit; }
.ca-item:hover { background: #fff; }
.ca-item.is-open { background: #fff; box-shadow: inset 3px 0 0 var(--green); }
.ca-item.is-closed { opacity: .62; }
.ca-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .92rem; }
.ca-item-top span { color: var(--ink-3); font-size: .76rem; white-space: nowrap; flex: 0 0 auto; }
.ca-item-preview { display: block; font-size: .85rem; color: var(--ink-2); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-item.is-unread .ca-item-preview { font-weight: 700; color: var(--ink); }
.ca-item-page { display: block; font-size: .74rem; color: var(--ink-3); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; max-height: 100%; }
.ca-thread[hidden] { display: none; }
.ca-thread-none .ca-empty { margin: auto; }
.ca-thread-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.ca-thread-who b { display: block; }
.ca-thread-who span { font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ca-thread-tools { display: flex; gap: 8px; flex: 0 0 auto; }
.ca-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ca-msg { display: flex; flex-direction: column; max-width: 72%; }
.ca-msg.is-you { align-self: flex-end; align-items: flex-end; }
.ca-msg.is-them { align-self: flex-start; align-items: flex-start; }
.ca-bubble { padding: 8px 12px; border-radius: 9px; font-size: .95rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; }
.ca-msg.is-you .ca-bubble { background: var(--green); color: #fff; border-bottom-right-radius: 3px; }
.ca-msg.is-them .ca-bubble { background: var(--wash); border: 1px solid var(--hairline); border-bottom-left-radius: 3px; }
.ca-when { font-size: .72rem; color: var(--ink-3); margin-top: 3px; }
.ca-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.ca-composer textarea { flex: 1 1 auto; resize: none; }
.ca-empty { padding: 16px; color: var(--ink-2); font-size: .92rem; }
@media (max-width: 860px) {
  .ca-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .ca-list { max-height: 300px; border-right: 0; border-bottom: 1px solid var(--hairline); }
  .ca-thread { min-height: 420px; max-height: 70vh; }
}

/* "prefer to talk?" line under the enquiry form lede */
.cc-talk { margin-top: 10px; color: var(--ink-2); font-size: .98rem; }
.cc-talk a { white-space: nowrap; }

/* live chat: proactive nudge, assistant typing dots, console bot bubbles */
.aec-chat-nudge {
  position: fixed; right: 18px; bottom: 78px; z-index: 319;
  width: min(300px, calc(100vw - 36px));
  background: #fff; border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 14px 36px rgba(23, 33, 27, .2);
  animation: aec-nudge-in .35s ease-out;
}
.aec-chat-nudge[hidden] { display: none; }
@keyframes aec-nudge-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.aec-chat-nudge-body {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  font: inherit; cursor: pointer; padding: 14px 34px 14px 16px; border-radius: 10px;
}
.aec-chat-nudge-body b { display: block; margin-bottom: 4px; }
.aec-chat-nudge-body span { color: var(--ink-2); font-size: .9rem; }
.aec-chat-nudge-x {
  position: absolute; top: 6px; right: 6px; border: 0; background: transparent;
  color: var(--ink-3); font-size: 1.15rem; line-height: 1; padding: 4px 7px;
  cursor: pointer; border-radius: 6px;
}
.aec-chat-nudge-x:hover { color: var(--ink); background: var(--wash); }
.aec-chat-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 1.4em; }
.aec-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3);
  animation: aec-typing 1.1s infinite ease-in-out;
}
.aec-chat-typing span:nth-child(2) { animation-delay: .18s; }
.aec-chat-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes aec-typing { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ca-msg.is-bot { align-self: flex-end; align-items: flex-end; }
.ca-msg.is-bot .ca-bubble { background: var(--wash-green); border: 1px solid var(--hairline); border-bottom-right-radius: 3px; }

/* live chat: "connecting you" wait indicator while a reply is on its way */
.aec-chat-wait { display: flex; align-items: baseline; justify-content: center; gap: 1px; }
.aec-chat-wait-dots span { animation: aec-wait-blink 1.3s infinite; }
.aec-chat-wait-dots span:nth-child(2) { animation-delay: .22s; }
.aec-chat-wait-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes aec-wait-blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

/* ------------------------------------------------ topbar rotator + nudge
   The sticky sales bar cycles four messages (app.js swaps .is-on every 7s);
   grid stacking keeps the bar's height at the tallest message so nothing
   jumps. The CTA gets a brief shake on a random 5-10s cadence. */
.qd-topbar-rotate { display: grid; margin: 0; }
.qd-topbar-rotate span {
  grid-area: 1 / 1; opacity: 0; transform: translateY(7px);
  transition: opacity .55s ease, transform .55s ease; pointer-events: none;
}
.qd-topbar-rotate span.is-on { opacity: 1; transform: none; }
@keyframes qd-cta-shake {
  0%, 100% { transform: none; }
  15% { transform: translateX(-3px) rotate(-1.6deg); }
  30% { transform: translateX(3px) rotate(1.6deg); }
  45% { transform: translateX(-3px) rotate(-1deg); }
  60% { transform: translateX(3px) rotate(1deg); }
  75% { transform: translateX(-2px); }
  90% { transform: translateX(2px); }
}
.qd-shake { animation: qd-cta-shake .6s ease; }
@media (prefers-reduced-motion: reduce) {
  .qd-topbar-rotate span { transition: opacity .55s ease; transform: none; }
  .qd-shake { animation: none; }
}

/* ------------------------------------------------ trade-first mega panel
   The custom-calculator menu: three action links, a fuzzy trade finder with
   a dropdown of matches, and nine category cards that route to the category
   landing pages at /quote-calculators/<group>/. */
/* NOTE: these selectors must out-rank .site-nav a (0,1,1), which otherwise
   overrides padding/colour on every anchor inside the header. Two classes
   beat class+type; a bare .mega-cat-card silently loses. */
.mega-trades-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.mega-trades-top .mega-trades-action { text-decoration: none; font-weight: 600; font-size: .95rem; padding: 6px 0; }
.mega-find { position: relative; margin-top: 14px; }
.mega-trades-filter {
  width: 100%; padding: 9px 13px;
  border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .95rem;
}
.mega-find-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-2); max-height: 330px; overflow: auto; padding: 6px;
}
.mega-find-results a {
  display: block; padding: 8px 10px; border-radius: 7px;
  color: var(--ink-2); text-decoration: none; font-size: .93rem;
}
.mega-find-results a:hover, .mega-find-results a:focus { background: var(--wash); color: var(--green); }
.mega-find-none { margin: 6px 8px; color: var(--ink-2); font-size: .92rem; }
.mega-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 18px; }
.mega-cats .mega-cat-card {
  display: block; padding: 22px 26px; border: 1px solid var(--hairline); border-radius: 10px;
  text-decoration: none; background: var(--paper);
}
.mega-cats .mega-cat-card:hover { border-color: var(--green); background: var(--wash); }
.mega-cat-name { display: block; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.mega-cat-sub { display: block; margin-top: 6px; color: var(--ink-3); font-size: .84rem; line-height: 1.5; }
.mega-cat-sub b { color: var(--green); font-weight: 600; white-space: nowrap; }
@media (max-width: 1100px) { .mega-cats { grid-template-columns: repeat(2, 1fr); } }

/* Category chips on the gallery and category pages: the tap-friendly route
   for mobile visitors to narrow 82 examples to their trade family. */
.qg-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qg-cats-label { color: var(--ink-3); font-size: .9rem; font-weight: 600; }
.qg-cat-chip {
  display: inline-block; padding: 10px 16px; border: 1.5px solid var(--green); border-radius: 9px;
  background: var(--paper); color: var(--green); text-decoration: none; font-size: .92rem; font-weight: 600;
  box-shadow: 0 1px 0 rgba(23, 33, 27, .06);
}
.qg-cat-chip:hover { background: var(--green); color: #fff; }
.qg-cat-chip-all { border-style: dashed; }

/* Category-page sales sub-headline, between the h1 and the lede. */
.qc-cat-sub {
  margin-top: 14px; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.22; letter-spacing: -.012em;
  color: var(--green);
}

/* Pricing band: launch-offer tiers with save chips, struck standard prices
   and the monthly/annual billing switch (pure CSS via [data-bill]). */
.qd-pricing-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.qd-tiers-head { font-size: 1.15rem; margin: 0; }
.qd-bill-toggle { flex: 0 0 auto; }
.qd-pricing .qd-tiers { margin-top: 18px; }
.qd-tier-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qd-save {
  display: inline-block; padding: 4px 10px; border-radius: 6px;
  background: var(--green); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .01em;
}
/* Best-value tag sits ON the card's top border, outside the content flow, so
   every tier's bullets start at the same height. */
.qd-pricing .qd-tier { position: relative; }
.qd-chip-best {
  position: absolute; top: -12px; right: 16px;
  display: inline-block; padding: 4px 12px; border-radius: 6px;
  background: var(--green); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: 0 2px 6px -2px rgba(11, 107, 72, .45);
}
.qd-price .qd-was { color: var(--ink-3); font-weight: 600; font-size: .55em; text-decoration: line-through; margin-left: 4px; }
.qd-price-mo { margin-top: -4px; }
.qd-price-mo em { display: block; font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: .5em; color: var(--ink-3); margin-top: 2px; }
.qd-pricing[data-bill="m"] .qd-bill-a { display: none; }
.qd-pricing[data-bill="a"] .qd-bill-m { display: none; }

/* Demo widget breakdown tables: price-range cells get white-space:nowrap
   from app.js (short values only, so long sentence values still wrap). */