/* LRU Solution — design layer.
   Loaded after site.css and only refines it: brand colours, fonts and wording are
   unchanged. To return to the original look, remove the design.css <link> and the
   ui.js <script> from src/partials/layout.html and rebuild. No external requests,
   and nothing here needs inline styles, so the site's Content Security Policy holds. */

:root{
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow-1:0 1px 2px rgba(10,31,68,.05),0 6px 18px rgba(10,31,68,.06);
  --shadow-2:0 2px 6px rgba(10,31,68,.06),0 18px 40px rgba(10,31,68,.13);
  --glow-blue:0 10px 26px rgba(30,111,255,.34);
  --navy-glow:radial-gradient(60% 120% at 88% -10%,rgba(30,111,255,.30),transparent 62%),
              radial-gradient(45% 90% at 105% 110%,rgba(0,184,148,.13),transparent 60%);
  --navy-grid:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
              linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
}
::selection{background:var(--blue);color:#fff}

/* ---------- Header: solid at the top, glass once the page scrolls ---------- */
.site-header{transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
.site-header.scrolled{background:rgba(10,31,68,.92);box-shadow:0 1px 0 rgba(255,255,255,.06),0 12px 32px rgba(3,10,25,.32);
  -webkit-backdrop-filter:saturate(150%) blur(12px);backdrop-filter:saturate(150%) blur(12px)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.site-header.scrolled{background:var(--navy)}}
.site-nav a:not(.btn){position:relative;padding-block:4px}
.site-nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--teal);
  transform:scaleX(0);transform-origin:left center;transition:transform .28s var(--ease)}
.site-nav a:not(.btn):hover::after,.site-nav a[aria-current="page"]::after{transform:scaleX(1)}
.site-nav a[aria-current="page"]{box-shadow:none}

/* ---------- Buttons ---------- */
.btn{transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s,border-color .2s,color .2s}
.btn:not(.btn-ghost):hover{transform:translateY(-1px);box-shadow:var(--glow-blue)}
.btn:active{transform:translateY(0);box-shadow:none}
/* A drawn chevron on primary calls to action: decoration only, nothing for a screen reader to read. */
.cta-row .btn:not(.btn-ghost)::after{content:"";display:inline-block;width:6px;height:6px;margin-left:10px;
  border-top:2px solid currentColor;border-right:2px solid currentColor;transform:translateY(-1px) rotate(45deg);transition:transform .22s var(--ease)}
.cta-row .btn:not(.btn-ghost):hover::after{transform:translate(3px,-1px) rotate(45deg)}
.btn-ghost:hover{transform:translateY(-1px)}

/* ---------- The instrument tick: every section label gets a short leading rule ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:20px;height:1px;background:currentColor;opacity:.75;flex:none}

/* ---------- Navy surfaces: grid plus a soft blue/teal glow ---------- */
.hero,.page-head,section.band.navy{position:relative;overflow:hidden;background-color:var(--navy);
  background-image:var(--navy-glow),var(--navy-grid);background-size:auto,auto,44px 44px,44px 44px}
.hero{padding-block:84px 96px}
.page-head{padding-block:72px 64px}
.page-head h1{letter-spacing:-.025em;max-width:22em}
.hero::after,.page-head::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(86,204,242,.5),rgba(0,184,148,.5),transparent)}

/* Hero headline: an amber marker stroke under the key phrase, the colour of the outlier cell. */
.hero h1 .hl{background-image:linear-gradient(transparent 84%,var(--amber) 84%,var(--amber) 92%,transparent 92%);
  background-repeat:no-repeat;background-size:0% 100%;animation:hlSweep 1.1s .55s var(--ease) forwards;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
@keyframes hlSweep{to{background-size:100% 100%}}

/* ---------- Hero figure: cells sweep in by column, a scan passes, the outlier pulses ---------- */
.fleetgrid{position:relative;border-radius:10px;padding:20px 20px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),var(--navy-2);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07)}
.fleetgrid::before{content:"";position:absolute;inset:-1px;border-radius:11px;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(86,204,242,.55),rgba(30,111,255,.1) 40%,rgba(255,181,71,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fg-table{position:relative}
.fg-c{animation:cellIn .5s var(--ease) both}
.fg-table > .fg-c:nth-child(9n+2){animation-delay:.10s}
.fg-table > .fg-c:nth-child(9n+3){animation-delay:.16s}
.fg-table > .fg-c:nth-child(9n+4){animation-delay:.22s}
.fg-table > .fg-c:nth-child(9n+5){animation-delay:.28s}
.fg-table > .fg-c:nth-child(9n+6){animation-delay:.34s}
.fg-table > .fg-c:nth-child(9n+7){animation-delay:.40s}
.fg-table > .fg-c:nth-child(9n+8){animation-delay:.46s}
.fg-table > .fg-c:nth-child(9n){animation-delay:.52s}
@keyframes cellIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.fg-table::after{content:"";position:absolute;left:54px;right:0;top:0;height:46px;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(86,204,242,.10) 55%,rgba(86,204,242,.38));border-bottom:1px solid rgba(86,204,242,.85);
  animation:scan 1.9s 1.05s cubic-bezier(.45,0,.25,1) both}
@keyframes scan{0%{transform:translateY(-46px);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(calc(var(--fg-h,240px)));opacity:0}}
.fg-c.hot{animation:cellIn .5s var(--ease) both,hotPulse 2.6s 3s ease-in-out infinite}
@keyframes hotPulse{0%,100%{box-shadow:0 0 0 2px var(--navy-2),0 0 0 4px var(--amber)}
  50%{box-shadow:0 0 0 2px var(--navy-2),0 0 0 4px var(--amber),0 0 0 14px rgba(255,181,71,.16)}}
.fg-c{transition:filter .15s}
.fg-c:hover{filter:brightness(1.35)}

/* ---------- Sections and cards ---------- */
section.band.navy .eyebrow{color:var(--teal)}
section.band{padding-block:88px}
.sec-head{margin-bottom:40px}
.sec-head h2{letter-spacing:-.022em}
.card{transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#C6D3E4}
.finding{border-top:0;position:relative;overflow:hidden}
.finding::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--blue),var(--teal))}
.card h3{letter-spacing:-.01em}

/* Icon badge used on the "Your data" cards */
.ico{display:grid;place-items:center;width:44px;height:44px;border-radius:10px;margin-bottom:16px;
  background:linear-gradient(140deg,var(--blue-bg),var(--teal-bg));color:var(--blue-d)}
.ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Split layout: a sticky heading beside a list (used for "Why it gets missed") */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}
.split > .sec-head{position:sticky;top:110px;margin-bottom:0}
.reasons{list-style:none;margin:0;padding:0;counter-reset:r}
.reasons li{counter-increment:r;display:grid;grid-template-columns:64px minmax(0,1fr);gap:4px 18px;padding:28px 0;border-top:1px solid var(--rule)}
.reasons li:last-child{border-bottom:1px solid var(--rule)}
.reasons li::before{content:"0" counter(r);grid-row:span 2;font-family:var(--display);font-weight:700;font-size:40px;line-height:1;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.reasons h3{font-size:21px;margin:2px 0 6px}
.reasons p{color:var(--ink2);margin:0;font-size:16.5px}

/* Compare: lift the full-system column */
.compare{box-shadow:var(--shadow-1);border-radius:8px}
.compare .full{position:relative;background-image:var(--navy-glow);background-color:var(--navy)}
.compare .full::before{content:"";position:absolute;inset:0;border:1px solid rgba(86,204,242,.35);border-radius:0 8px 8px 0;pointer-events:none}

/* How it works: a connected timeline */
ol.steps{gap:32px}
ol.steps li{border-top:0;padding-top:0;position:relative}
ol.steps li::before{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;margin-bottom:18px;
  border:1px solid rgba(0,184,148,.65);background:rgba(0,184,148,.09);box-shadow:0 0 0 7px rgba(0,184,148,.05);font-size:13px}
ol.steps li:not(:last-child)::after{content:"";position:absolute;top:23px;left:62px;right:-18px;height:1px;
  background:linear-gradient(90deg,rgba(0,184,148,.7),rgba(30,111,255,.25))}

/* Statement band ("Who we are") */
.statement{display:grid;grid-template-columns:auto minmax(0,1fr);gap:56px;align-items:center}
.big-num{display:flex;flex-direction:column;align-items:flex-start;padding-right:56px;border-right:1px solid var(--rule)}
.big-num b{font-family:var(--display);font-weight:800;font-size:clamp(88px,11vw,148px);line-height:.85;letter-spacing:-.06em;
  background:linear-gradient(160deg,var(--navy) 30%,var(--blue));-webkit-background-clip:text;background-clip:text;color:transparent}
.big-num span{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:14px;max-width:16em}
.statement .sec-head{margin-bottom:0}

/* ---------- Product showcase ---------- */
.showcase-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.showcase-head .sec-head{margin-bottom:0}
.showcase-head .cta-row{margin-top:0}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.tab{font:inherit;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2);background:transparent;cursor:pointer;
  border:1px solid var(--rule);border-radius:999px;padding:8px 16px;transition:all .2s var(--ease)}
.tab:hover{border-color:var(--blue);color:var(--blue-d)}
.tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 6px 18px rgba(10,31,68,.22)}
.browser{margin:0;border-radius:12px;overflow:hidden;background:#0B1A36;
  box-shadow:0 50px 100px -30px rgba(10,31,68,.55),0 0 0 1px rgba(10,31,68,.12)}
.browser-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#0F2347;border-bottom:1px solid #1A3A75}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#2A4677}
.browser-bar i:first-child{background:#E5655B}.browser-bar i:nth-child(2){background:#F2B33D}.browser-bar i:nth-child(3){background:#3DBE6A}
.browser-bar span{margin-left:12px;flex:1;max-width:420px;font-family:var(--mono);font-size:12px;color:var(--on-navy-2);
  background:#0A1B3A;border:1px solid #1A3A75;border-radius:6px;padding:4px 12px}
.browser-view{position:relative;aspect-ratio:16/10;background:#07152F}
.browser-view > [role="tabpanel"]{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.browser-view > [role="tabpanel"].is-active{opacity:1;visibility:visible;transition:opacity .45s var(--ease),visibility 0s}
.browser-view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.browser-view > [role="tabpanel"]:focus-visible{outline-offset:-4px}
.shot-cap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px;color:var(--ink2);font-size:16px}
.shot-cap .note{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Hero figure: fuel found, by lever ---------- */
.levers-card{margin:0;width:100%}
.lv-defs{position:absolute;width:0;height:0;overflow:hidden}
.lv-hatch-bg{fill:rgba(86,204,242,.12)}
.lv-hatch-fg{fill:#56CCF2}
.lv-total{display:flex;align-items:flex-end;gap:14px;margin:4px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--navy-3)}
.lv-total b{font-family:var(--display);font-weight:800;font-size:52px;line-height:.9;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.lv-total span{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);line-height:1.5}
.lv-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.lv{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;align-items:baseline}
.lv-name{font-size:14.5px;color:var(--on-navy)}
.lv-val{font-family:var(--mono);font-size:12.5px;font-weight:500;color:#fff;font-variant-numeric:tabular-nums}
.lv-bar{grid-column:1/-1;display:block;width:100%;height:8px}
.lv-track{fill:rgba(255,255,255,.06)}
.lv-fill{fill:var(--blue);transform-box:fill-box;transform-origin:left center;animation:barGrow 1s var(--ease) both}
.lv-fill.lead{fill:url(#lv-hatch)}
.lv:nth-child(1) .lv-fill{animation-delay:.25s;fill:#4B86EE}
.lv:nth-child(2) .lv-fill{animation-delay:.38s}
.lv:nth-child(3) .lv-fill{animation-delay:.51s}
.lv:nth-child(4) .lv-fill{animation-delay:.64s}
.lv:nth-child(5) .lv-fill{animation-delay:.77s}
@keyframes barGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.levers-card .fg-legend{margin-top:16px}
.lv-sw{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0;background:var(--blue)}
.lv-sw.lead{background:repeating-linear-gradient(45deg,#56CCF2 0 2px,rgba(86,204,242,.15) 2px 5px)}
.levers-card .fg-cap{font-size:14px}
.levers-card .fg-cap b{color:#fff}
.levers-card .fg-cap a{color:var(--teal);white-space:nowrap}

/* ---------- Home: proof lines and free tools ---------- */
.proof{margin-top:16px!important;padding-top:14px;border-top:1px dashed var(--rule);font-size:15px!important;color:var(--ink)!important}
.proof b{font-family:var(--display);font-weight:700;color:var(--blue-d);font-variant-numeric:tabular-nums}
.tools .tool-card{padding:28px}
.tools .tool-card h3{font-size:22px}
.tools .cta-row{margin-top:20px}

/* ---------- Reliability page ---------- */
.chips-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start}
.chips-list li{background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:9px 16px;font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink2)}
.tiles + .note{margin-top:14px}
.fine a{font-weight:600}

/* ---------- Tiles, pricing, calculator, forms ---------- */
.tiles{border-radius:8px;box-shadow:var(--shadow-1)}
.tile .v{letter-spacing:-.02em}
.price-card{transition:box-shadow .25s var(--ease)}
.price-card.main{border:0;position:relative;box-shadow:0 0 0 2px var(--blue),var(--shadow-2)}
.calc-out{background-image:var(--navy-glow);box-shadow:var(--shadow-2)}
input[type=text],input[type=email],input[type=number],select,textarea{transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 4px rgba(30,111,255,.16)}
.tool{border-radius:10px;box-shadow:var(--shadow-1)}
.consent{border-radius:10px;box-shadow:0 24px 60px rgba(10,31,68,.28)}
.site-footer{position:relative}
.site-footer::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(86,204,242,.45),transparent)}

/* ---------- Fleet Intelligence: actions (hero card and anatomy) ---------- */
.actions-card{margin:0;width:100%}
.ac-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ac{background:rgba(255,255,255,.035);border:1px solid var(--navy-3);border-left:3px solid var(--blue);border-radius:6px;padding:12px 14px;
  animation:acIn .55s var(--ease) both}
.ac.ac-safety{border-left-color:#F0675C}.ac.ac-rel{border-left-color:var(--amber)}.ac.ac-cost{border-left-color:#4B86EE}
.ac:nth-child(1){animation-delay:.15s}.ac:nth-child(2){animation-delay:.27s}.ac:nth-child(3){animation-delay:.39s}.ac:nth-child(4){animation-delay:.51s}
@keyframes acIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ac-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:7px}
.ac-sev,.ac-prod,.ac-money{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:3px;white-space:nowrap;line-height:1.5}
.sev-safety{background:var(--crit-bg);color:var(--crit)}
.sev-rel{background:var(--amber-bg);color:var(--amber-d)}
.sev-cost{background:var(--blue-bg);color:var(--blue-d)}
.ac-prod{color:var(--on-navy-2);box-shadow:inset 0 0 0 1px var(--navy-3)}
.ac-money{margin-left:auto;color:var(--teal);padding-inline:0}
.ac-title{font-family:var(--display);font-weight:600;font-size:15.5px;color:#fff;line-height:1.3}
.ac-why{font-size:14px;color:var(--on-navy-2);margin-top:3px;line-height:1.45}
.ac-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--navy-3);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-navy-2)}
.ac-foot b{font-family:var(--display);font-size:22px;font-weight:700;color:#fff;letter-spacing:-.02em;margin-right:6px}
.anatomy{background:var(--surface);border:1px solid var(--rule);border-left:4px solid var(--amber);border-radius:10px;padding:26px 28px;box-shadow:var(--shadow-2)}
.anatomy.is-safety{border-left-color:var(--crit)}
.anatomy .ac-prod{color:var(--ink2);box-shadow:inset 0 0 0 1px var(--rule)}
.anatomy h3{font-size:21px;margin:12px 0 16px}
.anatomy-block{padding:14px 0;border-top:1px solid var(--rule2)}
.anatomy-label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);margin-bottom:6px}
.anatomy-block p{margin:0;color:var(--ink2);font-size:16px}
.anatomy-block ul{margin:0;padding-left:20px;color:var(--ink2);font-size:16px}
.anatomy-block li + li{margin-top:5px}
.anatomy-controls{display:flex;gap:8px;flex-wrap:wrap;padding-top:16px;border-top:1px solid var(--rule2)}
.ctl{font-size:13.5px;color:var(--ink2);background:var(--sunk);border:1px solid var(--rule);border-radius:6px;padding:5px 10px}
.ctl:first-child{background:var(--teal-bg);color:var(--teal-d);border-color:transparent;font-weight:600}

/* ---------- Home: the three products ---------- */
.products{margin-top:14px}
.products .product{display:flex;flex-direction:column;position:relative;text-decoration:none;color:inherit}
.products .product p:not(.proof){flex:1}
.main-product{border-color:transparent;box-shadow:0 0 0 2px var(--blue),var(--shadow-1)}
.main-product:hover{border-color:transparent;box-shadow:0 0 0 2px var(--blue),var(--shadow-2)}
.product-badge{position:absolute;top:-12px;left:22px;background:var(--blue);color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;line-height:1.4}
.product .more{margin-top:16px;font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--blue-d)}
.product .more::after{content:"";display:inline-block;width:6px;height:6px;margin-left:9px;border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.product:hover .more{color:var(--blue)}
.product:hover .more::after{transform:translate(3px,-2px) rotate(45deg)}

/* ---------- Journey: compact strip and full stages ---------- */
.journey-mini{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));counter-reset:j}
.journey-mini li{counter-increment:j;position:relative;padding:46px 22px 0 0}
.journey-mini li::before{content:counter(j);position:absolute;top:0;left:0;z-index:1;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--blue);color:var(--blue-d);font-family:var(--display);font-weight:700;font-size:14px}
.journey-mini li::after{content:"";position:absolute;top:15px;left:32px;right:0;height:2px;background:linear-gradient(90deg,var(--blue),var(--rule))}
.journey-mini li:last-child::after{display:none}
.journey-mini b{display:block;font-family:var(--display);font-size:17.5px;margin-bottom:4px}
.journey-mini span{display:block;color:var(--ink2);font-size:15px;line-height:1.45}
.journey{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.stage{display:grid;grid-template-columns:250px minmax(0,1fr);gap:8px 40px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;padding:30px 32px;
  transition:box-shadow .25s var(--ease),border-color .25s}
.stage:hover{box-shadow:var(--shadow-2);border-color:#C6D3E4}
.stage.key{border-color:transparent;box-shadow:0 0 0 2px var(--blue),var(--shadow-1)}
.stage-head{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.stage-n{font-family:var(--display);font-weight:800;font-size:44px;line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(180deg,var(--blue),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}
.stage-head h3{font-size:23px}
.stage-when{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d);background:var(--teal-bg);border-radius:3px;padding:3px 8px}
.stage-body{margin:0;display:grid;grid-template-columns:90px minmax(0,1fr);gap:12px 22px}
.stage-body dt{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding-top:4px}
.stage-body dd{margin:0;color:var(--ink2);font-size:16.5px}
.stage-body dd:last-of-type{color:var(--ink);font-weight:600}

/* ---------- Product pages: screenshots, part numbers, tables ---------- */
.shot-solo{border-radius:12px;overflow:hidden;background:#07152F;box-shadow:0 50px 100px -30px rgba(10,31,68,.45),0 0 0 1px rgba(10,31,68,.12)}
.shot-solo img{display:block;width:100%;height:auto}
.shot-solo + .note{margin-top:16px}
.pn-card{background:var(--navy);background-image:var(--navy-glow);border-radius:10px;padding:20px 22px 8px;box-shadow:var(--shadow-2);color:var(--on-navy)}
.pn-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--navy-3)}
.pn-row b{display:block;font-family:var(--display);font-weight:600;color:#fff;font-size:16.5px}
.pn-row span{display:block;font-size:14px;color:var(--on-navy-2);line-height:1.45}
.pn-row strong{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-card + .note{margin-top:12px}
.table-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--shadow-1)}
.table-wrap table.data{font-size:15.5px}
.table-wrap table.data th,.table-wrap table.data td{padding:12px 18px}
.table-wrap table.data td:first-child{white-space:nowrap}
.table-wrap table.data td:last-child .chip{margin:2px 4px 2px 0}
table.data.records td:last-child{white-space:nowrap;width:1%}
.cta-row.center{justify-content:center}

/* ---------- Suggestions page ---------- */
.rank-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.rank-tiles .tile{padding:22px}
.rank-tiles .tile .v{font-size:24px}
.rank-tiles .tile:nth-child(1){box-shadow:inset 0 3px 0 var(--crit)}
.rank-tiles .tile:nth-child(2){box-shadow:inset 0 3px 0 var(--amber)}
.rank-tiles .tile:nth-child(3){box-shadow:inset 0 3px 0 var(--blue)}
.rank-tiles .tile:nth-child(4){box-shadow:inset 0 3px 0 var(--rule)}
.sev-text-safety{color:var(--crit)}.sev-text-rel{color:var(--amber-d)}.sev-text-cost{color:var(--blue-d)}.sev-text-data{color:var(--mut)}
.rule-list{list-style:none;margin:0;padding:0}
.rule-list li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--rule2);font-size:15.5px;color:var(--ink2);line-height:1.45}
.rule-list li:first-child{border-top:0;padding-top:2px}
.rule-list li::before{content:"";position:absolute;left:1px;top:16px;width:7px;height:7px;border-radius:2px;background:var(--teal)}
.rule-list li:first-child::before{top:9px}

/* ---------- Pricing: what the one price covers ---------- */
.grid2.pricing{align-items:start}
.price-products{display:grid;gap:8px;margin:0 0 18px}
.price-products div{background:var(--paper);border:1px solid var(--rule2);border-radius:8px;padding:11px 14px}
.price-products div:first-child{background:var(--blue-bg);border-color:#C9DAFF}
.price-products b{display:block;font-family:var(--display);font-size:16px;color:var(--ink)}
.price-products span{display:block;font-size:14.5px;color:var(--ink2);line-height:1.45}

/* ---------- Footer: brand plus three link columns ---------- */
.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}

/* ---------- Scroll reveal (ui.js tags only what starts below the fold) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
/* Eight nav items: switch to the menu button earlier than the base stylesheet does. */
@media (max-width:1100px){
  .stage{grid-template-columns:1fr;gap:18px}
  .stage-head{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px 16px}
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:64px;background:var(--navy);padding:14px 22px 20px;flex-direction:column;align-items:flex-start;gap:14px;border-top:1px solid var(--navy-3);box-shadow:0 18px 40px rgba(3,10,25,.4)}
  .site-nav.open{display:flex}
  .site-nav a:not(.btn)::after{display:none}
}

@media (max-width:900px){
  section.band{padding-block:64px}
  .hero{padding-block:56px 64px}
  .page-head{padding-block:52px 46px}
  .split,.statement{grid-template-columns:1fr;gap:28px}
  .split > .sec-head{position:static}
  .big-num{flex-direction:row;align-items:baseline;gap:14px;padding-right:0;border-right:0;padding-bottom:22px;border-bottom:1px solid var(--rule)}
  .big-num span{margin-top:0}
  ol.steps li:not(:last-child)::after{display:none}
  .site-nav{box-shadow:0 18px 40px rgba(3,10,25,.4)}
  .site-nav a:not(.btn){font-size:17px;padding-block:6px}
  .site-nav a:not(.btn)::after{display:none}
  .journey-mini{grid-template-columns:1fr}
  .journey-mini li{padding:0 0 22px 50px}
  .journey-mini li:last-child{padding-bottom:0}
  .journey-mini li::after{top:32px;bottom:0;left:15px;right:auto;width:2px;height:auto;background:var(--rule)}
  .rank-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
}
@media (max-width:560px){
  .lv-total b{font-size:42px}
  .reasons li{grid-template-columns:48px minmax(0,1fr)}
  .reasons li::before{font-size:30px}
  .browser-bar span{display:none}
  .stage{padding:22px 20px}
  .stage-body{grid-template-columns:1fr;gap:2px}
  .stage-body dd{margin-bottom:10px}
  .stage-body dd:last-of-type{margin-bottom:0}
  .anatomy{padding:20px}
  .ac-money{margin-left:0;flex-basis:100%}
  .pn-row strong{font-size:20px}
  .rank-tiles{grid-template-columns:1fr}
  table.data.records thead,table.data.needs thead{display:none}
  table.data.records tr,table.data.needs tr{display:block;padding:12px 16px;border-bottom:1px solid var(--rule2)}
  table.data.records tr:last-child,table.data.needs tr:last-child{border-bottom:0}
  table.data.records td,table.data.needs td{display:block;border:0;padding:2px 0!important;white-space:normal!important}
  table.data.records td:last-child{width:auto;padding-top:6px!important}
  .actions-card .fg-title{flex-direction:column;gap:2px}
  .tab{padding:7px 12px;font-size:14px}
}

/* Touch screens can't "click": drop the hint there. */
@media (hover:none){.shot-cap .note{display:none}}

/* ---------- Respect a request for less motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fg-c,.fg-c.hot,.fg-table::after,.hero h1 .hl,.lv-fill,.ac{animation:none!important}
  .hero h1 .hl{background-size:100% 100%}
  .fg-table::after{display:none}
  .reveal{opacity:1;transform:none;transition:none}
  .card,.btn,.browser-view > [role="tabpanel"],.stage{transition:none}
}
@media print{.reveal{opacity:1!important;transform:none!important}.browser,.tabs{display:none}}