/* Master template layer (2026-10-19). Loaded last, after brand-v03.css.
   Holds the changes from the top-to-bottom visual pass on the master template, one section at a time.
   Remove this one <link> to see the page as it was copied from Test Page/. */

/* ---------- Tokens for this layer ---------- */
:root{
  /* Daylight hero ground: gradient-daylight with glow-daylight on top (Brand Guidelines v0.3, approved gradients) */
  --hero-ground:radial-gradient(60% 80% at 100% 0%,rgba(188,225,247,.6),transparent 70%),linear-gradient(180deg,var(--white) 0%,var(--mist) 100%);
  /* Chart series, validated with the dataviz palette check: gray for "by hand", the blue for the product */
  --chart-a:#8a93a3; --chart-b:var(--cobalt); --chart-fill:.1;
}
.mt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Hero ---------- */
.hero-mt{padding:var(--s7) 0 var(--s8);background:var(--hero-ground)}
.mt-top{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:end}
.hero-mt h1{font-size:clamp(44px,5.4vw,72px);line-height:1;letter-spacing:-.03em;margin:0}
.mt-accent{display:block;color:var(--link)}

/* tabs: a segmented control; a Navy block slides to the chosen tab. Corners: --r-group outside, --r-ctl inside */
.mt-tabs{position:relative;display:inline-flex;padding:var(--s1);margin:0 0 var(--s4);background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--r-group)}
.mt-tabs [role=tab]{position:relative;z-index:1;min-height:40px;padding:var(--s2) var(--s3);border:0;border-radius:var(--r-ctl);background:none;cursor:pointer;
  font:600 14px/20px var(--body);color:var(--text-muted);white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color var(--dur-ui) var(--ease)}
.mt-tabs [role=tab]:hover{color:var(--text-heading)}
.mt-tabs [aria-selected=true],.mt-tabs [aria-selected=true]:hover{color:var(--on-action-secondary);background:var(--action-secondary)}
.mt-tabs-ind{display:none;position:absolute;z-index:0;top:var(--s1);bottom:var(--s1);left:0;width:0;border-radius:var(--r-ctl);background:var(--action-secondary)}
.ready .mt-tabs-ind{display:block}
.ready .mt-tabs [aria-selected=true]{background:none}
.ready.moved .mt-tabs-ind{transition:transform .36s var(--ease),width .36s var(--ease)}
/* panels share one cell so the block keeps the height of the longest description */
.mt-panels{display:grid}
.mt-panel{grid-area:1/1}
.js .mt-panel[hidden]{display:block;visibility:hidden;opacity:0}
.mt-panel{transition:opacity var(--dur-ui) var(--ease)}
.mt-panel p{margin:0;font-size:18px;line-height:28px;color:var(--text)}
html:not(.js) .mt-tabs{display:none}
html:not(.js) .mt-panel[hidden]{display:block}
.hero-mt .cta-row{gap:var(--s3);margin:var(--s5) 0 0}

/* second row: chart beside the compact form */
.mt-visual{display:grid;grid-template-columns:minmax(0,1fr) 384px;gap:var(--s4);margin-top:var(--s7);align-items:stretch}
.mt-chart{margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--s4);padding:var(--s5);background:var(--surface-raised);border:1px solid var(--rule)}
.mt-chart-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s4);flex-wrap:wrap}
.mt-chart-head .eyebrow{display:block;margin:0 0 var(--s2);color:var(--text-muted)}
.mt-stat{margin:0;font:500 48px/1 var(--quote);letter-spacing:-.02em;color:var(--text-heading)}
.mt-stat small{display:block;margin-top:var(--s2);font:400 16px/24px var(--body);letter-spacing:0;color:var(--text-muted)}
.mt-legend{display:flex;gap:var(--s4);margin:0;padding:0;list-style:none;font:400 14px/20px var(--body);color:var(--text)}
.mt-legend li{display:flex;align-items:center;gap:var(--s2)}
.mt-legend i{display:block;width:16px;height:2px;background:var(--chart-a)}
.mt-legend i.k-b{background:var(--chart-b)}
.mt-plot{position:relative;flex:1;min-height:280px}
.mt-plot>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mt-plot:focus-visible{outline:2px solid var(--focus-ring);outline-offset:var(--s2)}
.mt-plot .grid{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.mt-plot .tick{font:400 12px/1 var(--body);fill:var(--text-muted);font-variant-numeric:tabular-nums}
.mt-plot .axis-t{font:500 12px/1 var(--body);fill:var(--text-muted)}
.mt-plot .line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mt-plot .s-0{stroke:var(--chart-a)}
.mt-plot .s-1{stroke:var(--chart-b)}
.mt-plot .dot{stroke:var(--surface-raised);stroke-width:2}
.mt-plot .dot.s-0{fill:var(--chart-a)}
.mt-plot .dot.s-1{fill:var(--chart-b)}
.mt-plot .gap{fill:var(--chart-b);opacity:var(--chart-fill)}
.mt-plot .end-v{font:700 14px var(--body);fill:var(--text-heading);font-variant-numeric:tabular-nums}
.mt-plot .end-n{font:400 12px var(--body);fill:var(--text-muted)}
.mt-plot .xh{stroke:var(--text-muted);stroke-width:1;shape-rendering:crispEdges}
.mt-plot .hover{opacity:0}
.mt-plot.on .hover{opacity:1}
/* draw-in on first view: lines trace left to right, the saved area fades in after */
.mt-plot .line.draw{transition:stroke-dashoffset 1.2s var(--ease)}
.mt-plot .gap.draw{transition:opacity .6s var(--ease) .8s}
.mt-tip{position:absolute;z-index:2;top:0;left:0;pointer-events:none;opacity:0;transition:opacity .15s linear;
  padding:var(--s2) var(--s3);background:var(--surface-raised);border:1px solid var(--rule);
  font:400 13px/20px var(--body);color:var(--text-muted);white-space:nowrap}
.mt-plot.on .mt-tip{opacity:1}
.mt-tip .h{display:block;margin-bottom:var(--s1);font-weight:600;color:var(--text-heading)}
.mt-tip .r{display:flex;align-items:center;gap:var(--s2)}
.mt-tip .r i{display:block;width:12px;height:2px}
.mt-tip b{min-width:52px;color:var(--text);font-variant-numeric:tabular-nums}
.mt-note{margin:0;font:400 12px/18px var(--body);color:var(--text-muted)}
.mt-note .tlink{font-size:12px;white-space:nowrap}

/* compact demo form */
.mt-form{height:100%;padding:var(--s4)}
.mt-form h3{margin:0 0 var(--s1);font-size:24px;line-height:30px}
.mt-form-sub{margin:0 0 var(--s3);font:400 13px/20px var(--body);color:var(--text-muted)}
.mt-form fieldset{margin:0 0 var(--s3)}
.mt-form legend,.mt-form label{margin-bottom:var(--s1);font-size:13px;line-height:20px}
.mt-form .req{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mt-form .opt{font-size:10px}
.mt-form .two{gap:var(--s3)}
.mt-form .field{margin-bottom:var(--s3)}
.mt-form input[type=text],.mt-form input[type=email],.mt-form input[type=tel],.mt-form select{min-height:40px;border-radius:var(--r-ctl);padding:var(--s2) 12px}
.mt-form .btn{min-height:44px;margin-top:var(--s1)}
.mt-form .consent{margin:var(--s2) 0 0;font-size:12px;line-height:18px}
/* "How can we help?" as a three-part segmented control; the radio inputs stay real and keyboard operable */
.mt-form .mt-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1.5px solid var(--field-border);border-radius:var(--r-group);overflow:hidden}
.mt-form .mt-seg label{position:relative;justify-content:center;min-height:40px;margin:0;padding:var(--s2) var(--s1);border:0;border-radius:0;border-left:1.5px solid var(--field-border);
  font:500 13px/16px var(--body);text-align:center;background:var(--surface-raised);color:var(--text)}
.mt-form .mt-seg label:first-child{border-left:0}
.mt-form .mt-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.mt-form .mt-seg label:has(input:checked){background:var(--action-secondary);color:var(--on-action-secondary)}
.mt-form .mt-seg label:has(input:focus-visible){z-index:1;outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Range sliders (pricing estimator and calculator): a round thumb instead of the square.
   An exception to square corners, like the toggle switches (Marketing, 2026-10-19). ---------- */
.calc input[type=range]::-webkit-slider-thumb,.est input[type=range]::-webkit-slider-thumb{width:24px;height:24px;border-radius:50%;margin-top:-11px;
  background:var(--action-secondary);outline-color:var(--action-secondary)}
.calc input[type=range]::-moz-range-thumb,.est input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--action-secondary);outline-color:var(--action-secondary)}

/* ---------- Section heads without an eyebrow: the heading takes the full width, aligned with the content ---------- */
.ledger.solo{grid-template-columns:1fr}
.ledger.center{text-align:center}

/* ---------- Feature cards: the whole card opens a detail panel under its row ----------
   The title button stretches over the card. grid-auto-flow:dense lets the cards after an open panel fill the
   row above it, so the panel always lands under the clicked card's row. A notch points back at the card. */
.fx{grid-auto-flow:row dense}
.fx .fblock{position:relative;display:flex;flex-direction:column;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color var(--dur-ui) var(--ease),transform var(--dur-press) var(--ease-press)}
.fx .fblock:hover{border-color:var(--icon)}
.fx .fblock:active{transform:scale(.985)}
.fx .fblock.open{border-color:var(--icon);outline:1px solid var(--icon);outline-offset:-2px}
.fx .fblock h3 button{margin:0;padding:0;border:0;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
.fx .fblock h3 button::after{content:"";position:absolute;inset:0}
.fx .fblock h3 button:focus-visible{outline:none}
.fx .fblock h3 button:focus-visible::after{outline:2px solid var(--focus-ring);outline-offset:2px}
.fmore{display:inline-flex;align-items:center;gap:var(--s2);margin-top:auto;padding-top:var(--s3);font:600 14px/20px var(--body);color:var(--link)}
.fmore::after{content:"";width:7px;height:7px;border-right:1.75px solid currentColor;border-bottom:1.75px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-ui) var(--ease)}
.fmore .c,.open .fmore .o{display:none}
.open .fmore .c{display:inline}
.open .fmore::after{transform:rotate(-135deg) translateY(-2px)}
.fdetail{position:relative;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s4) var(--s6);align-items:start;
  padding:var(--s5) var(--s7) var(--s5) var(--s5);background:var(--surface-raised);border:1px solid var(--icon);animation:fd-in .32s var(--ease)}
.fdetail::before{content:"";position:absolute;top:-8px;left:var(--caret,48px);width:14px;height:14px;
  background:var(--surface-raised);border-left:1px solid var(--icon);border-top:1px solid var(--icon);transform:rotate(45deg)}
.fd-h{margin:0 0 var(--s3);font:600 24px/1.2 var(--display);letter-spacing:-.01em;color:var(--text-heading)}
.fdetail p{margin:0 0 var(--s3);font-size:17px;line-height:27px;color:var(--text)}
.fdetail .ul-check{margin:0}
.fdetail .ul-check li{font-size:16px;line-height:24px;color:var(--text)}
.fdetail .ul-check li:last-child{border-bottom:0}
.fd-close{position:absolute;top:var(--s3);right:var(--s3);min-height:32px;padding:var(--s1) var(--s2);border:0;background:none;cursor:pointer;
  font:600 14px/20px var(--body);color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@keyframes fd-in{from{opacity:0;transform:translateY(-8px)}}
/* without JavaScript every panel shows, so the detail is never out of reach */
html:not(.js) .fdetail[hidden]{display:grid}
html:not(.js) .fmore,html:not(.js) .fd-close,html:not(.js) .fdetail::before{display:none}
@media (max-width:820px){
  .fdetail{grid-template-columns:1fr;padding:var(--s6) var(--s4) var(--s4)}
}
@media (prefers-reduced-motion:reduce){.fdetail{animation:none}.fx .fblock:active{transform:none}}

/* ---------- Two-tone headings: the second phrase in a brand blue instead of gray, so the shift is easy to see ----------
   Light grounds: Cobalt, like the hero accent . Navy and dark bands: Ice, the accent-on-brand color
   (9.4:1 on Navy). Sky was tried there and read too dim at 3.1:1. */
.tone{color:var(--link)}
.navy .tone,.dark .tone{color:var(--accent-on-brand)}
@media (prefers-contrast:more){.tone{color:var(--text-heading)}.navy .tone,.dark .tone{color:var(--white)}}

/* ---------- Savings calculator: a dark blue band so it stands out ----------
   Ground: gradient-brand with glow-night (approved). Texture: a faint graph-paper grid, strongest top right
   and fading out before it reaches the text. The opened calculator sits on a raised card, so its controls
   keep their normal colors in both themes. */
.calc-band{position:relative;isolation:isolate;overflow:hidden;color:var(--white);
  background:radial-gradient(60% 80% at 100% 0%,rgba(51,130,185,.35),transparent 70%),
    radial-gradient(50% 70% at 0% 100%,rgba(23,116,186,.25),transparent 70%),
    linear-gradient(135deg,var(--midnight) 0%,var(--navy) 100%)}
.calc-band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(188,225,247,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(188,225,247,.14) 1px,transparent 1px),
    linear-gradient(rgba(188,225,247,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(188,225,247,.06) 1px,transparent 1px);
  background-size:128px 128px,128px 128px,32px 32px,32px 32px;background-position:right -1px top -1px;
  -webkit-mask-image:radial-gradient(75% 95% at 100% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%);
          mask-image:radial-gradient(75% 95% at 100% 0%,#000 0%,rgba(0,0,0,.5) 45%,transparent 80%)}
.calc-band .ledger{border-top-color:rgba(255,255,255,.4)}
.calc-band .ledger h2{color:var(--white)}
.calc-band .ledger .lead{color:#e8edf5}
.calc-band .ledger .eyebrow{color:var(--ice)}
.calc-band :focus-visible{outline-color:var(--ice)}
/* the open button: white on the band, larger than a standard button */
.calc-band .calc-fold>summary{min-height:60px;margin-top:var(--s5);padding:var(--s3) var(--s5);gap:var(--s3);
  font:600 18px/1 var(--body);background:var(--white);border-color:var(--white);color:var(--navy)}
.calc-band .calc-fold>summary:hover{background:var(--ice);border-color:var(--ice)}
.calc-band .calc-fold>summary::after{width:10px;height:10px;border-width:2px}
/* once open, the button steps back so the calculator leads */
.calc-band .calc-fold[open]>summary{min-height:48px;padding:var(--s2) var(--s4);font-size:16px;background:transparent;border-color:rgba(255,255,255,.6);color:var(--white)}
.calc-band .calc-fold[open]>summary:hover{background:rgba(255,255,255,.08)}
.calc-body{margin-top:var(--s5);padding:var(--s5);background:var(--surface-raised);color:var(--text)}
.calc-body>.calc-intro{margin-top:0}
.calc-body :focus-visible{outline-color:var(--focus-ring)}

@media (max-width:1100px){
  .mt-visual{grid-template-columns:minmax(0,1fr) 340px}
  .mt-stat{font-size:40px}
}
@media (max-width:820px){
  .hero-mt{padding:var(--s6) 0 var(--s7)}
  .mt-top{grid-template-columns:1fr;gap:var(--s4)}
  .mt-tabs{display:flex}
  .mt-tabs [role=tab]{flex:1;padding:var(--s2);font-size:13px}
  .mt-panel p{font-size:17px;line-height:26px}
  .mt-visual{grid-template-columns:1fr;margin-top:var(--s6)}
  .mt-chart{padding:var(--s4)}
  .mt-stat{font-size:30px}
  .mt-plot{min-height:240px}
  .mt-form input[type=text],.mt-form input[type=email],.mt-form input[type=tel],.mt-form select,.mt-form .mt-seg label{min-height:44px}
  .calc-band .calc-fold>summary{width:100%;justify-content:center}
  .calc-body{margin-left:-16px;margin-right:-16px;padding:var(--s4) 16px}
}
@media (max-width:420px){.mt-form .two{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .ready.moved .mt-tabs-ind,.mt-panel,.mt-plot .line.draw,.mt-plot .gap.draw{transition:none}
}
@media (prefers-contrast:more){.mt-tabs{border-color:var(--text)}.mt-tabs [role=tab]{color:var(--text)}}