/* MenuIndex shared stylesheet for content pages.
   Tokens, header and footer are lifted unchanged from index.html and the legal
   pages, so a content page is visually indistinguishable from the rest of the
   site. Nothing new is designed here: the only additions are layout classes for
   page types the homepage does not have (breadcrumb, question list, related
   links). The homepage and the legal pages keep their own inline styles and are
   not affected by this file. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#14304F;
  --ink-2:#1A3C63;
  --ink-3:#22507E;
  --ink-shadow:20,48,79;
  --paper:#FFFFFF;
  --surface:#F2F5F9;
  --surface-2:#E6ECF3;
  --line:#DCE3EB;
  --line-dark:rgba(255,255,255,.15);
  --text:#16293D;
  --muted:#5A6B80;
  --muted-2:#8496A8;
  --on-dark:#C3D0DE;
  --on-dark-2:#A6B8C9;
  --gold:#B08341;
  --gold-2:#C99B54;
  --gold-pale:#F5EDE0;
  --accent:#1B5E86;
  --max:1220px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--paper);color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:15.5px;line-height:1.78;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.doc{max-width:800px;margin:0 auto;padding:46px 32px 78px}
img{display:block;max-width:100%}

/* ── top bar ── */
.topbar{
  background:var(--ink);color:var(--on-dark-2);
  font-family:'IBM Plex Mono',monospace;font-size:11.5px;letter-spacing:.04em;
}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:20px}
.topbar .live{display:flex;align-items:center;gap:8px}
.dot{width:6px;height:6px;border-radius:50%;background:#5FBF8F;box-shadow:0 0 0 3px rgba(95,191,143,.18)}
.topbar a{color:var(--on-dark-2);text-decoration:none;border:0}
.topbar a:hover{color:#fff}

/* ── nav ── */
nav{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;border:0}
.brand-mark{display:block;height:26px;width:24.1px;flex:none}
.brand-mark .m{fill:var(--ink)}
.brand-mark .i{fill:var(--gold)}
.brand-rule{width:1px;height:22px;background:var(--ink);opacity:.28;flex:none}
.brand-name{font-size:13px;font-weight:700;letter-spacing:.20em;text-indent:.20em;color:var(--ink);line-height:1}
.navlinks{display:flex;gap:30px;align-items:center;margin-left:auto}
.navlinks a{
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;border:0;
  padding:6px 0;border-bottom:2px solid transparent;transition:.15s;
}
.navlinks a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.navlinks a.on{color:var(--ink);border-bottom-color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 24px;border-radius:2px;border:1px solid transparent;
  font-size:14px;font-weight:600;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;transition:all .18s ease;font-family:Inter,sans-serif;
}
.btn-gold{background:var(--gold);color:#fff;border-color:var(--gold)}
.btn-gold:hover{background:var(--gold-2);border-color:var(--gold-2)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-3)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.nav-cta{margin-left:8px}

/* ── header band ── */
.band{
  background:linear-gradient(180deg,#FFFFFF 0%,#FBFCFD 58%,var(--surface) 100%);
  border-bottom:1px solid var(--line);padding:44px 0 46px;
}
.band .inner{max-width:800px;margin:0 auto;padding:0 32px}
.band.wide .inner{max-width:var(--max)}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.eyebrow.dim{color:var(--muted-2)}

/* breadcrumb: plain text, one line, the last item is the page itself */
.crumbs{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:18px;
}
.crumbs a{color:var(--muted);text-decoration:none;border:0}
.crumbs a:hover{color:var(--ink)}
.crumbs span{color:var(--muted-2)}

h1{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;color:var(--ink);
  font-size:clamp(30px,4.4vw,42px);line-height:1.1;letter-spacing:-.015em;
}
.standfirst{margin-top:16px;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:660px}

/* ── document body ── */
h2{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;color:var(--ink);
  font-size:21px;line-height:1.25;margin:40px 0 12px;
}
h2:first-child{margin-top:0}
h3{
  font-family:'Source Serif 4',Georgia,serif;font-weight:600;color:var(--ink);
  font-size:17.5px;line-height:1.3;margin:26px 0 8px;
}
p{margin-bottom:14px}
ul{margin:0 0 16px 0;list-style:none}
li{position:relative;padding-left:20px;margin-bottom:9px}
li:before{content:'\00B7';position:absolute;left:4px;color:var(--gold);font-family:'IBM Plex Mono',monospace}
strong,b{color:var(--ink);font-weight:600}
a{color:var(--ink);text-decoration:none}
.doc a,.standfirst a{border-bottom:1px solid rgba(176,131,65,.5)}
.doc a:hover,.standfirst a:hover{border-bottom-color:var(--gold)}

.note{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:18px 22px;margin:22px 0;font-size:15px;line-height:1.7;
}
.note p:last-child{margin-bottom:0}
.note .h{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:8px;
}

/* press images offered for download: the wide one sets the row, the square one follows it */
.pressimg{display:grid;grid-template-columns:1.9fr 1fr;gap:16px;margin:22px 0 26px}
.pressimg a{display:block;border:0}
.pressimg img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.pressimg span{
  display:block;margin-top:8px;font-family:'IBM Plex Mono',monospace;
  font-size:11px;letter-spacing:.06em;color:var(--muted-2);line-height:1.5;
}
@media (max-width:700px){.pressimg{grid-template-columns:1fr}}

/* press release header: the part a journalist lifts, so it carries the weight of a headline */
#release{padding:26px 26px 24px}
#release h2{
  font-size:clamp(23px,2.6vw,29px);line-height:1.18;letter-spacing:-.012em;
  margin:2px 0 12px;
}
#release .dek{font-size:16.5px;line-height:1.6;color:var(--muted);margin:0}

.fineprint{
  font-size:12.5px;line-height:1.65;color:var(--muted-2);
  margin-top:22px;padding-top:16px;border-top:1px solid var(--line);
}
.fineprint a{color:var(--muted-2);border-bottom-color:rgba(132,150,168,.45)}

/* ── facts strip: what sits behind the page, already-public counts only ── */
.facts{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin:26px 0;
}
.facts div{background:#fff;padding:14px 18px}
.facts .k{
  font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;
}
.facts .v{
  font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:500;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.25;display:block;
}
.facts .v small{font-size:12px;color:var(--muted-2);font-weight:400;margin-left:4px}

/* ── question list: the buyer's own words ── */
.qa{margin:18px 0 24px;list-style:none}
.qa li{
  padding:0 0 0 26px;margin-bottom:13px;font-size:16px;color:var(--ink);
  font-family:'Source Serif 4',Georgia,serif;line-height:1.45;
}
.qa li:before{
  content:'?';left:0;top:0;color:var(--gold);font-family:'IBM Plex Mono',monospace;
  font-size:14px;font-weight:600;
}

/* ── structure list: what a report contains, described never valued ── */
.inside{border-top:1px solid var(--line);margin:18px 0 24px}
.inside div{
  display:grid;grid-template-columns:210px 1fr;gap:20px;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.inside .k{
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink);padding-top:2px;
}
.inside .v{color:var(--muted);font-size:14.5px;line-height:1.65}

/* ── price and call to action ── */
.pricebar{
  background:var(--ink);color:#fff;padding:26px 28px;margin:32px 0 8px;
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.pricebar .lab{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-dark-2);margin-bottom:6px;
}
.pricebar .amt{
  font-family:'IBM Plex Mono',monospace;font-size:22px;font-weight:500;color:#fff;
  line-height:1.3;
}
.pricebar .amt span{color:var(--gold-2)}
.pricebar p{color:var(--on-dark);font-size:13.5px;margin:8px 0 0;line-height:1.6;max-width:460px}
.pricebar a{border:0}

/* ── related pages ── */
.rel{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.rel .h{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.rel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.rel-grid a{
  background:#fff;padding:15px 18px;display:block;border:0;
  font-size:14.5px;color:var(--ink);font-weight:500;transition:.15s;
}
.rel-grid a:hover{background:var(--surface)}
.rel-grid a em{
  display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  font-weight:400;margin-top:3px;line-height:1.5;
}

/* ── hub grid: index of pages ── */
.hub{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:26px 0}
.hub a{background:#fff;padding:20px 22px;display:block;border:0;transition:.15s}
.hub a:hover{background:var(--surface)}
/* an odd number of tiles would leave the last grid cell empty and showing the
   divider colour, so the last tile spans the row instead */
.hub a:last-child:nth-child(odd){grid-column:1 / -1}
/* display:block is what makes the three spans stack; without it the title and
   the description run together on one line */
.hub .t{display:block;font-family:'Source Serif 4',Georgia,serif;font-size:18px;font-weight:600;color:var(--ink);line-height:1.25}
.hub .d{display:block;font-size:13.5px;color:var(--muted);margin-top:6px;line-height:1.6}
.hub .c{
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-top:9px;display:block;
}

/* availability pills, same two states as the homepage catalogue */
.av{
  font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:2px;white-space:nowrap;
}
.av-req{background:var(--gold-pale);color:#8A6428}
.av-prep{background:var(--surface-2);color:var(--muted)}

/* ── footer ── */
footer{background:var(--ink);color:var(--on-dark-2);padding:48px 0 30px;font-size:14px}
.f-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:34px;border-bottom:1px solid var(--line-dark)}
footer .brand-name{color:#fff}
footer .brand-mark .m{fill:#fff}
footer .brand-rule{background:#fff;opacity:.34}
.f-about{margin-top:16px;line-height:1.65;max-width:400px;font-size:14px}
.f-col h5{font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:500}
.f-col a{display:block;color:var(--on-dark-2);text-decoration:none;border:0;padding:5px 0;font-size:14px}
.f-col a:hover{color:#fff}
.f-legal{padding-top:26px;font-size:12px;line-height:1.7;color:#8093A6}
.f-bottom{margin-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px}
.f-bottom a{color:var(--on-dark-2);border:0}

@media (max-width:1000px){
  .f-grid{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr}
}
@media (max-width:860px){
  /* the top bar has room for one line on a phone, so the lead phrase is dropped
     and the date, which is the part that matters, is kept */
  .tb-lead{display:none}
  .dot{flex:none}
  .wrap{padding:0 24px}
  .doc{padding:34px 24px 60px}
  .band .inner{padding:0 24px}
  .band{padding:34px 0 36px}
  .navlinks{display:none}
  nav .wrap{height:60px;gap:10px}
  .brand-name{font-size:11.5px;letter-spacing:.16em;text-indent:.16em}
  .nav-cta{margin-left:auto;font-size:13px;padding:9px 14px;white-space:nowrap}
  .topbar{font-size:10.5px}
  .tb-tail{display:none}
  .f-grid,.rel-grid,.hub{grid-template-columns:1fr}
  .inside div{grid-template-columns:1fr;gap:4px}
  .pricebar{grid-template-columns:1fr;gap:16px}
}