/* LIGHT, and light only. Dark looked better in screenshots and was worse to
   actually read -- he tried it for an afternoon and it cost him focus every
   time. Screenshots are not the test; the test is whether someone can sit with
   it. The concept carries the design now (the core sample), so the palette
   does not have to.

   Still one palette and no toggle: a second theme means every chart and rule
   has to be right twice, and the first one is not yet right enough. */
:root{
  /* Paper, not screen-white. This is a census -- a printed record -- and a
     faintly warm ground reads that way while being easier to sit in front of
     than #FFF. Every text colour below is measured against all three
     backgrounds; ink-3 is 5.79:1 at worst, which is AA with room, because the
     dark build failed at 3.94 and was genuinely hard to read. */
  --ground:#FAF9F6;--ground-2:#FFFFFF;
  --surface:#FFFFFF;--surface-2:#F4F3EF;--surface-3:#EDEBE5;
  --line:#E4E1D9;--line-2:#C7C3B8;
  --ink:#14171C;--ink-2:#4A5260;--ink-3:#585F6C;
  --accent:#1B44C8;--accent-2:#14349B;--accent-soft:#E8ECFA;
  --pos:#0F6B42;--pos-soft:#E3F1EA;
  --ochre:#96590B;--ochre-soft:#FAF0DF;
  --warn:#B3261E;--warn-soft:#FBEAE8;
  --violet:#5B36B8;--violet-soft:#EFEAFB;
  --shadow:0 1px 2px rgba(20,23,28,.05),0 2px 6px rgba(20,23,28,.05);
  --shadow-lift:0 4px 12px rgba(20,23,28,.08),0 14px 32px rgba(20,23,28,.08);
  --glow:0 0 0 3px rgba(27,68,200,.14);
  --r:5px;--r-sm:4px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
font:16px/1.68 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-2)}
.wrap{max-width:1380px;margin:0 auto;padding:0 34px 88px}
.num{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-variant-numeric:tabular-nums;
font-feature-settings:"tnum" 1;
letter-spacing:-.01em}
h1,h2,h3{font-family:Newsreader,Georgia,"Times New Roman",serif;margin:0;
text-wrap:balance;font-weight:500;letter-spacing:-.012em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:#fff}

/* ---- nav ---------------------------------------------------------------- */
nav.top{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--ground) 92%,transparent);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
nav.top .inner{max-width:1380px;margin:0 auto;padding:15px 34px;display:flex;gap:24px;
align-items:center;flex-wrap:wrap}
nav.top .mark{font-family:Newsreader;font-weight:600;font-size:19px;letter-spacing:-.025em;color:var(--ink)}
nav.top .mark span{color:var(--accent)}
nav.top a.lnk{color:var(--ink-2);font-size:14.5px;font-weight:500;transition:color .13s}
nav.top a.lnk:hover{color:var(--ink)}
nav.top .sp{flex:1}
/* ---- nav dropdowns ------------------------------------------------------
   7,242 employer pages, 39 functions and 30 technologies existed with nothing
   pointing at them but a sitemap. Pages do not fail for being numerous; they
   fail when nothing surfaces them. */
.dd{position:relative}
.dd>button{background:none;border:0;color:var(--ink-2);font:inherit;font-size:14.5px;
font-weight:500;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;
transition:color .13s}
.dd>button:hover,.dd[data-open="1"]>button{color:var(--ink)}
.dd>button svg{width:11px;height:11px;opacity:.65;transition:transform .16s}
.dd[data-open="1"]>button svg{transform:rotate(180deg)}
.dd .menu{position:absolute;top:calc(100% + 14px);left:-18px;min-width:286px;
background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:9px;
box-shadow:var(--shadow-lift);opacity:0;visibility:hidden;transform:translateY(-6px);
transition:opacity .15s,transform .15s,visibility .15s;z-index:40}
.dd[data-open="1"] .menu{opacity:1;visibility:visible;transform:translateY(0)}
.dd .menu a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:9px;
color:var(--ink);font-size:14.5px;font-weight:500;transition:background .12s}
.dd .menu a:hover{background:var(--surface-3);color:var(--ink)}
.dd .menu a .mi{width:19px;height:19px;flex:none;color:var(--accent);margin-top:1px}
.dd .menu a .md{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400;margin-top:2px}
.dd .menu .sep{height:1px;background:var(--line);margin:7px 10px}
@media(max-width:860px){
  .dd .menu{position:static;opacity:1;visibility:visible;transform:none;display:none;
    box-shadow:none;border:0;padding:0;min-width:0;background:none}
  .dd[data-open="1"] .menu{display:block}
  nav.top .inner{gap:16px}
}

/* ---- hero --------------------------------------------------------------- */
.hero{padding:62px 0 8px;position:relative}
.hero h1{font-size:clamp(36px,6.2vw,70px);letter-spacing:-.022em;line-height:1.04;font-weight:500}
.hero p{color:var(--ink-2);max-width:62ch;margin:20px 0 0;font-size:17.5px;line-height:1.62}
.lead{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.lede{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.lede .l{flex:1 1 440px}
.crumb{font-size:13.5px;color:var(--ink-3);padding:24px 0 0}
.crumb a{color:var(--ink-3)}.crumb a:hover{color:var(--accent)}

/* ---- the finding, now a chart rather than a sentence -------------------- */
/* No glow, no gradient wash. The image carries the page; the container is a
   ruled frame around it, the way a plate is set in a report. */
.finding{background:transparent;border:0;padding:0;margin:0;position:relative}
.finding .big{text-align:center;max-width:22ch;margin:0 auto}
.finding p{margin-left:auto;margin-right:auto;text-align:center}
.finding .row{justify-content:center;gap:clamp(26px,5vw,64px);border-top-color:var(--line)}
.core{margin:26px 0 4px;width:100%}
.core svg{width:100%;height:clamp(150px,17vw,210px);display:block;overflow:visible}
.core-cap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
font-size:12.5px;color:var(--ink-3);font-family:"IBM Plex Mono",monospace;margin-top:14px;
border-top:1px solid var(--line);padding-top:13px}
.finding .big{font-family:Newsreader;font-weight:500;font-size:clamp(29px,4.6vw,48px);
letter-spacing:-.018em;line-height:1.1;color:var(--ink)}
.finding .big em{font-style:normal;color:var(--warn)}
.finding p{color:var(--ink-2);max-width:64ch;margin:16px 0 0;font-size:16px}
.finding .row{display:flex;gap:38px;flex-wrap:wrap;margin-top:26px;padding-top:24px;
border-top:1px solid var(--line)}
.finding .row .v{font-family:"IBM Plex Mono",monospace;font-size:25px;font-weight:600;color:var(--ink)}
.finding .row .k{font-size:12.5px;color:var(--ink-3);margin-top:3px}

/* the bar chart. HTML rather than SVG on purpose: it inherits the theme
   tokens for free and never has to be re-measured when the type scale moves. */
.chart{margin-top:26px;display:grid;gap:9px}
.chart .bar-row{display:grid;grid-template-columns:104px 1fr auto;gap:14px;align-items:center}
.chart .bl{font-size:13px;color:var(--ink-2);text-align:right;white-space:nowrap}
.chart .bt{background:var(--surface-3);border-radius:7px;height:26px;overflow:hidden;position:relative}
.chart .bf{height:100%;border-radius:7px;
background:var(--accent);
transform-origin:left;animation:grow .75s cubic-bezier(.22,.9,.28,1) both}
.chart .bar-row.hot .bf{background:var(--warn)}
.chart .bar-row.warm .bf{background:var(--ochre)}
.chart .bv{font-family:"IBM Plex Mono",monospace;font-size:13.5px;color:var(--ink);
min-width:96px;text-align:right}
.chart .bv i{font-style:normal;color:var(--ink-3);font-size:12px;margin-left:7px}
@keyframes grow{from{transform:scaleX(.02);opacity:.25}to{transform:scaleX(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.chart .bf{animation:none}}

/* ---- sections, cards ---------------------------------------------------- */
.sec{margin:52px 0 16px;display:flex;justify-content:space-between;align-items:baseline;
gap:18px;flex-wrap:wrap}
.sec h2{font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.sec .note{font-size:13.5px;color:var(--ink-3)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow)}
.scene .card,.scene .tblwrap{border-color:transparent;box-shadow:var(--shadow-lift)}
.tblwrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r);box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:11px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
padding:14px 16px;display:flex;gap:12px;align-items:flex-start;
transition:border-color .14s,box-shadow .14s,transform .14s}
.tile:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.tile .body{min-width:0}
.tile .n{display:block;font-weight:600;color:var(--ink);font-size:14.5px;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.tile .m{display:block;font-size:13px;color:var(--ink-3);margin-top:3px}
.mono{width:36px;height:36px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
font-family:"IBM Plex Sans";font-weight:600;font-size:15px;color:#fff;letter-spacing:-.02em}
.empty{padding:30px;color:var(--ink-3);text-align:center}

/* ---- stat strip --------------------------------------------------------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
margin:30px 0 38px;box-shadow:var(--shadow)}
.strip .cell{background:var(--surface);padding:17px 19px}
.strip .k{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.09em;
text-transform:uppercase;color:var(--ink-3)}
.strip .v{font-family:"IBM Plex Mono",monospace;font-size:25px;font-weight:600;margin-top:4px;color:var(--ink)}
.strip .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.proof{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:28px 0}
.proof .c{background:var(--surface);padding:18px 20px}
.proof .v{font-family:"IBM Plex Mono",monospace;font-size:26px;font-weight:600;color:var(--ink)}
.proof .k{font-size:12.5px;color:var(--ink-3);margin-top:3px}

/* ---- signal cards ------------------------------------------------------- */
.sigrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:13px;margin-top:16px}
.sig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:19px 21px;
display:block;box-shadow:var(--shadow);transition:border-color .14s,box-shadow .14s,transform .14s}
a.sig:hover{border-color:var(--accent);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.sig .sv{font-family:"IBM Plex Mono",monospace;font-size:31px;font-weight:600;letter-spacing:-.028em;color:var(--ink)}
.sig .sn{font-weight:600;color:var(--ink);margin-top:6px;font-size:14.5px}
.sig .sd{color:var(--ink-3);font-size:13.5px;margin-top:5px;line-height:1.5}

/* ---- verdict ------------------------------------------------------------ */
.state{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
padding:5px 12px;border-radius:20px;white-space:nowrap;letter-spacing:.005em}
.state:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
box-shadow:0 0 9px currentColor}
.state.pos{background:var(--pos-soft);color:var(--pos)}
.state.accent{background:var(--accent-soft);color:var(--accent)}
.state.ochre{background:var(--ochre-soft);color:var(--ochre)}
.state.warn{background:var(--warn-soft);color:var(--warn)}
.state.mute{background:var(--surface-3);color:var(--ink-3)}
.verdict{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;background:var(--surface);
border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);
padding:19px 22px;margin:20px 0 0;box-shadow:var(--shadow)}
.verdict.pos{border-left-color:var(--pos)}.verdict.accent{border-left-color:var(--accent)}
.verdict.ochre{border-left-color:var(--ochre)}.verdict.warn{border-left-color:var(--warn)}
.verdict .vmain{flex:1 1 320px;min-width:0}
.verdict .vtxt{color:var(--ink-2);font-size:14.5px;margin-top:9px;max-width:70ch;line-height:1.58}
.verdict .vnums{display:flex;gap:26px;flex-wrap:wrap}
.verdict .vn{font-family:"IBM Plex Mono",monospace;font-size:20px;font-weight:600;line-height:1.2;color:var(--ink)}
.verdict .vk{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ---- tables ------------------------------------------------------------- */
.roles{width:100%;border-collapse:collapse;font-size:14.5px}
.roles th{text-align:left;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;
color:var(--ink-3);font-weight:600;padding:13px 15px;border-bottom:1px solid var(--line);white-space:nowrap}
.roles td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}
.roles tr:last-child td{border-bottom:0}
.roles tr:hover td{background:var(--surface-2)}
.roles .t{font-weight:500}
.roles .t a{color:var(--ink);font-weight:600}
.roles .t a:hover{color:var(--accent)}
.roles .loc{color:var(--ink-2);font-size:13px}
.roles .when{color:var(--ink-3);font-size:12.5px;white-space:nowrap;font-family:"IBM Plex Mono",monospace}
.roles .old{color:var(--ochre)}
.pill{display:inline-block;font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;
background:var(--accent-soft);color:var(--accent);margin-left:7px;vertical-align:1px}
.pill.rem{background:var(--pos-soft);color:var(--pos)}
.pill.sal{background:var(--ochre-soft);color:var(--ochre)}
.pill.new{background:var(--violet-soft);color:var(--violet)}
.pill.stale{background:var(--warn-soft);color:var(--warn)}

/* ---- inputs ------------------------------------------------------------- */
input.search{width:100%;padding:15px 17px;font-size:16px;border:1px solid var(--line-2);
border-radius:12px;background:var(--surface);color:var(--ink);font-family:inherit;
transition:border-color .14s,box-shadow .14s}
input.search::placeholder{color:var(--ink-3)}
input.search:focus{outline:none;border-color:var(--accent);box-shadow:var(--glow)}
.hero-search{margin:26px 0 4px;position:relative}
.hero-search input{padding-left:46px;font-size:16.5px}
.hero-search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);opacity:.5;color:var(--ink-2)}
.filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin:16px 0 0}
.filters select,.filters input[type=text]{padding:9px 12px;border:1px solid var(--line-2);
border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px}
.filters select:focus,.filters input:focus{outline:none;border-color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);
border-radius:20px;padding:7px 14px;font-size:13.5px;color:var(--ink-2);cursor:pointer;user-select:none;
transition:border-color .13s,color .13s,background .13s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.trackbtn{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);border-radius:9px;
padding:9px 15px;font:inherit;font-size:13.5px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;
transition:border-color .13s,color .13s}
.trackbtn:hover{border-color:var(--accent);color:var(--ink)}
.trackbtn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.showall{background:none;border:0;color:var(--accent);font:inherit;font-size:13.5px;cursor:pointer;padding:16px}
.showall:hover{color:var(--accent-2)}
.res{color:var(--ink-3);font-size:13px;margin:16px 0 0}

/* ---- tags --------------------------------------------------------------- */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:6px 13px;
font-size:13.5px;color:var(--ink-2);transition:border-color .13s,color .13s,background .13s}
.tag:hover{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.tag b{color:var(--ink-3);font-weight:400;font-family:"IBM Plex Mono",monospace;font-size:11.5px}

/* ---- pricing ------------------------------------------------------------ */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;
margin-top:28px;align-items:start}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:28px 28px 30px;
box-shadow:var(--shadow)}
.plan.feature{position:relative;border:1px solid var(--accent);border-top:2px solid var(--accent)}
.plan .badge{position:absolute;top:-11px;left:26px;background:var(--accent);
color:#fff;font-size:11px;letter-spacing:.09em;text-transform:uppercase;padding:5px 12px;
border-radius:20px;font-weight:700}
.plan h3{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
font-weight:600;font-family:"IBM Plex Sans"}
.plan .price{font-family:Newsreader;font-weight:600;font-size:46px;letter-spacing:-.04em;margin:12px 0 2px;color:var(--ink)}
.plan .price small{font-family:"IBM Plex Sans";font-size:15px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.plan .price small.once{color:var(--pos);font-weight:700}
.plan .strike{color:var(--ink-3);text-decoration:line-through;font-size:15px;font-weight:500}
.plan .sub{color:var(--ink-3);font-size:13.5px;min-height:42px;line-height:1.5}
.plan ul{list-style:none;padding:0;margin:20px 0 0}
.plan li{padding:9px 0 9px 27px;position:relative;color:var(--ink-2);font-size:14.5px;
border-top:1px solid var(--line)}
.plan li:before{content:"";position:absolute;left:2px;top:16px;width:11px;height:6px;
border-left:2px solid var(--pos);border-bottom:2px solid var(--pos);transform:rotate(-45deg)}
.plan li.no{color:var(--ink-3)}
.plan li.no:before{border-color:var(--line-2);transform:none;height:0;top:19px;width:11px;
border-left:0;border-bottom:2px solid var(--line-2)}
.cta{display:inline-block;background:var(--accent);color:#fff;border-radius:4px;
padding:14px 24px;font-weight:600;font-size:15.5px;margin-top:22px;width:100%;text-align:center;
border:0;cursor:pointer;font-family:inherit;transition:background .13s}
.cta:hover{background:var(--accent-2);color:#fff}
.cta.ghost{background:transparent;color:var(--accent);border:1px solid var(--line-2);box-shadow:none}
.cta.ghost:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
/* The home page asked its question and then offered nowhere to go: the highest
   intent on the site had no action attached to it. Two, because there are two
   different people here -- one is looking for a job, one is looking at a list
   of companies. */
.herocta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.herocta .cta{width:auto;margin-top:0;padding:14px 26px}
.herocta .sub{flex-basis:100%;font-size:13.5px;color:var(--ink-3);margin-top:4px}

/* ---- comparison table --------------------------------------------------- */
.cmp{width:100%;border-collapse:collapse;font-size:14.5px}
.cmp th{text-align:left;padding:15px 16px;border-bottom:2px solid var(--line-2);font-size:11.5px;
letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);font-weight:700;white-space:nowrap}
.cmp th.p{text-align:center}
.cmp th.hi{color:var(--accent)}
.cmp td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-2)}
.cmp td.c{text-align:center;width:126px}
.cmp tr.grp td{background:var(--surface-2);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--ink-3);font-weight:700;padding:10px 16px}
.cmp .yes{color:var(--pos);font-weight:700;font-size:16px}
.cmp .no{color:var(--line-2)}
.cmp .pr{font-family:Newsreader;font-weight:600;font-size:20px;color:var(--ink);white-space:nowrap}
.cmp tr:hover td{background:var(--surface-2)}

/* ---- faq ---------------------------------------------------------------- */
.faq{max-width:76ch}
.faq details{border-bottom:1px solid var(--line);padding:17px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--accent);font-weight:700;margin-right:12px}
.faq details[open] summary:before{content:"‘2"}
.faq p{color:var(--ink-2);margin:12px 0 0 26px;font-size:14.5px;line-height:1.62}

/* ---- upsell / callouts -------------------------------------------------- */
.upsell{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
background:var(--surface);
border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
padding:18px 22px;margin:24px 0 0;box-shadow:var(--shadow)}
.upsell .ut{flex:1 1 340px;min-width:0}
.upsell .uh{font-weight:700;color:var(--ink);font-size:15px}
.upsell .ub{color:var(--ink-2);font-size:14px;margin-top:5px;max-width:74ch;line-height:1.55}
.upsell .ucta{white-space:nowrap;font-weight:600;font-size:14px;border:1px solid var(--accent);
color:var(--accent);border-radius:10px;padding:10px 17px;transition:background .13s,color .13s}
.upsell .ucta:hover{background:var(--accent);color:#fff}
/* Unlock where the wall is. A buyer should never have to learn that a page
   called /unlock/ exists -- the boundary that stopped them is the only place
   they are thinking about their licence, so that is where the key goes in. */
.upsell .uown{flex-basis:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.upsell .uown-t{background:none;border:0;padding:0;font:inherit;font-size:13.5px;
color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px;
text-decoration-color:var(--line-2);transition:color .13s}
.upsell .uown-t:hover{color:var(--accent);text-decoration-color:var(--accent)}
.upsell .uown-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:4px}
/* An author-origin display: beats the UA stylesheet's [hidden]{display:none},
   so the field sat open under its own "click to open" link until this line. */
.upsell .uown-f[hidden]{display:none}
.upsell .uown-f input{flex:1 1 260px;min-width:0;font-family:"IBM Plex Mono",monospace;
font-size:13px;padding:9px 12px;border:1px solid var(--line-2);border-radius:8px;
background:var(--ground);color:var(--ink)}
.upsell .uown-f input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.upsell .uown-f button{font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
padding:9px 16px;border-radius:8px;border:1px solid var(--accent);background:var(--accent);color:#fff}
.upsell .uown-f button:disabled{opacity:.55;cursor:default}
.upsell .uown-m{font-size:13px;color:var(--ink-3);flex-basis:100%}
.upsell .uown-m.bad{color:var(--warn)}
.lockrow{background:var(--accent-soft);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);
border-radius:var(--r);padding:16px 20px;margin:14px 0 0;display:flex;gap:16px;align-items:center;
justify-content:space-between;flex-wrap:wrap}
.lockrow .lt{font-size:14px;color:var(--ink-2)}
.lockrow .lt b{color:var(--ink)}
.lockrow a{font-weight:600;white-space:nowrap}
.warnbar{background:var(--ochre-soft);border:1px solid color-mix(in srgb,var(--ochre) 35%,transparent);
border-radius:var(--r);padding:14px 17px;margin:16px 0 0;font-size:14px;color:var(--ink-2)}
.warnbar b{color:var(--ochre)}
.note-sm{font-size:14px;color:var(--ink-3);margin-top:12px;max-width:76ch;line-height:1.6}
.hdr-l{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.dlrow{display:flex;gap:12px;flex-wrap:wrap}
.dlrow .cta{width:auto;margin-top:0}
.bar-row{display:flex;gap:12px;align-items:center;margin:8px 0}

/* ---- feature grid with icons -------------------------------------------- */
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px;margin-top:30px}
.feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 26px;
box-shadow:var(--shadow);transition:border-color .14s,transform .14s,box-shadow .14s}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-lift)}
.feat .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:15px}
.feat .ic svg{width:21px;height:21px}
.feat h3{font-size:16.5px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.feat p{color:var(--ink-2);font-size:14px;margin:9px 0 0;line-height:1.6}

/* ---- alternating scenes -------------------------------------------------
   The page is a sequence of full-bleed scenes, light then dark then light,
   each one self-contained. Sections are separated by GROUND, not by rules --
   hairlines everywhere is what made this read as a document rather than a
   product. Nothing here is a gradient; a scene is a flat field.

   .inv re-declares the tokens rather than restyling components, so every card,
   table, badge and chart inside a dark scene adapts with no extra CSS. Values
   measured: ink-3 sits at 7.12:1 on the plate, so the dark passages are AAA
   rather than the 3.94:1 that made the all-dark build tiring. */
.inv{
  --ground:#0E1219;--ground-2:#12161E;
  --surface:#161B25;--surface-2:#1B212C;--surface-3:#222936;
  --line:#252C38;--line-2:#3A4250;
  --ink:#F4F6FA;--ink-2:#C3CAD6;--ink-3:#9AA3B2;
  --accent:#7D9BFF;--accent-2:#A8BCFF;--accent-soft:rgba(125,155,255,.16);
  --pos:#4ED08C;--pos-soft:rgba(78,208,140,.15);
  --ochre:#E9A93C;--ochre-soft:rgba(233,169,60,.15);
  --warn:#FF7A68;--warn-soft:rgba(255,122,104,.15);
  --violet:#B49CFF;--violet-soft:rgba(180,156,255,.15);
  --shadow:none;--shadow-lift:none;
  background:var(--ground);color:var(--ink)}
.inv .card,.inv .tblwrap,.inv .tile,.inv .sig,.inv .plan{background:var(--surface);
  border-color:var(--line)}

/* Apple's actual rhythm: scenes breathe, headlines are large and tightly
   tracked, and the eye is given a single thing per screen. */
.scene{padding:118px 0;width:100%}
.scene .inner{max-width:1380px;margin:0 auto;padding:0 34px}
.scene h2.sh{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.02em;line-height:1.08;
  font-weight:500;color:var(--ink);text-align:center;max-width:20ch;margin:0 auto}
.scene .ssub{color:var(--ink-2);font-size:clamp(17px,1.6vw,21px);line-height:1.5;
  text-align:center;max-width:60ch;margin:20px auto 0}
.scene .sbody{margin-top:56px}
@media(max-width:640px){.scene{padding:64px 0}.scene .inner{padding:0 18px}}

/* ---- full-bleed bands --------------------------------------------------- */
/* The page was one uninterrupted colour for its whole length, which is what
   made it feel like a document rather than a landing page. Bands break it into
   movements: each spans the viewport, the content inside stays measured. */
.band{width:100%;padding:66px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--ground-2)}
.band.tint{background:var(--surface-2)}
.band.deep{background:var(--ground-2);border-bottom:1px solid var(--line)}
.band .inner{max-width:1380px;margin:0 auto;padding:0 34px}
.band h2.bh{font-size:clamp(24px,3.2vw,36px);letter-spacing:-.03em;line-height:1.12;
color:var(--ink);font-weight:700;text-transform:none;letter-spacing:-.03em}
.band .bsub{color:var(--ink-2);font-size:16.5px;margin-top:12px;max-width:62ch}

/* how it works: three numbered steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px;margin-top:34px}
.step{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
padding:26px 24px 28px;box-shadow:var(--shadow)}
.step .sno{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--accent);
letter-spacing:.14em;margin-bottom:13px}
.step h3{font-size:18px;font-weight:700;color:var(--ink);letter-spacing:-.015em}
.step p{color:var(--ink-2);font-size:14.5px;margin:9px 0 0;line-height:1.6}

/* the wall of boards we read. Names, never logos: a logo grid on a landing
   page reads as "these companies endorse us", and none of them have. */
.wall{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.wall span{background:var(--surface);border:1px solid var(--line);border-radius:9px;
padding:8px 14px;font-size:14px;color:var(--ink-2);font-weight:500}
.wall span:nth-child(3n){color:var(--ink)}

/* closing call to action */
.close-cta{text-align:center;padding:16px 0 6px}
.close-cta h2{font-size:clamp(30px,4.6vw,54px);letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.close-cta p{color:var(--ink-2);font-size:17px;margin:16px auto 0;max-width:56ch}
.close-cta .btns{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.close-cta .b1,.close-cta .b2{border-radius:12px;padding:15px 28px;font-weight:600;font-size:16px}
.close-cta .b1{background:var(--accent);color:#fff}
.close-cta .b1:hover{filter:brightness(1.12);color:#fff}
.close-cta .b2{border:1px solid var(--line-2);color:var(--ink)}
.close-cta .b2:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:640px){.band{padding:46px 0}.band .inner{padding:0 16px}}

footer{border-top:1px solid var(--line);margin-top:70px;padding:30px 0;color:var(--ink-3);font-size:13.5px}
footer a{color:var(--ink-2)}footer a:hover{color:var(--accent)}

@media(max-width:640px){
  .roles .hide{display:none}
  .hero{padding:38px 0 6px}
  .finding{padding:26px 22px;border-radius:16px}
  .chart .bar-row{grid-template-columns:82px 1fr auto;gap:10px}
  .chart .bl{font-size:12px}
  .chart .bv{min-width:74px;font-size:12.5px}
  .wrap{padding:0 16px 64px}
}