@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@500;600;700&display=swap');

.re-site-header{position:relative;z-index:100;background:#101827;border-bottom:1px solid #2a3850;color:#fff;font-family:Inter,system-ui,sans-serif}
.re-site-nav{width:min(1200px,calc(100% - 48px));min-height:76px;margin:auto;display:flex;align-items:center;gap:28px}
.re-site-brand{margin-right:auto;text-decoration:none;color:#fff;font-family:Manrope,system-ui,sans-serif;font-size:20px;font-weight:700;letter-spacing:-.03em}
.re-site-brand span{color:#6ec1bc}
.re-site-links{display:flex;align-items:center;gap:25px}
.re-site-links a{color:#b8c2d2;text-decoration:none;font-size:14px;font-weight:600}
.re-site-links a:hover,.re-site-links a:focus{color:#fff}
.re-site-links .re-site-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:9px;background:#d6ac57;color:#101827}

body.re-tool{font-family:Inter,system-ui,sans-serif!important;-webkit-font-smoothing:antialiased}
html{max-width:100%;overflow-x:hidden}
body.re-tool{max-width:100%;overflow-x:hidden}
body.re-tool h1,body.re-tool h2,body.re-tool h3{font-family:Manrope,system-ui,sans-serif!important;letter-spacing:-.025em}
body.re-tool :focus-visible{outline:3px solid #11666a!important;outline-offset:3px}
body.re-tool button,body.re-tool .btn,body.re-tool .btn-ghost,body.re-tool .pick{touch-action:manipulation}
body.re-tool .table-wrap,body.re-tool .paper-wrap{-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}

body.re-commission-audit{--paper:#0f1724;--raised:#172338;--line:#2a3850;--line2:#40506a;--ink:#f4f7fb;--soft:#b8c2d2;--faint:#8f9db2;--brass:#6ec1bc;--brass-bg:#17363e;--r:10px;--serif:Manrope,system-ui,sans-serif;--sans:Inter,system-ui,sans-serif;background:#0f1724;color:#f4f7fb}
body.re-commission-audit .masthead{border-bottom-color:#6ec1bc}
body.re-commission-audit .pick,body.re-commission-audit .primary{background:#d6ac57;color:#101827}
body.re-commission-audit .masthead h1{color:#f4f7fb}
body.re-commission-audit .drop,body.re-commission-audit .panel,body.re-commission-audit .results{background:#172338;border-color:#40506a}
body.re-commission-audit .btn.sec{background:#172338;color:#f4f7fb;border-color:#60708a}
body.re-commission-audit .mini{color:#f4f7fb}
body.re-commission-audit .notes{color:#dce7e8}
body.re-commission-audit .foot a{color:#6ec1bc}
body.re-commission-audit .ftag.plan{background:#253752;color:#cbd8eb}
body.re-commission-audit .ftag.att{background:#3b3322;color:#f1d494}
body.re-commission-audit .ftag.stmt{background:#342e49;color:#d8cef2}
body.re-commission-audit .ftag.unk{background:#303b4d;color:#d4dae4}

body.re-market-compensation{--ink:#f4f7fb;--panel:#172338;--panel-raised:#1c2a42;--line:#2a3850;--paper:#f4f7fb;--paper-dim:#b8c2d2;--brass:#d6ac57;--brass-dim:#b89042;--teal:#6ec1bc;--teal-dim:#418f8b;background:#0f1724!important;color:#f4f7fb!important}
body.re-market-compensation .input-panel,body.re-market-compensation .panel{border-radius:18px!important;box-shadow:0 16px 45px rgba(0,0,0,.2)}
body.re-market-compensation header{border-bottom-color:#2a3850}
body.re-market-compensation h1,body.re-market-compensation .role-title{color:#f4f7fb}
body.re-market-compensation .tagline,body.re-market-compensation .coords,body.re-market-compensation label,body.re-market-compensation .freshness-note,body.re-market-compensation .role-sub,body.re-market-compensation .band-label-row,body.re-market-compensation .band-endpoints,body.re-market-compensation .band-scale,body.re-market-compensation .disclaimer{color:#b8c2d2}
body.re-market-compensation .coords b,body.re-market-compensation .input-panel h2,body.re-market-compensation .panel h2,body.re-market-compensation .subpanel h3{color:#6ec1bc}
body.re-market-compensation .input-panel,body.re-market-compensation .panel{background:linear-gradient(180deg,#172338,#1c2a42);border-color:#2a3850}
body.re-market-compensation .empty-state,body.re-market-compensation .chart-box,body.re-market-compensation .subpanel,body.re-market-compensation .band,body.re-market-compensation .reference-card{background:#111d30;border-color:#40506a;color:#b8c2d2}
body.re-market-compensation .comp-table th,body.re-market-compensation .evidence-table th{color:#b8c2d2;border-color:#40506a}
body.re-market-compensation .comp-table td,body.re-market-compensation .evidence-table td,body.re-market-compensation .subpanel ul,body.re-market-compensation .narrative{color:#f4f7fb;border-color:#2a3850}
body.re-market-compensation .reference-card .reference-value{color:#f4f7fb}
body.re-market-compensation .comp-table tr:last-child td{background:rgba(110,193,188,.08)}
body.re-market-compensation .export-btn{color:#d6ac57;border-color:#b89042}
body.re-market-compensation .run-btn{background:#6ec1bc;color:#101827}
body.re-market-compensation .wrap a{color:#6ec1bc}

body.re-salary-structure-builder,body.re-merit-budget-modeler{--bg:#0f1724;--surface:#172338;--surface-2:#1c2a42;--line:#2a3850;--text:#f4f7fb;--muted:#b8c2d2;--brass:#d6ac57;--brass-soft:rgba(214,172,87,.14);--teal:#6ec1bc;--rose:#e77780;--violet:#a59ae5;--display:Manrope,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;background:#0f1724;color:#f4f7fb}
body.re-salary-structure-builder .btn,body.re-merit-budget-modeler .btn{background:#d6ac57;color:#101827}
body.re-salary-structure-builder .panel,body.re-salary-structure-builder .card,body.re-merit-budget-modeler .panel,body.re-merit-budget-modeler .card{box-shadow:0 16px 45px rgba(0,0,0,.2)}

body.re-rewards-game{--stage:#0f1724;--podium:#172338;--podium-raised:#1c2a42;--line:#2a3850;--paper:#f4f7fb;--paper-dim:#b8c2d2;--gold:#d6ac57;--gold-dim:#b89042;--teal:#6ec1bc;--teal-dim:#418f8b;--red:#e77780;--red-dim:#a84a52;background:#0f1724!important;color:#f4f7fb!important}
body.re-rewards-game .start-rules,body.re-rewards-game .question-card,body.re-rewards-game .answer-tile{box-shadow:0 14px 40px rgba(0,0,0,.18)}
body.re-rewards-game .big-btn,body.re-rewards-game .btn.primary{background:#d6ac57;color:#101827}

/* Keep controls legible on the dark canvas across the independently built tools. */
body.re-tool input,body.re-tool select,body.re-tool textarea{color:#f4f7fb!important;background:#111d30!important;border-color:#40506a!important}
body.re-tool input::placeholder,body.re-tool textarea::placeholder{color:#8f9db2!important}
body.re-tool option{background:#111d30;color:#f4f7fb}

@media(max-width:760px){
  .re-site-nav{width:min(100% - 32px,1200px);padding:15px 0;align-items:flex-start;flex-wrap:wrap;gap:12px}
  .re-site-brand{min-height:42px;display:flex;align-items:center}
  .re-site-links{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;border-top:1px solid #2a3850;padding-top:12px}
  .re-site-links a{min-height:38px;display:flex;align-items:center}
  .re-site-links .re-site-cta{grid-column:1/-1;min-height:48px;margin-top:4px}
  body.re-tool main{padding-left:16px!important;padding-right:16px!important}
  body.re-tool .intro{padding-top:24px!important;padding-bottom:26px!important}
  body.re-tool .intro h1,body.re-commission-audit .masthead h1{font-size:clamp(30px,9.5vw,42px)!important;line-height:1.08!important}
  body.re-tool input,body.re-tool select,body.re-tool textarea{font-size:16px!important;min-height:44px}
  body.re-tool button,body.re-tool .btn,body.re-tool .btn-ghost,body.re-tool .pick{min-height:44px}
  body.re-commission-audit .wrap,body.re-market-compensation .wrap,body.re-rewards-game .wrap{padding-left:16px!important;padding-right:16px!important}
  body.re-commission-audit .drop{padding:28px 16px}
  body.re-commission-audit .panel-body,body.re-commission-audit .results{padding:18px 16px}
  body.re-commission-audit table.bd,body.re-market-compensation .comp-table,body.re-market-compensation .evidence-table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.re-market-compensation .input-panel,body.re-market-compensation .panel{padding:20px 16px}
  body.re-market-compensation header{align-items:flex-start}
  body.re-market-compensation .coords{text-align:left}
  body.re-rewards-game .question-card,body.re-rewards-game .start-rules{padding:20px 16px}
  body.re-salary-structure-builder .filters,body.re-merit-budget-modeler .filters{align-items:stretch}
  body.re-salary-structure-builder .filters .input,body.re-merit-budget-modeler .filters .input{width:100%;min-width:0}
  body.re-total-rewards-statement .toolbar,body.re-total-rewards-statement .toolbar .grp{align-items:stretch}
  body.re-total-rewards-statement .toolbar .grp{width:100%}
  body.re-total-rewards-statement .toolbar .btn-ghost{flex:1;justify-content:center}
  body.re-total-rewards-statement #preview .statement{width:100%;max-width:100%;min-height:0;padding:26px 18px;font-size:12.5px}
  body.re-total-rewards-statement #preview .st-head{flex-direction:column;gap:10px}
  body.re-total-rewards-statement #preview .st-kicker{text-align:left}
  body.re-total-rewards-statement #preview .st-hero{grid-template-columns:1fr;gap:18px;padding:22px 0}
  body.re-total-rewards-statement #preview .st-total{font-size:clamp(38px,12vw,50px)}
  body.re-total-rewards-statement #preview .st-donut{width:min(230px,80%);margin:auto}
  body.re-total-rewards-statement #preview .st-legend,body.re-total-rewards-statement #preview .st-insight,body.re-total-rewards-statement #preview .st-grid{grid-template-columns:1fr}
  body.re-total-rewards-statement #preview .st-foot{flex-direction:column}
}

@media(max-width:420px){
  .re-site-links{grid-template-columns:1fr}
  .re-site-links .re-site-cta{grid-column:auto}
  body.re-salary-structure-builder .pair,body.re-merit-budget-modeler .pair,body.re-total-rewards-statement .pair,body.re-total-rewards-statement .trio{grid-template-columns:1fr}
}


/* Helpful search context on standalone tools */
.re-seo-context{width:min(1100px,calc(100% - 48px));margin:36px auto 54px;padding:26px 30px;border:1px solid #2a3850;border-radius:12px;background:#172338;color:#dce5f0;font:15px/1.7 Inter,system-ui,sans-serif}
.re-seo-context h2,.re-seo-context h3{color:#f4f7fb;margin:0 0 12px}
.re-seo-context h3{margin-top:22px}
.re-seo-context p{max-width:78ch}
.re-seo-context a{color:#6ec1bc}
@media(max-width:760px){.re-seo-context{width:calc(100% - 32px);padding:22px 18px}}