/* ═══════════════════════════════════════════════════════════════════
   site-v3-compare.css — family layer for /compare/ (hub + 12 "vs" pages).
   Loads AFTER site-v3.css (shared retrofit) — see that file's header for
   the brief, the tokens and the specificity convention:
     · every rule = "html body " + the page's own selector (beats the inline
       <style> blocks without relying on source order)
     · !important ONLY against inline style="" attributes (section paddings,
       the 8-checks grid, the two inline paragraphs)
   Markup, words, links and section order are untouched; sections are told
   apart with :has() (browsers without it simply keep plain white sections).

   Section rhythm
     hub : categories white · 8 checks ICE · table white · scoreboard NAVY ·
           stance ICE · FAQ white · closing ICE (site-v3)
     vs  : profiles white · feature table ICE · "in short" NAVY · closing
   Hero (incl. the platform pills), nav bar and footer are left alone.
   ═══════════════════════════════════════════════════════════════════ */

html body{--cmp-pad:96px}
html body section{position:relative}
html body section > .wrap{position:relative;z-index:1}
html body .head{margin-bottom:36px}
html body .head p[style]{font-size:17px!important;line-height:1.6}

/* ─────────────────────────────────────────────────────────────────
   1 · SECTION BANDS
   ───────────────────────────────────────────────────────────────── */
/* first section under the hero (hub categories / vs profiles) */
html body section:has(> .wrap > .cards:not([style])),
html body section:has(> .wrap > .profiles){padding:28px 0 var(--cmp-pad)!important}
/* plain white sections */
html body section:has(.matrix),
html body section:has(details.q){padding:var(--cmp-pad) 0!important}

/* ice bands with the map contour: 8 checks, the vs feature table, stance */
html body section:has(> .wrap > .cards[style]),
html body section:has(.tblwrap):not(:has(.matrix)),
html body section:has(.stance):not(:has(.stance + p)){
  padding:var(--cmp-pad) 0!important;background:var(--x-ice);
  border-top:1px solid var(--x-line);border-bottom:1px solid var(--x-line);
}
html body section:has(> .wrap > .cards[style])::before,
html body section:has(.tblwrap):not(:has(.matrix))::before,
html body section:has(.stance):not(:has(.stance + p))::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;background:var(--v3-contour);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
          mask-image:radial-gradient(70% 60% at 50% 50%,transparent 30%,#000 100%);
}

/* the ONE navy chapter band per page: hub scoreboard / vs "in short" */
html body section:has(.stance + p),
html body section:has(> .wrap > .short){
  padding:var(--cmp-pad) 0!important;background:var(--v3-navy-band);color:#fff;border:0;
}
html body section:has(.stance + p)::before,
html body section:has(> .wrap > .short)::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.6;
  background:repeating-radial-gradient(circle at 80% 30%,transparent 0 34px,rgba(255,255,255,.045) 34px 35px);
}
html body :is(section:has(.stance + p),section:has(> .wrap > .short)) .head h2{color:#fff}
html body :is(section:has(.stance + p),section:has(> .wrap > .short)) .eyebrow:not(.hero .eyebrow){
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--x-sun);box-shadow:none;
}

/* ─────────────────────────────────────────────────────────────────
   2 · HUB CARDS — categories (3) and the 8 checks
   The leading emoji / number of each title becomes a gradient icon tile
   (::first-letter, floated onto its own line above the title).
   ───────────────────────────────────────────────────────────────── */
html body .cards{gap:18px}
html body .cards[style]{grid-template-columns:repeat(4,minmax(0,1fr))!important}
html body .card{padding:26px 24px 24px}
html body .card h3{display:flow-root;font-size:19px;line-height:1.2;letter-spacing:-.02em;margin-bottom:10px}
html body .card h3::first-letter{
  float:left;margin:0 100% 16px 0;padding:0 11px;border-radius:16px;
  font:400 23px/50px system-ui,'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  background:var(--tile,var(--g-career));color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 12px 22px -12px rgba(15,30,54,.6);
}
/* the 8 checks start with a number → white Bricolage digits */
html body .cards[style] .card h3::first-letter{font:800 21px/50px 'Bricolage Grotesque',sans-serif;padding:0 16px;letter-spacing:-.02em}
html body .card:nth-child(6n+1){--tile:var(--g-career)}
html body .card:nth-child(6n+2){--tile:var(--g-iq)}
html body .card:nth-child(6n+3){--tile:var(--g-comm)}
html body .card:nth-child(6n+4){--tile:var(--g-learn)}
html body .card:nth-child(6n+5){--tile:var(--g-life)}
html body .card:nth-child(6n+6){--tile:var(--g-hum)}
html body .card p{color:var(--x-mut)}
html body .card .when{margin-top:16px;padding:12px 14px;border:0;border-radius:14px;background:var(--x-ice);color:var(--x-navy2);font-size:14px;line-height:1.5}
html body .card .when b{color:var(--x-green)}

/* ─────────────────────────────────────────────────────────────────
   3 · TABLES — homepage .x-cmp: soft card, our column in the career
   gradient, status chips. Scroll stays INSIDE .tblwrap on phones.
   ───────────────────────────────────────────────────────────────── */
html body .tblwrap{
  border:1px solid var(--x-line);border-radius:26px;background:#fff;box-shadow:var(--x-shadow);
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#C9D8EA transparent;
}
html body .tblwrap table{border-collapse:separate;border-spacing:0}
html body .tblwrap th,
html body .tblwrap td{padding:15px 18px;border-bottom:1px solid var(--x-line)}
html body .tblwrap th{font:800 12px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.08em;color:var(--x-mut);background:#F7FAFD}
html body .tblwrap :is(th.usc,th.us){background:var(--g-career);color:#fff}
html body .tblwrap :is(td.usc,td.us){background:#F1F6FC;box-shadow:inset 1px 0 0 #DCE7F4,inset -1px 0 0 #DCE7F4}
html body .tblwrap td:first-child{font-weight:700;color:var(--x-ink)}
html body .tblwrap tr:last-child td{border-bottom:0}
html body .tblwrap tr:not(.grp):hover td:not(.usc,.us){background:#FAFCFE}
/* group rows: ice band, steel-blue caps */
html body .tblwrap tr.grp td{background:var(--x-ice);color:var(--x-blue);font:800 11.5px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.12em;padding:12px 18px}

/* status chips (vs pages + legend). Text colours are AA on their tints;
   amber = homepage sunshine pill, red only for a platform's missing feature */
html body .st{display:inline-block;padding:4px 11px;border-radius:999px;font-size:12.5px;font-weight:700;line-height:1.4}
html body .st.a{background:#E4F3EA;color:#0F6B46}
html body .st.p{background:#FFF3C4;color:#4A3B00}
html body .st.n{background:#FDECEA;color:#B3321F}
html body .st.d{background:none;padding-left:0;padding-right:0;color:var(--x-mut);font-weight:500}
html body .legend{gap:8px;margin-bottom:18px}
html body .legend .st.d{padding:4px 11px;background:#fff;border:1px solid var(--x-line)}

/* hub matrix */
html body .matrix th,
html body .matrix td{padding:14px 14px}
html body .matrix td:first-child,
html body .matrix th:first-child{box-shadow:8px 0 14px -10px rgba(15,30,54,.22);border-right:1px solid var(--x-line)}
html body .matrix th:first-child{background:#F7FAFD}
html body .matrix .y{color:#0F6B46;font-weight:800}
html body .matrix .x{color:#B3321F;font-weight:700}
html body .matrix .n{color:var(--x-mut)}
html body .matrix td.us{color:var(--x-navy2)}
/* 14 columns never fit: a soft shadow on the right edge says "scroll me".
   The white cover is attached to the content (local) and slides over the
   shadow once the last column is reached. Header cells go translucent so
   the hint shows through them too (the sticky first column stays solid). */
html body .tblwrap:has(> .matrix){
  background:
    linear-gradient(to left,#fff 45%,rgba(255,255,255,0)) right center / 64px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%,rgba(15,30,54,.2),rgba(15,30,54,0)) right center / 22px 100% no-repeat scroll,
    #fff;
}
html body .tblwrap .matrix th:not(.us,:first-child){background:rgba(214,228,243,.2)}

/* ─────────────────────────────────────────────────────────────────
   4 · VS PROFILES — us = navy flagship card, them = soft white card,
   a round "compare" badge between them (decorative, no text)
   ───────────────────────────────────────────────────────────────── */
html body .profiles{grid-template-columns:minmax(0,1fr);gap:0;align-items:stretch}
html body .profiles::before{
  content:"";order:2;justify-self:center;align-self:center;position:relative;z-index:3;
  width:58px;height:58px;margin:-15px 0;border-radius:50%;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8h15l-4-4M20 16H5l4 4'/></svg>") center/24px no-repeat,var(--g-iq);
  box-shadow:0 0 0 5px #fff,0 16px 30px -12px rgba(15,30,54,.6);
}
html body .profiles > .pcard.us{order:1}
html body .profiles > .pcard:not(.us){order:3}
@media(min-width:760px){
  html body .profiles{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  html body .profiles::before{margin:0 -15px}
}
html body .pcard{
  position:relative;background:#fff;border:1px solid var(--x-line);border-radius:26px;padding:30px 28px;box-shadow:var(--x-shadow);
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease);
}
html body .pcard:hover{transform:translateY(-6px);box-shadow:var(--x-shadow-hi)}
html body .pcard h3{font-size:24px;letter-spacing:-.03em;color:var(--x-ink)}
html body .pcard .ptag{font-size:14.5px;margin:6px 0 16px;color:var(--x-mut)}
html body .pcard .plab{font:800 11px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.12em;color:var(--x-blue);margin:18px 0 8px}
html body .pcard .pbest{gap:7px}
html body .pcard .pbest span{background:var(--x-ice);color:var(--x-navy2);border:1px solid var(--x-line);font-weight:700;font-size:12.5px;padding:6px 12px}
html body .pcard .pval{font-size:15.5px;font-weight:600;line-height:1.5;color:var(--x-ink)}
/* the gradient edge (homepage .x-card::after) */
html body .pcard:not(.us)::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:var(--v3-edge);opacity:0;transition:opacity .35s var(--x-ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html body .pcard:not(.us):hover::after{opacity:1}
/* us: the flagship treatment (homepage .x-flag), deep enough for AA white text */
html body .pcard.us{
  overflow:hidden;border:1px solid transparent;color:#fff;
  background:radial-gradient(80% 70% at 100% 0%,rgba(74,143,214,.42) 0%,rgba(74,143,214,0) 60%),
             linear-gradient(150deg,#0F1E36 0%,#16325C 55%,#21497E 100%);
  box-shadow:0 36px 70px -34px rgba(15,30,54,.8);
}
html body .pcard.us::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(circle at 92% 10%,transparent 0 24px,rgba(255,255,255,.06) 24px 25px);
}
html body .pcard.us > *{position:relative}
html body .pcard.us h3,
html body .pcard.us .pval{color:#fff}
html body .pcard.us .ptag{color:#C6D3E6}
html body .pcard.us .plab{color:var(--x-sun)}
html body .pcard.us .pbest span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff}

/* ─────────────────────────────────────────────────────────────────
   5 · VS "IN SHORT" on the navy band — theirs glassy, ours lit white
   ───────────────────────────────────────────────────────────────── */
html body .short{gap:18px}
html body .scard{
  position:relative;border-radius:24px;padding:28px 28px 18px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff;
  transition:transform .35s var(--x-ease),box-shadow .35s var(--x-ease),background .35s;
}
html body .scard:hover{transform:translateY(-6px)}
html body .scard:not(.win):hover{background:rgba(255,255,255,.09)}
html body .scard h3{font-size:21px;letter-spacing:-.025em;color:#fff;margin-bottom:8px}
html body .scard li{font-size:15px;line-height:1.55;color:#DCE7F5;padding:13px 0 13px 34px;border-bottom:1px solid rgba(255,255,255,.12)}
html body .scard li:last-child{border-bottom:0}
html body .scard li::before{content:"";top:22px;left:6px;width:8px;height:8px;border-radius:50%;background:#8FB6E3}
html body .scard.win{background:#fff;border-color:transparent;color:var(--x-ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
html body .scard.win::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:var(--v3-edge);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
html body .scard.win h3{color:var(--x-ink)}
html body .scard.win li{color:var(--x-ink);border-bottom-color:var(--x-line)}
html body .scard.win li::before{
  content:"✓";top:12px;left:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:#E4F3EA;color:var(--x-green);font:900 12px/1 'Inter',system-ui,sans-serif;
}

/* ─────────────────────────────────────────────────────────────────
   6 · HUB SCOREBOARD (navy) + STANCE (white card)
   ───────────────────────────────────────────────────────────────── */
html body .stance{
  background:#fff;border:1px solid var(--x-line);border-radius:26px;padding:10px 30px;box-shadow:var(--x-shadow);
}
html body .stance li{font-size:16px;line-height:1.55;padding:18px 0 18px 50px;border-bottom:1px solid var(--x-line)}
html body .stance li:last-child{border-bottom:0}
html body .stance li::before{
  top:16px;left:0;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  background:var(--g-career);color:#fff;font:900 14px/1 'Inter',system-ui,sans-serif;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 18px -10px rgba(15,30,54,.6);
}
html body .stance a{color:var(--x-blue);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
/* scoreboard: six glass tiles on navy */
html body section:has(.stance + p) .stance{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
html body section:has(.stance + p) .stance ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
html body section:has(.stance + p) .stance li{
  position:relative;padding:74px 24px 24px;border-radius:22px;color:#fff;font-size:16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:transform .35s var(--x-ease),background .35s;
}
html body section:has(.stance + p) .stance li:hover{transform:translateY(-6px);background:rgba(255,255,255,.1)}
html body section:has(.stance + p) .stance li::before{top:24px;left:24px;width:36px;height:36px;border-radius:12px;background:var(--x-sun);color:var(--x-navy);box-shadow:0 10px 20px -10px rgba(255,217,59,.7)}
html body section:has(.stance + p) .stance a{color:var(--x-sun)}
html body section:has(.stance + p) .stance + p{
  color:#fff;font:800 clamp(19px,2vw,24px)/1.3 'Bricolage Grotesque',sans-serif!important;letter-spacing:-.02em;margin-top:38px!important;text-wrap:balance;
}

/* ─────────────────────────────────────────────────────────────────
   7 · HUB FAQ — homepage two-column layout on wide screens
   ───────────────────────────────────────────────────────────────── */
@media(min-width:900px){
  html body section:has(details.q) > .wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:56px;align-items:start}
  html body section:has(details.q) .head{grid-column:1;grid-row:1 / span 12;position:sticky;top:100px;margin-bottom:0}
  html body section:has(details.q) details.q{grid-column:2}
}

/* ─────────────────────────────────────────────────────────────────
   8 · MOTION — same scroll reveal as site-v3 (fade + rise, forwards
   fill, no effect without view timelines); a slow pulse on the badge.
   The first band under the hero sits at the fold, so it is shown at once
   instead of loading half-faded.
   ───────────────────────────────────────────────────────────────── */
@keyframes cmp-pulse{0%,100%{box-shadow:0 0 0 5px #fff,0 0 0 5px rgba(91,130,240,.35),0 16px 30px -12px rgba(15,30,54,.6)}
                     50%{box-shadow:0 0 0 5px #fff,0 0 0 14px rgba(91,130,240,0),0 16px 30px -12px rgba(15,30,54,.6)}}
@media screen and (prefers-reduced-motion:no-preference){
  html body .profiles::before{animation:cmp-pulse 2.8s ease-in-out infinite}
  @supports (animation-timeline:view()){
    html body :is(.pcard,.scard,.stance li){
      animation-name:v3-rise;animation-timing-function:linear;animation-fill-mode:forwards;
      animation-timeline:view();animation-range:entry 0% entry 55%;
    }
    /* beats site-v3's :is(.card, #id .x …) reveal rule (id weight via #_v3) */
    html body :is(section,#_v3):has(> .wrap > .cards:not([style])) .card,
    html body :is(section,#_v3):has(> .wrap > .profiles) .pcard{animation:none}
  }
}
@media (prefers-reduced-motion:reduce){
  html body :is(.pcard,.scard,.stance li){transition:none}
  html body :is(.pcard,.scard,.stance li):hover{transform:none}
}

/* ─────────────────────────────────────────────────────────────────
   9 · RESPONSIVE — 2-up checks on tablets; phones get tighter bands,
   a sticky first column inside the table scroller, single-column tiles
   ───────────────────────────────────────────────────────────────── */
@media(max-width:1000px){
  html body .cards[style]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body section:has(.stance + p) .stance ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  html body{--cmp-pad:64px}
  html body .head{margin-bottom:26px}
  html body .head p[style]{font-size:16px!important}
  html body .cards[style]{grid-template-columns:minmax(0,1fr)!important}
  html body .cards{grid-template-columns:minmax(0,1fr)}
  html body .card{padding:22px 20px}
  html body .pcard{padding:24px 22px}
  html body .pcard h3{font-size:22px}
  html body .scard{padding:24px 22px 14px}
  html body .stance{padding:6px 20px}
  html body .stance li{font-size:15px;padding:16px 0 16px 46px}
  html body section:has(.stance + p) .stance ul{grid-template-columns:minmax(0,1fr);gap:12px}
  html body section:has(.stance + p) .stance li{padding:20px 20px 20px 72px}
  html body section:has(.stance + p) .stance li::before{top:20px;left:20px}
  html body .tblwrap{border-radius:20px;margin-left:-12px;margin-right:-12px}
  html body .tblwrap th,html body .tblwrap td{padding:12px 12px}
  /* vs tables: all three columns side by side on a phone (us vs them is the
     point); a long platform name that still does not fit scrolls inside
     .tblwrap with the feature column pinned */
  html body .tblwrap table:not(.matrix){min-width:0;table-layout:fixed;font-size:12.5px;line-height:1.45}
  html body .tblwrap table:not(.matrix) tr:first-child > th:first-child{width:34%}
  html body .tblwrap table:not(.matrix) tr:first-child > th:nth-child(2){width:34%}
  html body .tblwrap table:not(.matrix) :is(th,td){padding:11px 8px;overflow-wrap:anywhere}
  html body .tblwrap table:not(.matrix) :is(th,td):first-child{padding-left:12px}
  html body .tblwrap table:not(.matrix) th{text-transform:none;letter-spacing:0;font-size:10.5px;padding-left:6px;padding-right:6px}
  html body .tblwrap table:not(.matrix) td:first-child{font-size:12px}
  html body .tblwrap table:not(.matrix) tr.grp td{font-size:10.5px;padding:10px 12px}
  html body .tblwrap tr:not(.grp) > :first-child{position:sticky;left:0;z-index:2;background:#fff}
  html body .tblwrap tr:not(.grp) > th:first-child{background:#F7FAFD}
  html body .matrix td:first-child,html body .matrix th:first-child{min-width:118px;width:118px}
  /* hub matrix on phones: narrow our column so the next platform peeks in,
     and make its tint see-through so the right-edge "scroll me" shadow on
     .tblwrap shows through instead of being covered */
  html body .tblwrap .matrix :is(th,td).us{width:150px;min-width:150px}
  html body .tblwrap .matrix td.us{background:rgba(43,108,184,.065)}
  html body .st{font-size:11.5px;padding:3px 8px;border-radius:9px}
  html body .legend .st{font-size:12px}
}