/* ===== Innovative Labor Solutions — industrial dark / safety yellow ===== */

:root{
  /* type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: 1rem;
  --text-lg: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --text-h4: clamp(1.0625rem, 1rem + 0.5vw, 1.3125rem);
  --text-h3: clamp(1.375rem, 1.15rem + 1vw, 1.875rem);
  --text-h2: clamp(1.875rem, 1.3rem + 2.6vw, 3.25rem);
  --text-hero: clamp(2.375rem, 1.2rem + 5.6vw, 5.5rem);

  /* spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem;

  /* ===== color =====
     Light interior palette (2026 refresh). Dark surfaces are retained for the
     header, hero, safety stripe, and footer via the `.on-dark` scope below.
     Semantic tokens first; the --ink-*/--grey/--white names are legacy aliases
     kept so every existing component picks up the new palette automatically. */
  --surface:#F4F4F2;      /* page surface, warm neutral */
  --surface-alt:#FFFFFF;  /* alternating band */
  --card:#FFFFFF;
  --card-2:#ECECE8;
  --hairline:#DCDCD7;
  --hairline-2:#C4C4BE;
  --text:#16161A;
  --text-2:#4E4E57;       /* 7.0:1 on --surface */
  --text-3:#5F5F68;       /* 5.5:1 on --surface */

  --yellow:#FFD400;
  --yellow-2:#F5C400;
  --yellow-ink:#0B0B0C;
  --amber:#8A6A00;        /* AA amber for text/icons on light (5.1:1 on white) */
  --amber-strong:#B88A00; /* large display / graphic accents only */
  --accent-text:var(--amber);

  /* dark values, reused by .on-dark */
  --d-ink:#0B0B0C;
  --d-ink-2:#111113;
  --d-ink-3:#17171A;
  --d-ink-4:#1E1E22;
  --d-line:#2A2A30;
  --d-line-2:#3A3A43;

  /* legacy aliases → light theme */
  --ink:var(--surface);
  --ink-2:var(--surface-alt);
  --ink-3:var(--card);
  --ink-4:var(--card-2);
  --line:var(--hairline);
  --line-2:var(--hairline-2);
  --white:var(--text);
  --grey:var(--text-2);
  --grey-2:var(--text-3);

  --wrap: 1180px;
  --radius: 4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} }

body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--text-base);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--yellow); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:2px}

p{margin:0 0 var(--space-4)}
p:last-child{margin-bottom:0}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding-inline:var(--space-5)}
@media (min-width:768px){ .wrap{padding-inline:var(--space-8)} }

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--yellow);color:var(--yellow-ink);padding:var(--space-3) var(--space-4);font-weight:700}
.skip:focus{left:var(--space-4);top:var(--space-4)}

/* ===== display type ===== */
.hero__h1,.h2,.h3,.h4,.brand__name,.trust__n,.proof__n,.badge,.step__n,.card__num,.btn,.eyebrow,.tbl thead th,.market__tag{
  font-family:'Anton','Archivo',Impact,sans-serif;
  font-weight:400;
  text-transform:uppercase;
}
.hero__h1,.h2,.h3,.h4{ line-height:.98; letter-spacing:.005em; margin:0 0 var(--space-4); overflow-wrap:break-word; }
.hero__h1{ font-size:var(--text-hero); line-height:.92 }
.h2{ font-size:var(--text-h2) }
.h3{ font-size:var(--text-h3) }
.h4{ font-size:var(--text-h4); line-height:1.06; letter-spacing:.01em }
.hl{ color:var(--yellow) }

.eyebrow{
  font-size:var(--text-xs); letter-spacing:.18em; color:var(--yellow);
  margin:0 0 var(--space-4); line-height:1.4;
}
.lede{ color:var(--grey); font-size:var(--text-lg); line-height:1.55; max-width:62ch }
.lede--wide{ max-width:78ch }
.note{ color:var(--grey-2); font-size:var(--text-sm); max-width:78ch }

/* ===== buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-align:center;
  gap:var(--space-2);
  font-size:var(--text-sm); letter-spacing:.06em;
  padding:.95rem 1.6rem; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px) }
.btn--sm{ padding:.6rem 1.05rem; font-size:var(--text-xs); letter-spacing:.08em }
.btn--yellow{ background:var(--yellow); color:var(--yellow-ink); border-color:var(--yellow) }
/* Hover must stay legible: --white resolves to a dark ink in the bright palette, which
   previously left near-black text on a near-black button. Darken the yellow instead and
   flip the label to white so contrast holds in both palettes. */
.btn--yellow:hover{ background:var(--d-ink); border-color:var(--d-ink); color:#FFFFFF }
.btn--yellow:disabled,
.btn--yellow[disabled]{ background:#DCDCD7; border-color:#DCDCD7; color:#5F5F68; cursor:default; transform:none }
.btn--ghost{ background:transparent; color:var(--white); border-color:var(--line-2) }
.btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow) }
.btn--block{ width:100%; padding-block:1.05rem }

/* ===== nav ===== */
.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(11,11,12,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__inner{ display:flex; align-items:center; gap:var(--space-4); min-height:66px; padding-block:var(--space-3) }
.brand{ display:flex; align-items:center; gap:var(--space-3); color:var(--white); flex:0 1 auto; min-width:0 }
.brand:hover{ text-decoration:none }
.brand__mark{ display:block; width:30px; height:30px; flex:0 0 30px; color:var(--yellow) }
.brand__mark svg{ width:100%; height:100% }
.brand__text{ display:flex; flex-direction:column; min-width:0 }
.brand__name{ font-size:.9375rem; letter-spacing:.05em; line-height:1.1; white-space:nowrap }
.brand__sub{ font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); line-height:1.3; white-space:nowrap }
/* Honeypot: off-screen rather than display:none, which bots detect and skip. Real users
   never see or tab into it; a filled value means the submission is a bot. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }

/* Legal attribution under the wordmark — fine print, not a tracked-out descriptor. */
.brand__dba{ font-size:.6875rem; letter-spacing:.01em; color:var(--grey-2); line-height:1.3; white-space:nowrap }
.nav__links{ display:none; margin-left:auto; gap:var(--space-6) }
.nav__links a{
  color:var(--grey); font-size:var(--text-sm); font-weight:500;
  letter-spacing:.02em; padding-block:var(--space-2);
}
.nav__links a:hover{ color:var(--white); text-decoration:none }
.nav__cta{ margin-left:auto; flex:0 0 auto }
@media (min-width:960px){
  .nav__links{ display:flex }
  .nav__cta{ margin-left:0 }
}
@media (max-width:479px){
  .brand__sub, .brand__dba{ display:none }
  .brand__name{ font-size:.8125rem; white-space:normal; letter-spacing:.03em }
  .nav__cta{ padding:.55rem .8rem }
}

/* ===== hero ===== */
.hero{ position:relative; isolation:isolate; overflow:hidden; background:var(--ink) }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 55%; z-index:-2;
}
.hero__scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(11,11,12,.97) 0%, rgba(11,11,12,.9) 42%, rgba(11,11,12,.55) 72%, rgba(11,11,12,.45) 100%),
    linear-gradient(to top, rgba(11,11,12,1) 0%, rgba(11,11,12,.1) 55%);
}
.hero__inner{ padding-block:var(--space-16) var(--space-12) }
@media (min-width:768px){ .hero__inner{ padding-block:var(--space-24) var(--space-20) } }
.hero__h1{ max-width:19ch }
.hero__lede{ color:var(--grey); font-size:var(--text-lg); line-height:1.55; max-width:58ch; margin-top:var(--space-6) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-8) }
.hero__cta .btn{ flex:1 1 auto; min-width:min(100%, 210px) }
@media (min-width:520px){ .hero__cta .btn{ flex:0 0 auto } }

.trust{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; margin-top:var(--space-12);
  background:var(--line); border:1px solid var(--line);
}
@media (min-width:820px){ .trust{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.trust li{ background:rgba(17,17,19,.86); padding:var(--space-5) var(--space-4); min-width:0 }
.trust__n{ display:block; font-size:clamp(1.375rem,1.1rem + 1.1vw,1.75rem); color:var(--yellow); line-height:1.05; letter-spacing:.01em }
.trust__l{ display:block; font-size:var(--text-xs); color:var(--grey); letter-spacing:.04em; margin-top:var(--space-2); line-height:1.4 }
.u{ font-size:.62em; letter-spacing:.04em; color:inherit; opacity:.8 }

/* safety stripe divider (used twice max) */
.stripe{
  height:12px;
  background-image:repeating-linear-gradient(-45deg, var(--yellow) 0 14px, var(--ink) 14px 28px);
}

/* ===== sections ===== */
.sec{ padding-block:var(--space-16); border-bottom:1px solid var(--line) }
@media (min-width:768px){ .sec{ padding-block:var(--space-24) } }
.sec--alt{ background:var(--ink-2) }
.sec__head{ max-width:80ch; margin-bottom:var(--space-12) }
.sec__head .h2{ max-width:24ch }

.grid-2{ display:grid; gap:var(--space-12) }
@media (min-width:900px){
  .grid-2{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-16); align-items:start }
  .grid-2--img{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
  .grid-2--img .figure{ position:sticky; top:96px }
  .grid-2--img .figure img{ aspect-ratio:4/5; object-position:center 35% }
  .grid-2--form{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
}

/* ===== cards ===== */
.cards{ display:grid; gap:var(--space-4) }
@media (min-width:600px){ .cards{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .cards--svc{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
.card{
  background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space-6);
  min-width:0;
}
.card p{ color:var(--grey); font-size:var(--text-base); margin-bottom:var(--space-3) }
.card__num{ display:block; font-size:var(--text-sm); color:var(--yellow); letter-spacing:.12em; margin-bottom:var(--space-3) }
.card--svc{ display:flex; flex-direction:column; border-top:3px solid var(--line-2) }
.card--svc:hover{ border-top-color:var(--yellow) }
.card__top{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:var(--space-3); margin-bottom:var(--space-4) }
.card__top .h4{ margin:0; min-width:0; max-width:100% }
.badge{
  flex:0 0 auto; background:var(--yellow); color:var(--yellow-ink);
  font-size:var(--text-xs); letter-spacing:.06em; padding:.3rem .55rem; border-radius:2px; line-height:1.2;
  white-space:nowrap;
}
.badge--quiet{ background:transparent; color:var(--grey); border:1px solid var(--line-2) }
.card__meta{
  margin-top:auto; margin-bottom:0 !important; padding-top:var(--space-3);
  border-top:1px solid var(--line);
  font-size:var(--text-xs) !important; color:var(--grey-2) !important; letter-spacing:.03em;
}

/* ===== figures ===== */
.figure{ margin:0 }
.figure img{ width:100%; border:1px solid var(--line); border-radius:var(--radius); object-fit:cover }
.figure--wide{ margin-top:var(--space-12) }
.figure--wide img{ aspect-ratio:4/3 }
@media (min-width:700px){ .figure--wide img{ aspect-ratio:16/7 } }
.figure figcaption{ font-size:var(--text-xs); color:var(--grey-2); margin-top:var(--space-3); letter-spacing:.02em; line-height:1.5 }

/* ===== comparison table ===== */
.tbl__hint{ display:none; font-size:var(--text-xs); color:var(--grey-2); letter-spacing:.06em; text-transform:uppercase; margin-bottom:var(--space-3) }
@media (min-width:768px) and (max-width:899px){ .tbl__hint{ display:block } }
.tbl__scroll{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); -webkit-overflow-scrolling:touch }
.tbl{ width:100%; min-width:760px; border-collapse:collapse; background:var(--ink-2); font-size:var(--text-sm) }
.tbl thead th{
  font-size:var(--text-xs); letter-spacing:.1em; text-align:left;
  padding:var(--space-4); background:var(--ink-4); border-bottom:2px solid var(--line-2);
  vertical-align:bottom; line-height:1.25; color:var(--grey);
}
.tbl thead .tbl__us{ color:var(--yellow) }
.tbl thead .tbl__them{ color:var(--white) }
.tbl__crit{ width:20% }
.tbl thead .tbl__us,.tbl thead .tbl__them{ width:40% }
.tbl tbody th{
  text-align:left; font-weight:600; font-size:var(--text-sm); color:var(--white);
  padding:var(--space-4); vertical-align:top; line-height:1.4;
  background:var(--ink-3); border-right:1px solid var(--line);
}
.tbl td{
  padding:var(--space-4); vertical-align:top; color:var(--grey);
  line-height:1.55; border-right:1px solid var(--line);
}
.tbl td:last-child,.tbl th:last-child{ border-right:0 }
.tbl tbody tr + tr th,.tbl tbody tr + tr td{ border-top:1px solid var(--line) }
.tbl td.ok{ color:#E8E8ED; background:rgba(255,212,0,.045) }
.tick{
  display:inline-block; width:1.1em; height:1.1em; margin-right:.5em; vertical-align:-.18em;
  background:var(--yellow);
  clip-path:polygon(14% 52%, 38% 76%, 88% 20%, 96% 30%, 40% 94%, 5% 60%);
}
.fn{
  display:inline-block; margin-left:.28em; font-size:.72em; font-weight:700;
  color:var(--yellow-ink); background:var(--yellow); border-radius:2px;
  padding:0 .32em; vertical-align:super; line-height:1.5; text-decoration:none;
}
.fn:hover{ background:var(--white); text-decoration:none }
.fn + .fn{ margin-left:.18em }

.callout{
  margin-top:var(--space-8); padding:var(--space-6);
  background:var(--ink-3); border-left:3px solid var(--yellow); border-radius:0 var(--radius) var(--radius) 0;
}
.callout__k{
  font-family:'Anton',sans-serif; text-transform:uppercase; letter-spacing:.08em;
  font-size:var(--text-sm); color:var(--yellow); margin-bottom:var(--space-2);
}
.callout p:last-child{ color:var(--grey); font-size:var(--text-sm); max-width:80ch }

/* ===== steps ===== */
.steps{ display:grid; gap:var(--space-4) }
@media (min-width:640px){ .steps{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (min-width:1000px){ .steps{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.step{
  position:relative; background:var(--ink-3); border:1px solid var(--line);
  border-radius:var(--radius); padding:var(--space-6); min-width:0;
}
.step__n{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin-bottom:var(--space-4);
  background:var(--yellow); color:var(--yellow-ink);
  font-size:1.25rem; line-height:1; border-radius:2px;
}
.step p{ color:var(--grey); margin:0; font-size:var(--text-sm) }

/* ===== specs ===== */
.specs{ margin-top:var(--space-8); border-top:1px solid var(--line) }
.specs li{ padding:var(--space-4) 0; border-bottom:1px solid var(--line) }
.specs__k{
  display:block; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--yellow); margin-bottom:var(--space-2);
}
.specs__v{ display:block; color:var(--grey); font-size:var(--text-sm); line-height:1.55 }

/* ===== markets ===== */
.markets{ display:grid; gap:var(--space-4) }
@media (min-width:800px){ .markets{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.market{
  background:var(--ink-3); border:1px solid var(--line); border-top:3px solid var(--yellow);
  border-radius:var(--radius); padding:var(--space-8) var(--space-6); min-width:0;
}
.market__tag{ font-size:var(--text-xs); letter-spacing:.12em; color:var(--grey-2); margin-bottom:var(--space-3) }
.market .h3{ margin-bottom:var(--space-4) }
.market p{ color:var(--grey); font-size:var(--text-sm) }
.chips{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-5) }
.chips li{
  font-size:var(--text-xs); letter-spacing:.05em; color:var(--grey);
  border:1px solid var(--line-2); border-radius:100px; padding:.3rem .7rem; line-height:1.3;
}

/* ===== proof ===== */
.proof{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:900px){ .proof{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
.proof__i{ background:var(--ink-2); padding:var(--space-6) var(--space-5); min-width:0 }
.proof__n{ display:block; font-size:clamp(1.5rem,1.1rem + 1.6vw,2.25rem); color:var(--yellow); line-height:1.02 }
.proof__l{ display:block; font-size:var(--text-xs); color:var(--grey); margin-top:var(--space-3); line-height:1.5 }
.sec--proof .note{ margin-top:var(--space-8) }

/* ===== quote / form ===== */
.sec--quote{ background:var(--ink-2) }
.contact{ margin-top:var(--space-8); border-top:1px solid var(--line) }
.contact li{ padding:var(--space-4) 0; border-bottom:1px solid var(--line) }
.contact__k{ display:block; font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2) }
.contact__v{ display:block; font-size:var(--text-base); color:var(--white); margin-top:var(--space-1); font-weight:600; overflow-wrap:break-word }
.contact__todo{ display:block; font-size:var(--text-xs); color:var(--yellow); margin-top:var(--space-1); letter-spacing:.04em }

.form{ background:var(--ink-3); border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-6) }
@media (min-width:768px){ .form{ padding:var(--space-8) } }
.field{ margin-bottom:var(--space-5) }
.field--2{ display:grid; gap:var(--space-4) }
@media (min-width:560px){ .field--2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
.form label{
  display:block; font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey); margin-bottom:var(--space-2);
}
.form input,.form select,.form textarea{
  width:100%; max-width:100%; font-family:inherit; font-size:var(--text-sm); color:var(--white);
  background:var(--ink); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:.8rem .9rem; transition:border-color .16s ease;
}
.form textarea{ resize:vertical; min-height:110px; line-height:1.5 }
.form select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--grey) 50%),linear-gradient(135deg,var(--grey) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px), calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  padding-right:2.4rem;
}
.form input::placeholder,.form textarea::placeholder{ color:#6E6E79 }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--yellow); outline:none }
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline:2px solid var(--yellow); outline-offset:1px }
.form__note{ font-size:var(--text-xs); color:var(--grey-2); margin:var(--space-4) 0 0; line-height:1.5 }
.form__note.is-ok{ color:var(--yellow) }

/* ===== sources ===== */
.sec--src{ background:var(--ink) }
.srcs{ counter-reset:s; margin-top:var(--space-6); max-width:90ch }
.srcs li{
  counter-increment:s; position:relative; padding:var(--space-4) 0 var(--space-4) var(--space-10);
  border-bottom:1px solid var(--line); font-size:var(--text-sm); color:var(--grey); line-height:1.55;
}
.srcs li::before{
  content:counter(s); position:absolute; left:0; top:var(--space-4);
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  background:var(--yellow); color:var(--yellow-ink);
  font-family:'Anton',sans-serif; font-size:.75rem; border-radius:2px;
}
.srcs a{ overflow-wrap:anywhere; word-break:break-word }
.srcs li:target{ background:rgba(255,212,0,.07) }
.sec--src .note{ margin-top:var(--space-6) }

/* ===== footer ===== */
.foot{ background:var(--ink-2); padding-top:var(--space-16) }
.foot__inner{ display:grid; gap:var(--space-8) }
@media (min-width:800px){ .foot__inner{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--space-16) } }
.brand__mark--foot{ width:34px; height:34px; margin-bottom:var(--space-4) }
.foot__legal{ font-size:var(--text-sm); color:var(--white); margin:0 0 var(--space-2); max-width:46ch }
.foot__legal--dim{ color:var(--grey-2); font-size:var(--text-xs) }
.foot__nav{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3) }
.foot__nav a{ color:var(--grey); font-size:var(--text-sm) }
.foot__nav a:hover{ color:var(--yellow) }
.foot__bar{
  margin-top:var(--space-12); padding-block:var(--space-5);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-8);
  justify-content:space-between;
}
.foot__bar p{ margin:0; font-size:var(--text-xs); color:var(--grey-2) }

/* mobile: comparison table becomes stacked cards */
@media (max-width:767px){
  .tbl__scroll{ overflow:visible; border:0; border-radius:0 }
  .tbl{ min-width:0; background:transparent; font-size:var(--text-sm) }
  .tbl thead{ display:none }
  .tbl, .tbl tbody, .tbl tr, .tbl tbody th, .tbl td{ display:block; width:auto }
  .tbl tbody tr{
    background:var(--ink-2); border:1px solid var(--line);
    border-top:3px solid var(--line-2); border-radius:var(--radius);
    margin-bottom:var(--space-4); overflow:hidden;
  }
  .tbl tbody th{
    border-right:0; border-bottom:1px solid var(--line);
    background:var(--ink-4); padding:var(--space-4);
  }
  .tbl td{ border-right:0; padding:var(--space-4) }
  .tbl tbody tr + tr th, .tbl tbody tr + tr td{ border-top:0 }
  .tbl td + td{ border-top:1px solid var(--line) }
  .tbl td::before{
    content:attr(data-label);
    display:block; font-family:'Anton',sans-serif; text-transform:uppercase;
    font-size:var(--text-xs); letter-spacing:.11em; line-height:1.3;
    margin-bottom:var(--space-2); color:var(--grey-2);
  }
  .tbl td[data-label^="Innovative"]::before{ color:var(--yellow) }
}

/* ===== reveal ===== */
@media (prefers-reduced-motion: no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s ease }
  .reveal.is-in{ opacity:1; transform:none }
}

/* =====================================================================
   PALETTE REFRESH — dark anchors + light interior
   Header, hero, safety stripe and footer stay dark; interior sections,
   careers page and portal dashboards run on the light surface.
   ===================================================================== */

/* Custom properties that reference other custom properties are substituted at
   the element where they are declared, so the dark scope must restate every
   token with a literal value — including the legacy aliases. */
.nav, .hero, .foot, .stripe, .on-dark{
  --surface:#0B0B0C;
  --surface-alt:#111113;
  --card:#17171A;
  --card-2:#1E1E22;
  --hairline:#2A2A30;
  --hairline-2:#3A3A43;
  --text:#FFFFFF;
  --text-2:#B4B4BE;
  --text-3:#9A9AA5;
  --accent-text:#FFD400;
  --ink:#0B0B0C;
  --ink-2:#111113;
  --ink-3:#17171A;
  --ink-4:#1E1E22;
  --line:#2A2A30;
  --line-2:#3A3A43;
  --white:#FFFFFF;
  --grey:#B4B4BE;
  --grey-2:#9A9AA5;
  color:#FFFFFF;
}
.on-dark{ background:var(--d-ink) }

/* --- accents that were yellow-on-dark become amber-on-light --- */
a{ color:var(--accent-text) }
.hl{ color:var(--accent-text) }
.eyebrow{ color:var(--accent-text) }
.card__num,
.callout__k,
.specs__k,
.proof__n,
.contact__todo,
.form__note.is-ok,
.tbl thead .tbl__us{ color:var(--accent-text) }
.trust__n{ color:var(--accent-text) }
.hero .trust__n{ color:var(--yellow) }
.hero .hl, .hero .eyebrow{ color:var(--yellow) }

/* large display accents may use the stronger amber */
.h2 .hl, .hero__h1 .hl{ color:var(--amber-strong) }
.hero__h1 .hl{ color:var(--yellow) }

.btn--ghost:hover{ border-color:var(--accent-text); color:var(--accent-text) }
.on-dark .btn--ghost:hover{ border-color:var(--yellow); color:var(--yellow) }

.tick{ background:var(--accent-text) }
.on-dark .tick{ background:var(--yellow) }

/* footnote markers: small dark-amber superscripts on light */
.fn{
  background:transparent; color:var(--accent-text);
  padding:0 .1em; font-weight:700; text-decoration:none;
}
.fn:hover{ background:transparent; color:var(--text); text-decoration:underline }
.on-dark .fn{ background:var(--yellow); color:var(--yellow-ink); padding:0 .32em }

/* --- comparison table as a light data table --- */
.tbl{ background:var(--card) }
.tbl thead th{ background:var(--card-2); color:var(--text-3); border-bottom:2px solid var(--hairline-2) }
.tbl thead .tbl__them{ color:var(--text) }
.tbl tbody th{ background:#FAFAF8; color:var(--text) }
.tbl td{ color:var(--text-2) }
.tbl td.ok{ color:var(--text); background:rgba(255,212,0,.13) }
@media (max-width:767px){
  .tbl tbody tr{ background:var(--card) }
  .tbl tbody th{ background:var(--card-2) }
  .tbl td[data-label^="Innovative"]::before{ color:var(--accent-text) }
}

/* --- cards & panels get a soft lift on light --- */
.card, .step, .market, .form, .callout, .panel{
  box-shadow:0 1px 2px rgba(22,22,26,.05), 0 1px 12px rgba(22,22,26,.03);
}
.on-dark .card, .on-dark .step, .on-dark .form, .on-dark .panel{ box-shadow:none }
.callout{ background:#FFFBEB; border-left-color:var(--amber-strong) }

/* --- forms on light --- */
.form input,.form select,.form textarea{ background:#FBFBF9; color:var(--text) }
.form input::placeholder,.form textarea::placeholder{ color:#63636C }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--amber-strong) }
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{ outline-color:var(--amber-strong) }
.form select{
  background-image:linear-gradient(45deg,transparent 50%,var(--text-2) 50%),linear-gradient(135deg,var(--text-2) 50%,transparent 50%);
}
:focus-visible{ outline-color:var(--amber-strong) }
.on-dark :focus-visible, .nav :focus-visible, .foot :focus-visible{ outline-color:var(--yellow) }
.on-dark .form input,.on-dark .form select,.on-dark .form textarea{ background:var(--d-ink); color:#fff }
.on-dark .form input::placeholder,.on-dark .form textarea::placeholder{ color:#8A8A95 }

/* sources list numerals read as amber chips on light */
.srcs li::before{ background:var(--amber-strong); color:var(--yellow-ink) }
.srcs li:target{ background:rgba(255,212,0,.16) }
.step__n{ background:var(--yellow); color:var(--yellow-ink) }
.sec--src{ background:var(--surface-alt) }
.market{ border-top-color:var(--amber-strong) }
.card--svc:hover{ border-top-color:var(--amber-strong) }
.on-dark .market, .on-dark .card--svc:hover{ border-top-color:var(--yellow) }
.badge{ background:var(--yellow); color:var(--yellow-ink) }
.badge--quiet{ background:transparent; color:var(--text-3); border-color:var(--hairline-2) }
.proof{ background:var(--hairline); border-color:var(--hairline) }
.proof__i{ background:var(--card) }

/* AA fixes found in Playwright contrast QA */
:root{ --amber-deep:#6F5500 }         /* amber on the light table header band */
.tbl thead .tbl__us{ color:var(--amber-deep) }
.on-dark .tbl thead .tbl__us{ color:var(--yellow) }
.u{ font-size:max(11px, .62em) }      /* keep the unit suffix legible */