/* Manrope (SIL OFL 1.1), latin + latin-ext, variable 400-800 */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/manrope-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Marine Mechanic Salary: one stylesheet for every page.
   House style (navy + action + amber accent, white cards on a light blue-grey background, dark footer).
   Font: Manrope (SIL OFL, self-hosted). Icons: Tabler (MIT, SVG sprite). Mobile-first where it matters. */

/* 1. tokens */
:root{
  --bg:#f3f6fa;--card:#fff;--ink:#0a2540;--ink2:#1f3a57;--muted:#566476;--line:#e1e6ec;--soft:#edf1f5;
  --navy:#0a2540;--navy-2:#123a63;
  --steel:#0a6b85;--steel-d:#07546a;--steel-l:#e0f1f4;
  --orange:#1aa9b5;--orange-d:#45c2cb;--orange-l:#dcf3f5;--on-or:#0a2540;
  --amber:#fbb727;--amber-l:#fff3dc;
  --green:#1b7a50;--green-l:#e2f4ec;--red:#b8322a;--red-l:#fbe7e5;
  --q0:#d9f0f2;--q1:#9fd8de;--q2:#55b4c3;--q3:#1d7f98;--q4:#0b3d5c;
  --r:16px;--max:1200px;--shadow:0 10px 30px rgba(10,37,64,.08);--shadow-lg:0 24px 60px rgba(10,37,64,.22)}
*{box-sizing:border-box}[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:clip}
[id]{scroll-margin-top:84px}

/* 2. type & basics */
h1,h2,h3{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.015em}
h1{font-size:clamp(1.95rem,4.4vw,3rem)}h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-top:1.6em}h3{font-size:1.15rem;margin-top:1.2em}
.card>h2:first-child,.card>h3:first-child{margin-top:0}
a{color:var(--steel);text-underline-offset:2px}a:hover{color:var(--ink)}p{margin:0 0 1em}img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
.ico{width:1.1em;height:1.1em;vertical-align:-.18em;flex:none}
.note,.source{font-size:.88rem;color:var(--muted)}.source a{color:var(--muted)}
.lede{font-size:1.08rem;color:var(--ink2);max-width:75ch}

/* 3. header */
.top{background:#fff;position:sticky;top:0;z-index:50;box-shadow:0 1px 0 var(--line)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:66px}
.logo{display:flex;align-items:center;flex:none}.logo img{display:block;height:40px;width:auto}
@media(max-width:520px){.logo img{height:32px}}
.nav{margin-left:auto;display:flex;gap:2px;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);text-decoration:none;padding:8px 10px;border-radius:10px;font-weight:700;font-size:.92rem;white-space:nowrap;line-height:1.2}
.nav a .ico{color:var(--steel)}.nav a:hover,.nav a[aria-current]{background:var(--steel-l);color:var(--ink)}
.nav .navcta{background:var(--orange);color:var(--on-or);margin-left:6px}.nav .navcta .ico{color:var(--on-or)}.nav .navcta:hover{background:var(--orange-d);color:var(--on-or)}
.navbtn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--ink);border-radius:10px;padding:7px 9px;cursor:pointer}.navbtn .ico{width:24px;height:24px}
@media(max-width:1000px){.navbtn{display:block}
 .nav{display:none;position:absolute;left:0;right:0;top:66px;background:#fff;flex-direction:column;align-items:stretch;padding:8px 16px 16px;box-shadow:0 14px 24px rgba(10,37,64,.12)}
 .nav.open{display:flex}.nav a{padding:12px}.nav .navcta{margin:6px 0 0;justify-content:center}}
.crumbs{font-size:.85rem;color:#c9d6e4;margin:0 0 8px}.crumbs a{color:#eaf1f8}.crumbs span[aria-hidden]{margin:0 6px;opacity:.6}

/* 4. hero (compact variant of the house hero: the figure comes first) */
.xhero{position:relative;background:linear-gradient(110deg,#06182b 0%,var(--navy) 45%,var(--navy-2) 100%);color:#fff;overflow:hidden;isolation:isolate}
.xhero-bg{position:absolute;inset:0;z-index:0}.xhero-bg img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.xhero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,24,43,.96) 0%,rgba(6,24,43,.86) 40%,rgba(10,37,64,.45) 70%,rgba(10,37,64,.08) 100%)}
.xhero-motif{position:absolute;z-index:1;right:-30px;bottom:-24px;width:360px;height:auto;opacity:.13;pointer-events:none}
.xhero:after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:-1px;height:30px;background:var(--bg);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20C200 0 400 0 600 14s400 22 600 0v20z'/%3E%3C/svg%3E") center/100% 100%;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 34V20C200 0 400 0 600 14s400 22 600 0v20z'/%3E%3C/svg%3E") center/100% 100%}
.xhero-in{position:relative;z-index:2;padding:18px 16px 56px}
.xhero.strip-under .xhero-in{padding-bottom:70px}
.kicker{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);background:var(--amber);padding:5px 12px;border-radius:99px;margin:4px 0 10px}
.xhero h1{color:#fff;max-width:880px;font-size:clamp(1.75rem,3.6vw,2.5rem);text-shadow:0 2px 18px rgba(0,0,0,.3);margin-bottom:.25em}
.xhero .tail{font-size:clamp(1.25rem,2.6vw,1.75rem);color:var(--amber);margin:0 0 .4em;font-weight:800;line-height:1.2;max-width:880px}
.xlead{max-width:740px;font-size:1.02rem;color:#dfe8f2;margin-bottom:.8em}.xlead a{color:#fff}.xlead strong{color:#fff}
.mini{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.mini span,.mini a{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);padding:4px 12px;border-radius:99px;font-size:.84rem;font-weight:600;color:#fff;text-decoration:none}
.mini a:hover{background:var(--amber);color:var(--ink)}.mini .ico{color:var(--amber)}
.hpanel{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 0;max-width:720px;background:#fff;border-radius:var(--r);padding:8px;box-shadow:var(--shadow-lg)}
.hpanel label{position:absolute;left:-9999px}
.hpanel select{flex:1 1 220px;min-width:0;padding:11px 12px;border:1px solid var(--line);border-radius:12px;font:inherit;font-weight:600;background:#fff;min-height:48px;color:var(--ink)}
.hbtns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
@media(max-width:700px){.xhero-bg:after{background:linear-gradient(180deg,rgba(6,24,43,.84),rgba(6,24,43,.94))}.xhero-motif{display:none}}
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;margin:-46px 0 18px;position:relative;z-index:3;box-shadow:var(--shadow)}
.strip div{background:#fff;padding:14px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}
.strip .ico{grid-row:span 2;width:30px;height:30px;color:var(--steel)}.strip strong{font-size:1.45rem;line-height:1.1}.strip span{font-size:.82rem;color:var(--muted)}
@media(max-width:760px){.strip{grid-template-columns:1fr 1fr}.strip div{padding:12px}.strip strong{font-size:1.2rem}.strip .ico{width:24px;height:24px}}

/* 5. buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;min-height:46px;border-radius:12px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;cursor:pointer;font-family:inherit}
.btn:hover{background:#000;color:#fff}.btn.ghost{background:transparent;color:var(--ink)}.btn.ghost:hover{background:var(--soft)}
.btn.ghost.light{color:#fff;border-color:rgba(255,255,255,.55)}.btn.ghost.light:hover{background:rgba(255,255,255,.1)}
.btn.or{background:var(--orange);border-color:var(--orange);color:var(--on-or)}.btn.or:hover{background:var(--orange-d);border-color:var(--orange-d);color:var(--on-or)}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.more{margin:4px 0 24px}.morebtn{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:12px;background:#fff;border:2px solid var(--steel);color:var(--steel-d);font-weight:800;text-decoration:none}
.morebtn:hover{background:var(--steel);color:#fff}

/* 6. layout & cards */
.grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start;margin:22px 0 40px}
.grid>*{min-width:0}
@media(max-width:980px){.grid{grid-template-columns:1fr}}
.side{display:flex;flex-direction:column;gap:16px;position:sticky;top:84px}@media(max-width:980px){.side{position:static}}
.side .card{margin:0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:18px}
@media(max-width:600px){.card{padding:16px}}
.prose{max-width:860px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media(max-width:760px){.two{grid-template-columns:1fr}}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0 18px}
.kpi div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px}.kpi b{display:block;font-size:1.4rem;line-height:1.15;color:var(--steel-d)}.kpi span{font-size:.84rem;color:var(--muted)}
.facts{list-style:none;margin:0;padding:0}.facts li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:.93rem}
.facts li:last-child{border:0}.facts b{text-align:right}.facts span{color:var(--muted)}
.gcta{background:var(--navy);color:#dbe5ef;border:0}.gcta h2,.gcta h3{color:#fff;font-size:1.2rem;margin:.2em 0 .4em}.gcta .ico{color:var(--amber)}.gcta p{font-size:.93rem}
.notice{background:var(--steel-l);border-left:4px solid var(--steel);padding:10px 14px;border-radius:0 12px 12px 0;margin:12px 0}
.notice-warn,.callout{background:var(--amber-l);border-left:4px solid var(--amber);padding:12px 16px;border-radius:0 12px 12px 0;margin:12px 0;color:#3d3000}
.notice ul,.notice-warn ul{margin:.3em 0 0;padding-left:1.2em}

/* 7. link cards */
.lcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;list-style:none;padding:0;margin:12px 0 24px}
.lcards a{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;color:var(--ink);height:100%;transition:border-color .15s,box-shadow .15s}
.lcards a:hover{border-color:var(--steel);box-shadow:var(--shadow)}
.lcards b{display:block;line-height:1.3}.lcards small{color:var(--muted);font-size:.84rem;display:block}
.lci{flex:none;width:44px;height:44px;border-radius:12px;background:var(--steel-l);color:var(--steel-d);display:flex;align-items:center;justify-content:center}.lci .ico{width:23px;height:23px}
.lcards li:nth-child(3n+2) .lci{background:var(--amber-l);color:#8a5a00}.lcards li:nth-child(3n) .lci{background:var(--orange-l);color:#0f6b63}
.lcards .arr{margin-left:auto;color:var(--steel)}

/* 8. tables (stack into labelled rows on phones: no nested horizontal scroll) */
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
.cmp{background:#fff;border:1px solid var(--line);font-size:.92rem;margin:10px 0 14px;border-radius:12px;overflow:hidden}
.cmp caption{text-align:left;font-size:.86rem;color:var(--muted);padding:0 0 8px;caption-side:top}
.cmp th,.cmp td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.cmp thead th{background:var(--navy);color:#fff;font-weight:700;font-size:.85rem}
.cmp tbody tr:nth-child(even){background:#fafbfd}
.cmp td.num,.cmp th.num{text-align:right}
.cmp th button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.cmp th button::after{content:"↕";opacity:.5}.cmp th[aria-sort=ascending] button::after{content:"↑";opacity:1}.cmp th[aria-sort=descending] button::after{content:"↓";opacity:1}
.na{color:var(--muted)}
.bar{display:block;height:6px;background:linear-gradient(90deg,var(--q1),var(--steel));border-radius:3px;margin-top:4px}
.sort-mobile{display:none;font-size:.88rem;color:var(--muted)}
@media(max-width:700px){
 table.stack thead{position:absolute;left:-9999px}
 table.stack,table.stack tbody,table.stack caption{display:block;width:100%}
 table.stack caption{padding:8px 12px 0}
 table.stack tr{display:block;border-bottom:1px solid var(--line);padding:8px 12px}
 table.stack td,table.stack th[scope=row]{display:flex;justify-content:space-between;gap:12px;border:0;padding:3px 0;text-align:right}
 table.stack td::before,table.stack th[scope=row]::before{content:attr(data-label);color:var(--muted);font-size:.84rem;font-weight:600;text-align:left}
 table.stack .bar,table.stack td.opt{display:none}.sort-mobile,.mob-only{display:block}}
.mob-only{display:none}

/* 9. range chart (percentile bands) */
.chart{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;margin:14px 0}
.rc-row{margin-bottom:16px}
.rc-label{margin:0 0 4px;font-size:.92rem;color:var(--ink2)}.rc-label strong{color:var(--ink);margin-right:6px}
.rc-track{position:relative;height:20px;margin:0 14px}
.rc-grid span{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--line)}
.rc-outer,.rc-inner,.rc-med{position:absolute;top:2px;height:16px}
.rc-outer{background:var(--q0);border-radius:8px}.rc-inner{background:var(--steel)}
.rc-med{width:4px;top:-3px;height:26px;margin-left:-2px;border-radius:2px;background:var(--navy)}
.rc-row.us .rc-outer{background:var(--soft);outline:1px solid var(--line)}.rc-row.us .rc-inner{background:#8aa1b6}
.rc-axis{position:relative;height:18px;margin:0 14px;font-size:.78rem;color:var(--muted)}
.rc-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.84rem;color:var(--muted);margin:6px 0 0;padding:0;list-style:none}
.legend i{display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:middle;border-radius:2px}

/* 10. state map + list (house "list + map", without pins: the map is coloured by median pay) */
.locs{display:grid;grid-template-columns:minmax(260px,330px) 1fr;gap:14px;align-items:stretch;margin:12px 0 8px}
.locs>*{min-width:0}
.loclist{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:auto;max-height:560px}
.loclist .lh{display:flex;justify-content:space-between;align-items:center;padding:11px 14px;font-weight:800;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff;z-index:1}
.loclist ul{list-style:none;margin:0;padding:0}
.loclist li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--soft)}
.loclist li.hl,.loclist li:hover{background:var(--steel-l)}
.loclist li .rk{font-size:.75rem;font-weight:800;color:var(--muted);text-align:right}
.loclist li a{text-decoration:none;color:var(--ink);font-weight:700;font-size:.93rem;min-width:0}.loclist li a:hover{text-decoration:underline}
.cnt{background:var(--steel-l);color:var(--steel-d);font-weight:800;font-size:.8rem;padding:2px 9px;border-radius:99px;white-space:nowrap}
.loclist li.nodata .cnt{background:var(--soft);color:var(--muted)}
.usmap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;justify-content:center}
.usmap svg{width:100%;height:auto;display:block}
.usmap path{stroke:#fff;stroke-width:1;stroke-linejoin:round;transition:opacity .15s}
.usmap a:hover path,.usmap a:focus path,.usmap path.hl{stroke:var(--navy);stroke-width:2.5}
.usmap a:focus{outline:none}
.q0{fill:var(--q0)}.q1{fill:var(--q1)}.q2{fill:var(--q2)}.q3{fill:var(--q3)}.q4{fill:var(--q4)}.qn{fill:url(#nodata)}
.usmap .legend i.q0{background:var(--q0)}.usmap .legend i.q1{background:var(--q1)}.usmap .legend i.q2{background:var(--q2)}.usmap .legend i.q3{background:var(--q3)}.usmap .legend i.q4{background:var(--q4)}
.usmap .legend i.qn{background:repeating-linear-gradient(45deg,#e9edf2 0 3px,#cfd6df 3px 5px)}
@media(max-width:820px){.locs{grid-template-columns:1fr}.loclist{max-height:320px;order:2}}

/* 11. calculator & comparator (form left, dark result panel right) */
.calc{display:grid;grid-template-columns:1.2fr .95fr;gap:20px 28px;margin:22px 0;align-items:start}
.calc>*{min-width:0}
.cform h2{font-size:1.12rem;display:flex;gap:8px;align-items:center;margin:1.1em 0 .5em}.cform h2:first-child{margin-top:0}.cform h2 .ico{color:var(--steel)}
.persona{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}
.persona button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border-radius:14px;border:2px solid var(--line);background:#fff;font:800 .86rem Manrope,sans-serif;color:var(--ink);cursor:pointer;text-align:center;line-height:1.2;min-height:44px}
.persona button .ico{width:26px;height:26px;color:var(--steel)}
.persona button[aria-pressed=true]{border-color:var(--orange);background:var(--orange-l)}
@media(max-width:520px){.persona{grid-template-columns:1fr 1fr}}
.cfield{display:grid;gap:4px;font-weight:700;font-size:.9rem;margin:8px 0}
.cfield select,.cfield input,select.cf,input.cf{width:100%;max-width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;font:inherit;font-weight:600;background:#fff;min-height:44px;color:var(--ink)}
.cfield input[aria-invalid=true]{border-color:var(--red);background:var(--red-l)}
.hint{font-weight:500;color:var(--muted);font-size:.82rem}
.err{color:var(--red);font-size:.82rem;font-weight:700;min-height:1em;margin:0}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.fgrid .full{grid-column:1/-1}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.cchk{display:flex;gap:8px;align-items:center;font-size:.95rem;margin:8px 0;font-weight:700;cursor:pointer}.cchk input{width:18px;height:18px;accent-color:var(--orange-d)}
.cres{background:var(--navy);color:#dbe5ef;border-radius:20px;padding:22px;position:sticky;top:84px}
.cbig small{display:block;color:var(--amber);text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:800}
.cbig b{font-size:clamp(2rem,4.5vw,2.7rem);color:#fff;line-height:1.1;display:block;margin:2px 0}
.cbig span{font-size:.88rem;color:#b5c4d4}
.cparts{list-style:none;padding:0;margin:14px 0}.cparts li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.95rem}
.cparts li b{color:#fff}
.cres .note,.cres .source{color:#a9b8c8}.cres a{color:#fff}
.cres .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}.cres .btn.ghost:hover{background:rgba(255,255,255,.08)}
.verdict{border-radius:12px;padding:10px 12px;margin:12px 0;font-size:.93rem;background:rgba(255,255,255,.07);border-left:4px solid var(--amber)}
.verdict.up{border-left-color:var(--orange)}.verdict.down{border-left-color:var(--amber)}.verdict strong{color:#fff}
.cres .notice,.cres .notice-warn{background:rgba(255,255,255,.07);color:#dbe5ef;border-left-color:var(--amber)}
.cmp-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 12px}
.cmp-card{background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px}
.cmp-geo{font-weight:800;margin:0;color:#fff}.cmp-val{font-size:1.6rem;font-weight:800;margin:2px 0;color:#fff}.cmp-metric{font-size:.8rem;color:#a9b8c8;margin:0}
.cmp-headline{font-size:1.12rem;font-weight:800;color:#fff}
.cmp-formula{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.88rem;margin:0}
.cmp-formula dt{color:#a9b8c8}.cmp-formula dd{margin:0;font-family:ui-monospace,Consolas,monospace;font-size:.84rem;color:#fff}
@media(max-width:900px){.calc{grid-template-columns:1fr}.cres{position:static}}
@media(max-width:420px){.cmp-cards{grid-template-columns:1fr}}

/* 12. FAQ, lists */
.faq details{border-bottom:1px solid var(--line);padding:13px 0}.faq details:last-child{border:0}.faq summary{cursor:pointer;font-weight:800}.faq p{margin:.55em 0 0;color:var(--ink2)}
ul.check{list-style:none;padding:0}ul.check li{padding:5px 0 5px 30px;position:relative}
ul.check li:before{content:"";position:absolute;left:2px;top:9px;width:16px;height:16px;border-radius:5px;background:var(--steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat}
ul.check.no li:before{background:var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/11px no-repeat}
dl.defs dt{font-weight:800;margin-top:.8em}dl.defs dd{margin:0 0 0 0;color:var(--ink2)}

/* 13. footer */
.foot{background:var(--navy);color:#c3cfdc;margin-top:48px;padding:44px 0 18px;font-size:.93rem;position:relative}
.foot:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--amber) 0 30%,var(--orange) 30% 70%,var(--steel) 70%)}
.foot .wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px}
@media(max-width:960px){.foot .wrap{grid-template-columns:1fr 1fr}}@media(max-width:520px){.foot .wrap{grid-template-columns:1fr}}
.foot a{color:#eef3f8;text-decoration:none}.foot a:hover{text-decoration:underline;color:var(--amber)}.foot ul{list-style:none;margin:0;padding:0}.foot li{padding:3px 0}
.fh{font-size:1rem;color:#fff;margin:0 0 8px;letter-spacing:.02em}.foot .logo{margin-bottom:12px}.foot .logo img{height:36px}
.foot .er{display:flex;gap:8px;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px;font-size:.86rem}.foot .er .ico{color:var(--amber);margin-top:3px}
.foot .copy{grid-column:1/-1;margin-top:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px;font-size:.84rem;color:#93a5b8}

/* 14. print: only the result */
@media print{.top,.foot,.xhero,.crumbs,.cform,.btns,.side,.skip{display:none!important}body{background:#fff}.cres{background:#fff;color:#000;position:static}.cres *{color:#000!important}.calc{display:block}}

/* 15. clean data-dashboard look (2026-10-31): light hero unless a photo is set, flat cards, quiet tables,
   white result panel. Overrides the darker house defaults above. */
:root{--bg:#f6f8fa;--line:#e3e8ee;--shadow:0 1px 2px rgba(10,37,64,.05)}
.xhero:not(.has-photo){background:#fff;color:var(--ink);border-bottom:1px solid var(--line)}
.xhero:not(.has-photo):after,.xhero:not(.has-photo) .xhero-motif{display:none}
.xhero:not(.has-photo) .xhero-in{padding:22px 16px 30px}
.xhero:not(.has-photo).strip-under .xhero-in{padding-bottom:30px}
.xhero:not(.has-photo) h1{color:var(--ink);text-shadow:none}
.xhero:not(.has-photo) .tail{color:var(--steel)}
.xhero:not(.has-photo) .xlead{color:var(--ink2)}.xhero:not(.has-photo) .xlead strong{color:var(--ink)}.xhero:not(.has-photo) .xlead a{color:var(--steel)}
.xhero:not(.has-photo) .crumbs{color:var(--muted)}.xhero:not(.has-photo) .crumbs a{color:var(--steel)}
.xhero:not(.has-photo) .kicker{background:var(--steel-l);color:var(--steel-d)}
.xhero:not(.has-photo) .mini a,.xhero:not(.has-photo) .mini span{background:#fff;border-color:var(--line);color:var(--ink2)}
.xhero:not(.has-photo) .mini a:hover{background:var(--steel-l);color:var(--ink)}.xhero:not(.has-photo) .mini .ico{color:var(--steel)}
.xhero:not(.has-photo) .hpanel{box-shadow:none;border:1px solid var(--line);background:var(--bg)}
.xhero:not(.has-photo) .btn.ghost.light{color:var(--ink);border-color:var(--line);background:#fff}
.xhero:not(.has-photo) .btn.ghost.light:hover{background:var(--soft)}
.xhero:not(.has-photo)~main .strip,.strip{margin:18px 0;box-shadow:none;border:1px solid var(--line)}
.strip .ico{color:var(--steel)}
.card,.chart,.lcards a,.kpi div,.loclist,.usmap{box-shadow:none;border-color:var(--line)}
.card{padding:22px 24px}
.cmp{border-radius:12px}
.cmp thead th{background:#f6f8fa;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line)}
.cmp th button{color:var(--muted)}
.cmp tbody tr:nth-child(even){background:#fff}.cmp tbody tr:hover{background:#f9fbfc}
.cres{background:#fff;color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--orange)}
.cres .cbig small{color:var(--steel)}.cres .cbig b{color:var(--ink)}.cres .cbig span{color:var(--muted)}
.cres .cparts li{border-bottom-color:var(--line)}.cres .cparts li b{color:var(--ink)}
.cres .note,.cres .source{color:var(--muted)}.cres a{color:var(--steel)}
.cres .btn.ghost{color:var(--ink);border-color:var(--line)}.cres .btn.ghost:hover{background:var(--soft)}
.verdict{background:var(--bg);color:var(--ink2)}.verdict strong{color:var(--ink)}
.cres .notice,.cres .notice-warn{background:var(--amber-l);color:#3d3000}
.cmp-card{background:var(--bg)}.cmp-geo,.cmp-val,.cmp-headline,.cmp-formula dd{color:var(--ink)}.cmp-metric,.cmp-formula dt{color:var(--muted)}
.gcta{background:var(--steel-l);color:var(--ink2)}.gcta h2,.gcta h3{color:var(--ink)}.gcta .ico{color:var(--steel)}
h2{font-size:clamp(1.3rem,2.3vw,1.6rem)}

/* 16. pay-over-time chart (HTML/CSS + one SVG for the lines; labels stay real text at every width) */
.trend{position:relative;height:280px;margin:8px 0 6px 56px}
.trend svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.trend .band{fill:var(--q0)}
.trend .ln{fill:none;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.trend .ln.nom{stroke:var(--steel)}.trend .ln.real{stroke:var(--amber);stroke-dasharray:6 5}
.trend .ln.gap{stroke:var(--steel);stroke-width:2;stroke-dasharray:2 6;opacity:.7}
.trend .gl{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.trend .pt{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:3px solid var(--steel)}
.trend .pt.last{background:var(--steel)}
.trend .yl{position:absolute;left:-56px;width:50px;transform:translateY(-50%);text-align:right;font-size:.78rem;color:var(--muted)}
.trend .xl{position:absolute;bottom:-26px;transform:translateX(-50%);font-size:.78rem;color:var(--muted);white-space:nowrap}
.trend .xl.miss{color:#b0b9c4}
.trend .vl{position:absolute;transform:translate(-50%,-150%);font-size:.82rem;font-weight:800;color:var(--ink);white-space:nowrap;background:#fff;padding:0 4px;border-radius:4px}
.trend-legend{margin:36px 0 0}
.trend-legend .lg-nom{background:var(--steel);height:4px}.trend-legend .lg-real{background:repeating-linear-gradient(90deg,var(--amber) 0 6px,transparent 6px 10px);height:4px}
.trend-legend .lg-band{background:var(--q0)}
@media(max-width:600px){.trend{height:220px;margin-left:44px}.trend .yl{left:-46px;width:40px}.trend .xl.alt{display:none}.trend .vl{font-size:.74rem}}