/* THE WEBSITE'S LOOK, FOR THE PUBLIC REPORT PAGES. 4 November 2026.

   WHY THIS FILE EXISTS. A reader reaches /reports and /reports/<slug> from the Squarespace site
   (www.optima-consultancy.com/bankapp, "Download the latest edition"). Those pages wore the
   PORTAL's chrome - Aptos, a white "O" placeholder mark, square buttons, no way back - so the click
   felt like leaving Optima for somebody else's tool. Mark, 4 Nov 2026: make the report download
   page "a little bit more consistent with the website". So the public pages now take their header,
   type and buttons from the website, and the portal keeps its own.

   WHAT WAS MEASURED, NOT GUESSED (computed styles off optima-consultancy.com/bankapp, 4 Nov 2026):
     headings   Manrope 500, letter-spacing about -0.02em, colour rgb(49,42,116) = #312A74
     body/nav   Nunito Sans 400; nav links #050505 at 16px
     buttons    pill (radius 300px), uppercase, Nunito Sans 400; primary pink #D24698, header
                "Get in touch" navy #312A74, secondary = 1px white outline on navy
     header     white, the full-colour logo (mark + wordmark) about 50px high
     page       lilac #DFDBFE, white sections

   FONTS ARE SELF-HOSTED, AND THAT IS DELIBERATE. The site's CSP is font-src 'self' data: and
   style-src 'self', so Google Fonts would be blocked; and loading them from Google would also send
   every German reader's IP address to Google on page load, which German courts have held to be a
   GDPR breach (LG Muenchen, January 2022). Both are SIL OFL 1.1 - licences beside the files in
   /assets/fonts. Latin subset, which carries the German umlauts and the eszett.

   SCOPED TO body.site. ui.css still loads first (the [hidden] rule, .wrap, the tokens) and these
   rules override it only on a page that opts in with <body class="site">. The portal is untouched. */

@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/manrope-latin-var.woff2) format('woff2-variations'),
      url(/assets/fonts/manrope-latin-var.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:200 1000;font-display:swap;
  src:url(/assets/fonts/nunito-sans-latin-var.woff2) format('woff2-variations'),
      url(/assets/fonts/nunito-sans-latin-var.woff2) format('woff2')}

body.site{
  /* PINK IS A SHADE DARKER THAN THE SITE'S, ON PURPOSE. The website's #D24698 under white text is
     4.14:1, and DESIGN_PRINCIPLES 7.1 asks 4.5:1 for text below 18.66px - the same reason ui.css
     sets --on-accent dark. #BE3887 is 5.12:1 with white; the kicker uses #B23380, 5.16:1 on the
     page wash. Side by side the difference is hard to see; the readability one is not. */
  --site-navy:#312A74; --site-pink:#BE3887; --site-pink-hover:#A82F76; --site-pink-text:#B23380; --site-lilac:#DFDBFE;
  --site-wash:#F4F2FF; --site-ink:#050505;
  --site-head:'Manrope','Segoe UI',system-ui,Arial,sans-serif;
  --site-body:'Nunito Sans','Segoe UI',system-ui,Arial,sans-serif;
  /* The page-level tokens ui.css components read, pointed at the website's values so the shared
     pieces (.wrap headings, links, the webinar banner) follow without restating each one. */
  --navy:var(--site-navy); --brand:var(--site-navy); --magenta:var(--site-pink);
  --t-base:14px; --t-md:16px; --t-sm:13px; --t-lg:19px;
  font-family:var(--site-body); background:var(--site-wash); color:#22203A;
  padding-bottom:0;
}
body.site h1, body.site h2, body.site h3{font-family:var(--site-head);letter-spacing:-.02em}

/* ---- header: white, the real logo, the website's menu ---------------------------------------- */
body.site header.site-top{background:#fff;color:var(--site-ink);position:sticky;top:0;z-index:30;
  box-shadow:0 1px 0 rgba(49,42,116,.10)}
body.site .site-r1{max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:28px}
body.site .site-logo{display:block;flex:none;line-height:0}
body.site .site-logo img{height:40px;width:auto;display:block}
body.site .site-nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;margin-left:auto;
  list-style:none;padding:0;margin-top:0;margin-bottom:0}
body.site .site-nav a{color:var(--site-ink);text-decoration:none;font-size:15px;white-space:nowrap;
  padding:4px 0;border-bottom:1px solid transparent}
/* .here, not aria-current: the underlined item is a page on another site, not the current page. */
body.site .site-nav a:hover, body.site .site-nav a.here{border-bottom-color:currentColor}
body.site .site-cta{flex:none;background:var(--site-navy);color:#fff;text-decoration:none;
  text-transform:uppercase;font-size:14px;letter-spacing:.02em;border-radius:999px;padding:14px 26px;white-space:nowrap}
body.site .site-cta:hover{background:#241E5C}
body.site header.site-top a:focus-visible{outline:3px solid var(--site-pink);outline-offset:3px;border-radius:4px}
/* The site itself folds its menu into a burger on a phone. A burger needs script and a second
   menu to keep in step; the reader on this page needs the logo (home) and Get in touch, so below
   1040px (where the six items stop fitting on one row) the menu goes and those two stay. */
body.site .site-nav{flex-wrap:nowrap}
@media (max-width:1040px){
  body.site .site-nav{display:none}
  body.site .site-cta{margin-left:auto}
}
@media (max-width:480px){
  body.site .site-r1{padding:12px 16px;gap:12px}
  body.site .site-logo img{height:30px}
  body.site .site-cta{padding:10px 16px;font-size:12px}
}
/* ui.css's two-colour strip, kept as the logo's own pink and cyan under the white header. */
body.site .bar{height:3px}

/* ---- footer: in the flow, not fixed; the website's legal links --------------------------------- */
body.site .footband{position:static;margin-top:64px;background:var(--site-navy);color:#fff;opacity:1;
  padding:22px 32px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;
  white-space:normal;overflow:visible}  /* ui.css clips the footband to one line; on a phone that cut the copyright mid-word */
body.site .footband a{color:#fff;text-decoration:none;opacity:.85}
body.site .footband a:hover{opacity:1;text-decoration:underline}
body.site .footband .site-legal{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px 20px}

/* ---- buttons: pills, as the site draws them --------------------------------------------------- */
body.site button[type=submit], body.site form button:not(.wx-more), body.site .card button,
body.site .webinar .wreg, body.site .webinar .wbox button{
  font-family:var(--site-body);text-transform:uppercase;letter-spacing:.03em;font-weight:600;
  border-radius:999px;background:var(--site-pink);color:#fff;padding:14px 30px;font-size:14px}
body.site button[type=submit]:hover:not(:disabled), body.site form button:not(.wx-more):hover:not(:disabled),
body.site .card button:hover:not(:disabled),
body.site .webinar .wreg:hover, body.site .webinar .wbox button:hover:not(:disabled){background:var(--site-pink-hover);filter:none}
body.site .webinar .wx-ed{text-transform:uppercase;font-size:14px;letter-spacing:.03em;font-weight:600;
  text-decoration:none;border:1px solid #fff;border-radius:999px;padding:13px 28px}
body.site .webinar .wx-ed:hover{background:rgba(255,255,255,.12);color:#fff}

/* ---- inputs, a touch softer, as Squarespace's forms are ---------------------------------------- */
body.site input[type=text], body.site input[type=email],
body.site .webinar .wbox input[type=text], body.site .webinar .wbox input[type=email]{border-radius:10px;
  font-family:var(--site-body);font-size:16px;padding:12px 14px}

/* ---- the hub (reports.html) ------------------------------------------------------------------- */
body.site .lede{margin:48px 0 40px;max-width:68ch}
body.site .lede h1{font-size:clamp(2rem,4.2vw,3.1rem);font-weight:500;line-height:1.08;margin:0 0 16px}
body.site .lede p{font-size:18px;line-height:1.6;color:#4A4566}
body.site .band > h2{font-family:var(--site-head);font-size:15px;letter-spacing:.06em}
body.site .webinar{border-radius:20px;border:0;box-shadow:0 10px 30px rgba(49,42,116,.12)}
body.site .webinar .wx-h{font-family:var(--site-head);font-weight:600;letter-spacing:-.02em}
body.site .wx-banner{background:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/16px 16px,
  linear-gradient(135deg,#3A2F8C 0%,var(--site-navy) 55%,#271F63 100%)}

/* ---- one edition (report-edition.html) -------------------------------------------------------- */
body.site .site-back{display:inline-block;margin:0 0 20px;color:var(--site-navy);text-decoration:none;
  font-size:14px;font-weight:600}
body.site .site-back:hover{text-decoration:underline}
/* The cover stands on a navy panel - the website's hero, in the space the page already has, so it
   needs nothing from the script that builds the page. */
body.site .wrap.ed{max-width:1080px;padding-top:48px}
body.site .cols{grid-template-columns:minmax(260px,380px) 1fr;gap:56px}
body.site .cols > div:first-child{background:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.5px) 0 0/16px 16px,
  linear-gradient(150deg,#3A2F8C 0%,var(--site-navy) 60%,#271F63 100%);
  border-radius:24px;padding:36px;box-shadow:0 14px 40px rgba(49,42,116,.18)}
body.site .cov{border:0;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.40);background:transparent}
/* The right column: the date line becomes the website's kicker and moves above the title. */
body.site .cols > div:last-child{display:flex;flex-direction:column;align-items:flex-start}
body.site .cols > div:last-child > *{align-self:stretch}
body.site .when{order:-1;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--site-pink-text);margin:0 0 14px}
body.site .cols h1{font-size:clamp(1.9rem,3.6vw,2.75rem);font-weight:500;line-height:1.1;margin:0 0 18px}
body.site .summary{font-size:18px;line-height:1.6;color:#2E2A4A}
body.site .partner{font-size:14px}
body.site .cols form, body.site .done{border:0;border-radius:20px;padding:32px;max-width:520px;
  box-shadow:0 10px 30px rgba(49,42,116,.10)}
body.site .cols form h2{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--site-navy)}
body.site .soon{font-family:var(--site-head);font-size:19px}
@media (max-width:720px){
  body.site .wrap.ed{padding-top:24px}
  body.site .cols{grid-template-columns:1fr;gap:28px}
  /* On a phone the cover is a picture, not the point: kept small so the form is in reach. */
  body.site .cols > div:first-child{padding:20px;border-radius:18px}
  body.site .cov, body.site .nocov{display:block;max-width:150px;margin:0 auto}
  body.site .nocov{display:flex}
  body.site .cols form, body.site .done{padding:22px}
}

/* ---- the email landing pages (unsubscribe.html, confirm.html) ---------------------------------- */
/* One card with a heading, a few lines and one button. Same card as the edition page's form; the
   green "done" state keeps its green heading and fill (the page's .done rules) and its green
   border (restored below, since the card itself has none), so success still reads as success. */
body.site .wrap.slim{max-width:680px;padding-top:48px}
body.site .card{border:0;border-radius:20px;padding:32px;margin:0;box-shadow:0 10px 30px rgba(49,42,116,.10)}
body.site .card.done{border:1px solid var(--ok)}
body.site .card .err{font-size:14px}
/* The disabled "Working..." state: the page's opacity .6 left white on pink at 2.6:1; .75 keeps it
   visibly paused and readable. */
body.site .card button:disabled, body.site form button:disabled{opacity:.75}
body.site .card h1{font-family:var(--site-head);font-weight:500;font-size:clamp(1.6rem,3vw,2.1rem);
  line-height:1.15;letter-spacing:-.02em;margin:0 0 16px}
body.site .card:not(.done) h1{color:var(--site-navy)}
body.site .card p{font-size:16px;line-height:1.6}
body.site .card .mut{font-size:14px}
body.site .card a{color:var(--site-navy)}
@media (max-width:720px){
  body.site .wrap.slim{padding-top:24px}
  body.site .card{padding:22px}
}