/* Quaestis, A&A Market Intelligence Group
   Shared shell. Palette carries over from the printed fee study so the site
   and the report read as one publication. */

:root{
  --navy:#051C2C; --blue:#2251FF; --cyan:#00A9F4; --teal:#00767A;
  --pg:#FFFFFF; --surf:#F7F8FA; --surf2:#EEF1F5;
  --tx:#051C2C; --tx2:#4A5A66; --mu:#8A97A0;
  --rule:#D9DEE3; --rule2:#EDF0F3; --hl:#EEF2FF;
  --ok:#0B7A4B; --warn:#B4530A;
  --maxw:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#E9EDF1; --blue:#6E8CFF; --cyan:#4FC3F7; --teal:#4DB6AC;
    --pg:#04131E; --surf:#0A1F2E; --surf2:#0E2739;
    --tx:#E9EDF1; --tx2:#A9B7C2; --mu:#71828E;
    --rule:#1E3141; --rule2:#132433; --hl:#0E2438;
    --ok:#4ADE9B; --warn:#F0A868;
  }
}
:root[data-theme="dark"]{
  --navy:#E9EDF1; --blue:#6E8CFF; --cyan:#4FC3F7; --teal:#4DB6AC;
  --pg:#04131E; --surf:#0A1F2E; --surf2:#0E2739;
  --tx:#E9EDF1; --tx2:#A9B7C2; --mu:#71828E;
  --rule:#1E3141; --rule2:#132433; --hl:#0E2438;
  --ok:#4ADE9B; --warn:#F0A868;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--pg); color:var(--tx);
  font:16px/1.6 "Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
a{color:var(--blue)}

/* ---------------------------------------------------------------- masthead */
.mast{border-bottom:2px solid var(--navy);background:var(--pg);position:sticky;top:0;z-index:20}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:20px 32px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.brand{text-decoration:none;color:inherit;display:block}
.brand b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--tx)}
.brand span{display:block;font-size:11.5px;color:var(--tx2);letter-spacing:.05em;margin-top:1px}
/* the mark is inlined rather than an <img> so it inherits the text colour */
.brand .wm{width:124px;height:auto;display:block;color:var(--tx);margin:2px 0 3px}
.mast-r{font-size:12px;color:var(--mu);text-align:right;padding-top:4px}
.tabs{max-width:var(--maxw);margin:0 auto;padding:0 32px;display:flex;gap:4px;flex-wrap:wrap}
.tabs a{
  padding:13px 18px 12px;font-size:13.5px;font-weight:600;text-decoration:none;
  color:var(--tx2);border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;
  transition:color .13s,border-color .13s;
}
.tabs a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
/* hover previews the active state rather than filling the tab with a grey
   block, which read as a stray box against the masthead rule */
.tabs a:hover{color:var(--tx);border-bottom-color:var(--rule)}
.tabs a[aria-current="page"]:hover{border-bottom-color:var(--blue)}

/* ------------------------------------------------------------------ layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px 96px}
.hero{padding:52px 0 34px;border-bottom:1px solid var(--rule2)}
.kicker{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--blue);font-weight:700;margin:0 0 10px}
h1{font-size:38px;line-height:1.16;letter-spacing:-.022em;margin:0 0 14px;max-width:20ch;text-wrap:balance}
.lede{font-size:17px;color:var(--tx2);margin:0;max-width:66ch;line-height:1.62}
/* the masthead is sticky, so headings need clearance when scrolled to */
h2{font-size:23px;letter-spacing:-.014em;margin:52px 0 8px;text-wrap:balance;scroll-margin-top:120px}
h3{font-size:16px;margin:0 0 8px;letter-spacing:-.005em}
p{margin:0 0 15px}
.sub{font-size:14.5px;color:var(--tx2);max-width:70ch;margin:0 0 22px}

/* ------------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--rule2);border:1px solid var(--rule2);margin:30px 0}
.stat{background:var(--pg);padding:19px 20px}
.stat b{display:block;font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--tx)}
.stat.hi b{color:var(--blue)}
.stat span{display:block;font-size:11.5px;color:var(--tx2);margin-top:5px;line-height:1.4}

/* ------------------------------------------------------------------- cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin:26px 0}
.card{border:1px solid var(--rule);padding:24px;background:var(--pg);display:flex;flex-direction:column}
.card .tag{font-size:10.5px;letter-spacing:.075em;text-transform:uppercase;font-weight:700;color:var(--blue);margin-bottom:9px}
.card p{font-size:14.5px;color:var(--tx2);margin:0 0 14px}
.card .foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--rule2);font-size:12.5px;color:var(--mu)}

/* ------------------------------------------------------------------ tables */
.tw{overflow-x:auto;margin:18px 0;border:1px solid var(--rule2)}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:560px}
th,td{padding:9px 13px;text-align:right;white-space:nowrap;border-bottom:1px solid var(--rule2)}
th{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--mu);
  font-weight:700;background:var(--surf);border-bottom:1px solid var(--rule)}
th.l,td.l{text-align:left;white-space:normal;min-width:190px}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surf)}
td.num{font-weight:600}
td.pos{color:var(--ok);font-weight:600}
td.warn{color:var(--warn);font-weight:600}
.pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  padding:2px 8px;border-radius:99px;background:var(--hl);color:var(--blue)}
.pill.amber{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn)}

/* ------------------------------------------------------------------ blocks */
.note{background:var(--surf);border-left:4px solid var(--navy);padding:18px 22px;
  font-size:14.5px;color:var(--tx2);max-width:74ch;margin:24px 0}
.note b{color:var(--tx)}
.cta{border:2px solid var(--navy);padding:28px;margin:34px 0;display:flex;
  gap:26px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h3{font-size:19px;margin:0 0 5px}
.cta p{font-size:14px;color:var(--tx2);margin:0;max-width:52ch}
.btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
  padding:13px 26px;font-size:14px;font-weight:600;white-space:nowrap;border:none;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.alt{background:transparent;color:var(--blue);box-shadow:inset 0 0 0 2px var(--blue)}
:root[data-theme="dark"] .btn,:root:not([data-theme="light"]) .btn{color:#04131E}
@media(prefers-color-scheme:light){:root:not([data-theme="dark"]) .btn{color:#fff}}
:root[data-theme="dark"] .btn.alt,:root:not([data-theme="light"]) .btn.alt{color:var(--blue)}

/* ------------------------------------------------------------------ paywall */
.unlock{border:2px solid var(--blue);background:var(--hl);padding:26px 28px;margin:34px 0 0;
  display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.unlock h3{margin:0 0 5px;font-size:18px}
.unlock p{margin:0;font-size:14px;color:var(--tx2);max-width:56ch}
.unlock ul{margin:10px 0 0;padding-left:18px;font-size:13.5px;color:var(--tx2);line-height:1.7}
.unlock ul b{color:var(--tx)}
.price{color:var(--tx);font-size:17px;letter-spacing:-.01em}
/* buy buttons still on the email fallback, so the label stays honest */
.btn[data-pending]::after{content:""}
/* A static site cannot truly gate anything client-side, so the locked region
   is a teaser only. The paid artefact itself is kept out of the deployed tree. */
.locked{position:relative;margin-top:34px;max-height:400px;overflow:hidden}
.locked .veil{filter:blur(6px);opacity:.45;pointer-events:none;user-select:none}
.locked .gate{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:34px;background:linear-gradient(to bottom,
    color-mix(in srgb,var(--pg) 10%,transparent) 0%,
    color-mix(in srgb,var(--pg) 90%,transparent) 38%, var(--pg) 62%)}
.locked .gate div{text-align:center;max-width:44ch}
.locked .gate b{display:block;font-size:17px;margin-bottom:7px}
.locked .gate p{font-size:14px;color:var(--tx2);margin:0 0 18px}

.src{font-size:11.5px;color:var(--mu);margin-top:16px;padding-top:11px;border-top:1px solid var(--rule2);line-height:1.55;max-width:80ch}
.src b{color:var(--tx2);font-weight:600}

footer{border-top:2px solid var(--navy);margin-top:70px}
.foot-in{max-width:var(--maxw);margin:0 auto;padding:26px 32px 46px;
  font-size:12px;color:var(--mu);line-height:1.7;display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap}

@media (max-width:640px){
  .mast-in,.tabs,.wrap,.foot-in{padding-left:18px;padding-right:18px}
  h1{font-size:29px}
  .tabs a{padding:11px 12px;font-size:12.5px}
  .mast-r{display:none}
}