:root{
  --ink:#16151a; --muted:#5f5c66; --paper:#fcfbf9; --card:#f2f0ec; --line:#e7e4de;
  --grad-a:#1e51c9; --grad-b:#0c2461; --grad-c:#4f7ff0;
  --dark:#0e0e0c; --dark-card:#1a1a17; --white:#ffffff;
  --r-xl:28px; --r-lg:18px; --r-md:12px; --r-pill:999px;
  --shadow-card:0 18px 40px -18px rgba(22,21,26,.28), 0 4px 10px -4px rgba(22,21,26,.12);
  --shadow-chip:0 10px 24px -12px rgba(22,21,26,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",-apple-system,sans-serif;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}
.mono{font-family:"JetBrains Mono",monospace}

/* ---------- utility topbar ---------- */
.topbar{background:var(--dark);color:#fff;font-size:13px;font-weight:500}
.topbar .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding:9px 28px;flex-wrap:wrap}
.topbar .tag{background:#2f2f2b;border-radius:6px;padding:2px 10px;font-size:11.5px;font-weight:700;letter-spacing:.04em}
.topbar a{text-decoration:underline;text-underline-offset:3px;opacity:.85}
.topbar .spacer{flex:1}
.currency-picker{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;opacity:.9}
/* Drawn, not a raw native select: the default control renders as an OS-styled
   widget on the dark utility bar and reads as a framework default. */
.currency-picker select{appearance:none;-webkit-appearance:none;background:#2f2f2b
  url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23c9c7c0' stroke-width='2'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E")
  no-repeat right 6px center;background-size:12px;color:#fff;border:1px solid #45443f;
  border-radius:6px;padding:3px 22px 3px 8px;font-size:12px;font-weight:700;
  font-family:"JetBrains Mono",monospace;cursor:pointer;line-height:1.5}
.currency-picker select:hover{border-color:#6b6a63}
.currency-picker select:focus-visible{outline:2px solid var(--grad-c);outline-offset:1px}
.money-secondary{color:var(--muted);font-weight:500}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;background:rgba(252,251,249,.92);backdrop-filter:blur(10px);z-index:50;border-bottom:1px solid transparent}
nav.site .wrap{display:flex;align-items:center;gap:22px;padding:16px 28px}
.brand{font-weight:800;font-size:22px;letter-spacing:-.03em}
.brand em{font-style:normal;color:var(--grad-a)}
nav.site ul{display:flex;gap:26px;list-style:none;font-size:14.5px;font-weight:600;color:#3c3a42}
/* Nav items must sit on one baseline; "Trade data" was wrapping to two lines
   and breaking the row's alignment. */
nav.site ul li{white-space:nowrap}
/* Nav CTAs keep their pill shape: "The Pakistan brief" and "Connect with our
   team" were wrapping to two and three lines and rendering as ovals. Scoped
   to the nav so the full-width mobile CTA buttons can still wrap. */
nav.site .btn{white-space:nowrap}
nav.site ul a:hover{color:var(--grad-a)}
nav.site .spacer{flex:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);font-weight:700;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-dark{background:var(--ink);color:#fff;padding:11px 22px;font-size:14.5px}
.btn-white{background:#fff;color:var(--ink);padding:14px 28px;font-size:15.5px;box-shadow:0 2px 0 rgba(0,0,0,.06)}
.btn-ghost{border:1.5px solid var(--line);padding:10px 20px;font-size:14.5px;background:#fff}

/* ---------- hero ---------- */
.hero{padding:18px 0 26px}
.hero .wrap{display:grid;grid-template-columns:1.04fr .96fr;gap:14px}
.hero-panel{border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:640px}
.hero-left{background:radial-gradient(120% 140% at 88% -10%, var(--grad-c) 0%, var(--grad-a) 42%, var(--grad-b) 100%);color:#fff;padding:56px 52px 44px;display:flex;flex-direction:column}
.hero-left h1{font-size:54px;line-height:1.04;font-weight:800;letter-spacing:-.028em;max-width:11ch}
.hero-left .sub{margin-top:20px;font-size:16.5px;line-height:1.6;color:rgba(255,255,255,.86);max-width:44ch;font-weight:500}
.hero-q{margin-top:34px;font-size:14px;font-weight:700;color:rgba(255,255,255,.92)}
.chips{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:430px}
.chip{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:15px 18px;font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;backdrop-filter:blur(4px)}
.chip:hover{background:rgba(255,255,255,.2)}
.chip svg{flex:none}
/* Light-context variant: the hero's .chip is white-on-translucent for the
   marine gradient; on a plain page background (e.g. an A-Z state list) the
   chip reads as a small card instead. Same shape, page-toned fill. */
.chips-light{max-width:none;grid-template-columns:repeat(6,1fr)}
.chips-light .chip{background:var(--card);border-color:var(--line);color:var(--ink);font-weight:600;font-size:13px;padding:10px 14px;backdrop-filter:none;justify-content:center}
.chips-light .chip:hover{background:#fff;border-color:var(--grad-a);color:var(--grad-a)}
.hero-cta{margin-top:26px;max-width:430px}
.hero-cta .btn-white{width:100%}
.hero-stamp{margin-top:auto;padding-top:26px;font-size:12.5px;color:rgba(255,255,255,.75);font-weight:600;display:flex;gap:8px;align-items:center}
.hero-stamp .dot{width:7px;height:7px;border-radius:50%;background:#7CFC9B;display:inline-block}

/* hero right: layered product UI */
.hero-right{background:linear-gradient(160deg,#0a1d4d 0%, #123a8f 55%, #1e51c9 100%);padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:18px}
.ui-card{background:#fff;border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden}
.ui-card .ui-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.ui-card .ui-head .t{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}
.badge{font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:3px 9px;border-radius:6px}
.badge-green{background:#e5f6ea;color:#177a3d}

/* ---------- compare: data-class badges + fit-verdict chips ---------- */
.dataclass{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;padding:3px 9px;border-radius:6px;white-space:nowrap}
.dataclass-observed{background:var(--grad-a);color:#fff}
.dataclass-benchmark{background:transparent;color:var(--grad-a);border:1.5px solid var(--grad-a)}
.fitchip{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.03em;padding:4px 11px;border-radius:999px}
.fitchip-good{background:#e5f6ea;color:#177a3d}
.fitchip-conditional{background:#fff3d6;color:#9a6700}
.fitchip-weak{background:#fbe4e2;color:#a3312a}
.fitchip-nodata{background:var(--card);color:var(--muted)}
.comparerow-pakistan{background:#eef3fd}
.comparegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;margin-top:18px}
.comparegrid a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-weight:700;font-size:14px;display:block}
.comparegrid a:hover{border-color:var(--grad-a);color:var(--grad-a)}
.ui-big{padding:16px 18px 6px}
.ui-big .n{font-size:34px;font-weight:800;letter-spacing:-.02em}
.ui-big .n small{font-size:14px;color:var(--muted);font-weight:700}
.ui-big .l{font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.ui-rows{padding:8px 6px 10px}
.ui-row{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:10px;font-size:13px}
.ui-row:nth-child(odd){background:#faf9f7}
.ui-row .r-l{font-weight:700}
.ui-row .r-l span{display:block;font-size:11px;color:var(--muted);font-weight:600}
.ui-row .r-v{font-family:"JetBrains Mono",monospace;font-weight:600;font-size:12.5px}
.float-chip{background:#fff;border-radius:12px;box-shadow:var(--shadow-chip);padding:10px 14px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:9px;width:max-content}
.float-chip .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px}
/* The two floating chips overlap the card by design, but they were covering
   real content: chip .a sat on the "CURRENT" badge and chip .b on the last
   data row. Pad the stack so each chip straddles the card's OUTER edge, and
   pad the card itself so no row ever sits under chip .b. */
.hr-stack{position:relative;padding:22px 0 26px}
.hr-stack .ui-card{padding-bottom:16px}
/* Anchored to the card's right edge and lifted fully ABOVE the card's header
   row, so it never lands on the "CURRENT" badge. */
.hr-stack .float-chip.a{position:absolute;right:-6px;top:0;z-index:2}
.hr-stack .ui-card .ui-head{padding-top:22px}
.hr-stack .float-chip.b{position:absolute;left:-8px;bottom:0;z-index:2}
.hero-right .foot{display:flex;justify-content:center}
.hero-right .foot .float-chip{background:rgba(255,255,255,.14);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.22)}

/* ---------- fact strip ---------- */
.factstrip{padding:44px 0 36px;text-align:center}
.factstrip .cap{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
.factstrip .row{margin-top:18px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.factstrip .f{border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);padding:10px 22px;font-weight:700;font-size:14px;color:#3c3a42;display:flex;gap:9px;align-items:center}
.factstrip .f b{color:var(--ink)}

/* ---------- platform grid ---------- */
.section{padding:52px 0}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--muted)}
h2.display{font-size:42px;font-weight:800;letter-spacing:-.025em;margin-top:10px;line-height:1.08}
.grid3{margin-top:34px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.pcard{background:var(--card);border-radius:var(--r-lg);padding:26px 26px 22px;display:flex;flex-direction:column;min-height:320px}
.pcard h3{font-size:19px;font-weight:800;letter-spacing:-.01em}
.pcard p{margin-top:6px;font-size:14px;color:var(--muted);font-weight:500}
.pcard .well{margin-top:auto;background:#fff;border-radius:12px;padding:14px;box-shadow:0 6px 18px -12px rgba(22,21,26,.25)}
.well .wrow{display:flex;justify-content:space-between;font-size:12.5px;padding:6px 4px;border-bottom:1px dashed var(--line)}
.well .wrow:last-child{border-bottom:0}
.well .wrow b{font-weight:700}
.well .wrow .v{font-family:"JetBrains Mono",monospace;font-size:11.5px;color:#3c3a42}
.well .wrow-full{font-size:12.5px;line-height:1.5;padding:7px 4px;border-bottom:1px dashed var(--line);color:#3c3a42}
.well .wrow-full:last-child{border-bottom:0;font-weight:700;color:var(--ink, #232227)}
.bars{display:flex;align-items:flex-end;gap:7px;height:74px;padding:6px 4px 2px}
.bars i{display:block;width:100%;background:linear-gradient(180deg,var(--grad-c),var(--grad-a));border-radius:5px 5px 0 0}
.bars-cap{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);font-weight:700;padding:4px 4px 0}

/* ---------- timeline ---------- */
.timeline{padding:58px 0;text-align:center}
.timeline h2{font-size:38px;font-weight:800;letter-spacing:-.025em;margin-top:10px}
.t-steps{margin-top:44px;display:grid;grid-template-columns:1fr 1fr 1fr;position:relative}
.t-steps:before{content:"";position:absolute;top:7px;left:16%;right:16%;border-top:2px dotted #c9c5bd}
.t-step{position:relative;padding:0 26px}
.t-step .node{width:14px;height:14px;border-radius:50%;background:var(--ink);margin:0 auto;position:relative;z-index:1;border:3px solid var(--paper)}
.t-step h4{margin-top:16px;font-size:17px;font-weight:800}
/* Squared, ruled cards on the marine palette rather than pale lavender
   rounded pills: the tint sat off-palette and the shape read as a default. */
.t-step .tcard{margin:14px auto 0;background:#eef2fb;border:1px solid #d3ddf4;
  border-left:3px solid var(--grad-a);border-radius:4px;padding:13px 18px;
  font-size:13.5px;font-weight:600;color:#2c2a33;max-width:250px;text-align:left}
.t-step:nth-child(2) .tcard{background:#e6ecf9}

/* ---------- dark band ---------- */
.dark{padding:26px 0 60px}
.dark .panel{background:var(--dark);border-radius:var(--r-xl);color:#fff;padding:56px 54px}
.dark h2{font-size:38px;font-weight:800;letter-spacing:-.025em;max-width:20ch}
.dark .cols{margin-top:36px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:26px}
.dark .col h5{font-size:15.5px;font-weight:800}
.dark .col h5 span{color:#8fb0f5}
.dark .col p{margin-top:8px;font-size:13.5px;color:#b9b7b1;font-weight:500;line-height:1.6}
.dark .col .lm{display:inline-block;margin-top:12px;font-size:13px;font-weight:700;color:#fff;border-bottom:1.5px solid #4a4a44;padding-bottom:2px}
.dark .shot{margin-top:40px;background:var(--dark-card);border-radius:18px;padding:26px;display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.chart{background:#101012;border:1px solid #2a2a26;border-radius:12px;padding:18px}
.chart .c-t{font-size:11px;font-weight:800;letter-spacing:.1em;color:#8f8d86;margin-bottom:12px}
.chart svg{width:100%;height:150px;display:block}
.dark .shot .txt h6{font-size:16px;font-weight:800}
.dark .shot .txt p{margin-top:8px;font-size:13.5px;color:#b9b7b1;line-height:1.6}
.dark .shot .txt .lm{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:#fff;border-bottom:1.5px solid #4a4a44;padding-bottom:2px}

/* ---------- questions ---------- */
.questions .head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px}
.questions .head p{max-width:34ch;font-size:14px;color:var(--muted);font-weight:500}
.qgrid{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.qcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.qcard h4{font-size:16.5px;font-weight:800;line-height:1.35}
.qcard p{margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:500;line-height:1.6}
.qcard .lm{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;border-bottom:1.5px solid var(--line);padding-bottom:2px}

/* ---------- stats ---------- */
.stats{padding:64px 0;text-align:center}
.stats h2{font-size:38px;font-weight:800;letter-spacing:-.025em;max-width:24ch;margin:0 auto}
.statrow{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat .n{font-size:64px;font-weight:800;letter-spacing:-.03em;line-height:1}
.stat .l{margin-top:10px;font-size:13.5px;color:var(--muted);font-weight:600;max-width:20ch;margin-left:auto;margin-right:auto}
.stats .btn-dark{margin-top:38px}

/* ---------- excerpts ---------- */
.excerpts{padding:10px 0 64px}
.exrow{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.excard{background:var(--card);border-radius:14px;padding:20px}
.excard p{font-size:13.5px;font-weight:600;line-height:1.55}
.excard .src{margin-top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted)}

/* ---------- footer ---------- */
footer.site{background:var(--dark);color:#fff;margin-top:20px}
footer.site .top{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:34px 28px;padding:56px 28px 40px}
footer.site .loccol li{margin-bottom:12px;color:#b9b7b1;line-height:1.55}
footer.site h6{font-size:12px;font-weight:800;letter-spacing:.1em;color:#8f8d86;margin-bottom:14px}
footer.site ul{list-style:none;font-size:13.5px;font-weight:500}
footer.site ul li{margin-bottom:9px}
footer.site ul a{color:#d8d6d0}
footer.site ul a:hover{color:#fff}
footer.site .brandcol .brand{color:#fff;font-size:24px}
footer.site .brandcol p{margin-top:12px;font-size:13px;color:#b9b7b1;max-width:26ch;line-height:1.6}
.newsbar{border-top:1px solid #2a2a26}
.newsbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:26px;padding:26px 28px}
.newsbar h5{font-size:19px;font-weight:800}
.newsbar form{display:flex;gap:10px}
.newsbar input{background:#1a1a17;border:1px solid #34342f;color:#fff;border-radius:var(--r-pill);padding:12px 20px;font-size:14px;width:300px;font-family:inherit}
.legal{border-top:1px solid #2a2a26}
.legal .wrap{display:flex;justify-content:space-between;padding:18px 28px;font-size:12px;color:#8f8d86}
.legal a{color:#8f8d86;text-decoration:underline;text-underline-offset:3px}

/* ---------- shared responsive fixes ----------
   comp-v2's base CSS has no media queries. This block collapses grids to a
   single column, stacks the hero, and scales type down for phone widths.
   Applied verbatim to comp-v2.html and to every inner page (page-guide,
   page-rates, page-article, page-contact). Keep in sync across all files. */
@media (max-width: 900px){
  .wrap{padding:0 18px}
  nav.site ul{display:none}
  nav.site .wrap{gap:14px}
  /* The desktop nowrap would push the dark CTA past a 390px viewport. */
  nav.site .btn{white-space:normal}
  nav.site .btn-dark{padding:10px 16px;font-size:13.5px}
  .btn-ghost{display:none}

  .hero .wrap{grid-template-columns:1fr}
  .hero-panel{min-height:0}
  .hero-left{padding:36px 26px 32px}
  .hero-left h1{font-size:34px;max-width:none}
  .hero-right{padding:30px 22px}
  .chips{grid-template-columns:1fr;max-width:none}
  .hero-cta{max-width:none}

  .factstrip .row{flex-direction:column;align-items:stretch}
  .factstrip .f{justify-content:center}

  h2.display{font-size:30px}
  .grid3{grid-template-columns:1fr}
  .pcard{min-height:0}

  .t-steps{grid-template-columns:1fr;gap:28px}
  .t-steps:before{display:none}
  .t-step{padding:0 8px}

  .dark .panel{padding:34px 22px}
  .dark h2{font-size:28px;max-width:none}
  .dark .cols{grid-template-columns:1fr;gap:24px}
  .dark .shot{grid-template-columns:1fr;gap:20px}

  .questions .head{flex-direction:column;align-items:flex-start;gap:14px}
  .qgrid{grid-template-columns:1fr}

  .statrow{grid-template-columns:1fr 1fr;gap:24px}
  .stat .n{font-size:44px}

  .exrow{grid-template-columns:1fr}

  footer.site .top{grid-template-columns:1fr;gap:28px;padding:40px 22px 30px}
  .newsbar .wrap{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .newsbar form{width:100%}
  .newsbar input{width:100%;flex:1}
  .legal .wrap{flex-direction:column;gap:8px;padding:16px 22px}

  /* page-specific two-column layouts (guide/rates/article) */
  .page-cols{grid-template-columns:1fr !important;gap:24px !important}
  .page-side{position:static !important;order:2}
  .page-main{order:1}
  table.wage-table{font-size:12px}
  table.wage-table th,table.wage-table td{padding:8px 6px !important}
}

  /* Long unbroken tokens in editorial prose (URLs, HS descriptions, mono
     spans) pushed the document wider than the viewport on the hire hub. */
  .prose{overflow-wrap:anywhere}
  .prose pre,.prose code{white-space:pre-wrap;overflow-wrap:anywhere}
  /* Markdown-authored prose tables have no .tscroll wrapper in the source;
     scroll the table itself so a wide table never forces the page wide. */
  .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* .well rows are label/value pairs; without a gap the two collide at phone
     widths ("Cadencemonthly pull"). */
  .well .wrow{gap:14px}
  .well .wrow .v{text-align:right}

  .page h1{font-size:28px}
  .ctaband{padding:26px 22px}
  .ctaband h4{font-size:20px;max-width:none}
}

@media (max-width: 480px){
  .hero-left h1{font-size:28px}
  .ui-big .n{font-size:26px}
  h2.display{font-size:26px}
  .stat .n{font-size:36px}
  .brand{font-size:19px}
}

/* ---------- inner-page system (guide/article/data pages) ---------- */
.page{padding:34px 0 60px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:14px;font-weight:600}
.crumb a{color:var(--muted)}
.page h1{font-size:40px;font-weight:800;letter-spacing:-.025em;line-height:1.1}
.updated{font-size:13px;color:var(--muted);margin-top:10px;margin-bottom:8px;font-weight:600}
.contact-lede{font-size:17.5px;line-height:1.6;color:var(--ink);margin-top:14px;max-width:60ch}
.officecards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:34px}
.officecard{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
.officecard h6{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.officecard p{font-size:14px;line-height:1.55;color:var(--ink)}
.pgrid{display:grid;grid-template-columns:minmax(0,720px) 300px;gap:44px;align-items:start;margin-top:18px}
.prose{font-size:16px;line-height:1.7}
.prose h2{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:40px 0 14px;padding-top:22px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:18px;font-weight:800;margin:24px 0 8px}
.prose p{margin:12px 0}
.prose ul,.prose ol{margin:12px 0 12px 22px}
.prose li{margin:6px 0}
/* Prose tables get the .ratetable treatment (white card, radius, shadow,
   mono cells) instead of bare bordered <table>, so editorial content reads
   with the same data-card language as the generated data pages. Kept scoped
   to .prose table so hand-authored markdown tables need no markup changes. */
.prose table{border-collapse:collapse;width:100%;font-size:14px;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.prose .tscroll{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.prose .tscroll table{box-shadow:none;border-radius:0}
.prose th,.prose td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.prose tr:last-child td{border-bottom:0}
.prose th{background:var(--card);font-size:11px;letter-spacing:.07em;font-weight:800;color:var(--muted);text-transform:uppercase}
.prose td.mono,.prose td code{font-family:"JetBrains Mono",monospace;font-size:13px}
.prose code{font-family:"JetBrains Mono",monospace;font-size:.9em;background:var(--card);padding:2px 6px;border-radius:6px}
.prose blockquote{border-left:3px solid var(--line);margin:14px 0;padding:2px 16px;color:var(--muted)}
.prose a{color:var(--grad-a);font-weight:600}
.side{position:sticky;top:86px;display:flex;flex-direction:column;gap:16px}
.side .cta-card{background:radial-gradient(120% 140% at 88% -10%, var(--grad-c) 0%, var(--grad-a) 52%, var(--grad-b) 100%);border-radius:var(--r-lg);color:#fff;padding:24px}
.side .cta-card h5{font-size:17px;font-weight:800;line-height:1.3}
.side .cta-card p{margin-top:8px;font-size:13px;color:rgba(255,255,255,.85);font-weight:500}
.side .cta-card .btn-white{margin-top:14px;width:100%;padding:11px 18px;font-size:14px}
.side .toc{background:var(--card);border-radius:var(--r-lg);padding:20px 22px}
.side .toc h6{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);margin-bottom:10px}
.side .toc a{display:block;font-size:13.5px;font-weight:600;color:#3c3a42;padding:5px 0;border-bottom:1px dashed var(--line)}
.side .toc a:last-child{border-bottom:0}
.datafooter{margin-top:28px;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:12px;font-size:13.5px;color:var(--muted);font-weight:500}
.badge-stale{background:#fff3d6;color:#9a6700}
.pagenav{margin-top:44px;border-top:1px solid var(--line);padding-top:18px;font-size:14px}
.pagenav a{display:inline-block;margin:0 14px 8px 0;font-weight:600;color:var(--grad-a)}
.candorpanel{margin-top:30px;border:1px solid var(--line);border-left:4px solid var(--grad-a);border-radius:10px;background:var(--card);padding:16px 20px}
/* A .prose h2 that lands inside a .candorpanel (the recurring "what we
   don't know yet" sections, auto-wrapped from the section's own heading)
   drops the page-level display scale and top rule -- those read as a new
   section break, which is wrong inside a single bordered card. */
.candorpanel .prose h2,.prose .candorpanel h2{font-size:16px;font-weight:800;letter-spacing:-.005em;margin:0 0 8px;padding-top:0;border-top:0}
.ctaband{margin-top:44px;background:radial-gradient(120% 160% at 90% -20%, var(--grad-c) 0%, var(--grad-a) 55%, var(--grad-b) 100%);border-radius:var(--r-xl);color:#fff;padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.ctaband h4{font-size:24px;font-weight:800;letter-spacing:-.02em;max-width:20ch}
.ctaband p{font-size:13.5px;color:rgba(255,255,255,.85);max-width:44ch}
.ratetable{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;margin-top:22px;margin-left:0;margin-right:0}
figure.ratetable{max-width:100%}
figure.ratetable svg{max-width:100%;height:auto}
figure.ratetable figcaption{font-size:13px}
.ratetable table{width:100%;border-collapse:collapse;font-size:14px}
.ratetable th{background:var(--card);text-align:left;font-size:11px;letter-spacing:.07em;font-weight:800;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--line)}
.ratetable td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.ratetable tr:last-child td{border-bottom:0}
.ratetable .mono{font-family:"JetBrains Mono",monospace;font-size:13px}
.ratetable tr.thin td{color:#b3b0a9}
.formshell{max-width:560px;margin:26px auto 0}
.formshell label{display:block;font-size:13px;font-weight:700;margin:16px 0 6px}
.formshell label .optional{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.formshell input,.formshell textarea,.formshell select{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 16px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)}
.formshell input:focus,.formshell textarea:focus,.formshell select:focus{outline:none;border-color:var(--grad-a);box-shadow:0 0 0 3px rgba(30,81,201,.15)}
.formshell textarea{min-height:120px;resize:vertical}
.formshell select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f5c66' stroke-width='1.6'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px;padding-right:40px}
.formshell button.btn{border:0;width:100%}
/* Honeypot: visually and structurally hidden, never a tab stop or an AT
   announcement, so only a bot's blind form-fill will ever populate it. */
.formshell .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden}
.formerror{margin:16px 0;padding:14px 18px;border:1px solid #e3b3ab;border-left:4px solid #c0392b;border-radius:10px;background:#fbeceb;color:#7a2419;font-size:13.5px}
.formerror ul{margin:6px 0 0 18px}
.formsuccess{border:1px solid var(--line);border-left:4px solid var(--grad-a);border-radius:10px;background:var(--card);padding:20px 22px;font-size:15px}
/* Wide data tables scroll inside their own container instead of forcing the
   whole document wide. .ratetable is the shell; the inner div is the scroller,
   so the card's rounded corners and border stay put while the table moves. */
.ratetable > .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ratetable > .tscroll > table{min-width:640px}
.prose .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0}
.prose .tscroll > table{margin:0;min-width:560px}

/* Withheld ("insufficient data") rows read as secondary but must stay legible:
   #b3b0a9 on white was ~2.1:1, below the 4.5:1 floor. --muted is 5.6:1. */
.ratetable tr.thin td{color:var(--muted)}
.ratetable tr.thin td strong{font-weight:600}

@media (max-width:900px){.pgrid{grid-template-columns:1fr}.side{position:static}}
@media (max-width:480px){
  .formshell{max-width:100%;padding:0 2px}
  .formshell input,.formshell textarea,.formshell select{padding:12px 14px;font-size:16px}
}

/* .chips-light responsive column counts, placed at the very end of the
   file (self-contained media queries) so they reliably win the cascade
   over the earlier unscoped .chips-light{repeat(6,1fr)} base rule, without
   depending on brace-nesting earlier in the file. */
@media (max-width:900px){.chips-light{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.chips-light{grid-template-columns:repeat(2,1fr)}}