/* The two @font-face tails that used to sit above this line were debris
   from extracting the designed page into a stylesheet: their opening
   @font-face{...url(data:font/woff2;base64, halves were dropped and the
   closing halves left behind. A stray }) at the top of a stylesheet is
   not ignored. The parser treats everything up to the next { as one
   selector, so the first real rule in the file was being swallowed with
   it. Both EBG faces are declared properly in elixir.css. */

/* The token block that used to sit here was a second copy of the one in
   elixir.css. This file loads after it, so the copy was putting --slate and
   --wrap back to their old values on every page that loads this stylesheet.
   Tokens live in elixir.css only. */
/* ================= print: branded, A4, no browser fallbacks ================= */
.printonly{display:none}
@media print{
  /* margin:0 is what suppresses Chrome's own date, title and URL furniture,
     which renders in Arial and cannot be styled. Page margins move to the body. */
  @page{size:A4;margin:0}
  body{padding:14mm 15mm 16mm!important}

  html,body{background:#fff!important}
  *,*::before,*::after{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important;
    font-family:'EBG',Garamond,Georgia,serif!important;
  }
  body{font-size:10.5pt;line-height:1.5;color:#121618}
  #result *,#letterhead *,#printclose *{min-width:0;overflow-wrap:break-word;hyphens:auto;max-width:100%}
  #result,#letterhead,#printclose{overflow:hidden}

  /* screen chrome and anything not part of the report */
  .head,.subnav,#spine,.foot,.noprint,#intro,#quiz,.btn,button,
  #print,#again,.callout.warn{display:none!important}

  .printonly{display:block}
  .wrap,.wrap.railed{max-width:none!important;padding:0!important;margin:0!important}
  section{padding:0!important}

  /* letterhead */
  #letterhead{margin:0 0 9mm}
  .lh-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10mm;
    border-bottom:1.4pt solid #121618;padding-bottom:4mm}
  .lh-top img{height:13mm;width:auto}
  .lh-firm{text-align:right;font-size:8pt;line-height:1.45;color:#4B5457}
  .lh-firm b{display:block;font-size:9pt;color:#121618;margin-bottom:1mm}
  .lh-title{margin:6mm 0 5mm}
  .lh-kicker{font-size:7.5pt;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    color:#0A6B30;margin:0 0 2mm}
  .lh-h1{margin:0;font-size:22pt;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0}
  .lh-meta{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:0;
    border-top:.5pt solid #DCE4DE;border-bottom:.5pt solid #DCE4DE;margin:0;align-items:stretch}
  .lh-meta div{padding:3.5mm 3mm;border-right:.5pt solid #DCE4DE;
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .lh-meta div:last-child{border-right:0}
  .lh-meta dt{font-size:6.8pt;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:#8D8D8D;margin:0 0 1.5mm;text-align:center}
  .lh-meta dd{margin:0;font-size:8.8pt;font-weight:600;line-height:1.3;text-align:center;
    overflow-wrap:break-word;max-width:100%}

  /* result body */
  #result{display:block!important}
  #result .display{font-size:26pt!important;margin-bottom:2mm!important}
  #result .lead{font-size:11pt!important;color:#3B4448!important}
  #result .eyebrow{font-size:7.5pt!important;letter-spacing:.18em}
  .meta{font-size:7.5pt!important}

  .flagbox{border:.6pt solid #E7DFC9!important;background:#FBF6E9!important;padding:5mm!important;
    margin-bottom:7mm!important;break-inside:auto}
  .flaghead{font-size:12.5pt!important}
  .flagintro{font-size:9.5pt!important}
  .flag{break-inside:avoid;padding-top:3.5mm!important;margin-bottom:3.5mm!important}
  .fs{font-size:9.8pt!important}
  .fw{font-size:9.3pt!important}

  /* A4 renders around 794px wide, which trips the screen breakpoints below 820px.
     Everything the responsive rules change has to be reset explicitly here. */
  .rrow2{display:grid!important;padding:2.4mm 0!important;break-inside:avoid;
    grid-template-columns:44mm minmax(0,1fr) 13mm 26mm!important;
    gap:3mm!important;align-items:center!important}
  .rrow2 b{grid-column:auto!important;margin-bottom:0!important;font-size:9.5pt!important;
    overflow-wrap:break-word;line-height:1.25}
  .rrow2 .rtrack{grid-column:auto!important;order:0!important}
  .rscore{font-size:10pt!important;text-align:right!important;padding-right:1mm}
  .rlvl{justify-content:flex-end!important;text-align:right!important;white-space:nowrap!important}
  .rrow2 b{font-size:9.5pt!important;overflow-wrap:break-word}
  .rtrack{height:4.6mm!important;background:#F3F6F4!important;overflow:hidden}
  .rtrack i{background:#0A6B30!important}
  .rtrack i.good{background:#10AE4D!important}
  .rtrack i.ok{background:#0A6B30!important}
  .rtrack i.low{background:#C9A227!important}
  .rtrack i.bad{background:#C0392B!important}
  .rlvl{font-size:7pt!important;gap:2mm!important;white-space:normal!important;
    justify-content:flex-end!important;text-align:right}
  .rlvl .dot{width:2.4mm!important;height:2.4mm!important}
  .flag.red,.flag.amber{padding-left:3.5mm!important}
  .fa em{font-size:6pt!important;padding:0.6mm 1.6mm!important}

  .pri{break-inside:avoid;background:#EAF3EC!important;border-left:1.6pt solid #10AE4D!important;
    padding:4mm 5mm!important;margin-bottom:3.5mm!important}
  .pri b{font-size:10.5pt!important}
  .pri p{font-size:9.6pt!important}
  .pri .based{font-size:8.8pt!important}
  .pri .route a{font-size:7.6pt!important;border:0!important}

  /* the on-screen dark CTA is replaced by the print closing block */
  #result > div:last-child{display:none!important}

  .emailbox,.resultbtns{display:none!important}
  .scorehead{display:flex!important;justify-content:space-between!important;align-items:center!important}
  .bigscore b{font-size:30pt!important}
  .bigscore span{font-size:7pt!important}

  #printclose{break-inside:avoid;margin-top:8mm;border-top:1.4pt solid #121618;padding-top:5mm}
  #printclose h2{font-size:12.5pt;font-weight:700;margin:0 0 3mm}
  #printclose p{font-size:9.4pt;line-height:1.55;color:#3B4448;margin:0 0 3mm;max-width:none}
  .pc-firm{margin-top:5mm;padding-top:3.5mm;border-top:.5pt solid #DCE4DE;
    font-size:8pt;line-height:1.5;color:#4B5457}
  .pc-firm b{display:block;font-size:9pt;color:#121618;margin-bottom:1mm}
}
/* containment: no element may render text outside its own box */
#result *,#quiz *{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:auto}
/* The button element does not inherit font or background from the page. Both must be forced,
   or the browser substitutes its UI font and a grey system button face. */
button,.btn,input,select,textarea{font-family:inherit!important}
button.btn{font:inherit;font-size:.9rem;font-weight:600;letter-spacing:.03em;background:transparent;cursor:pointer}
button.btn-solid{background:var(--green);color:#fff;border:1px solid var(--green)}
button.btn-solid:hover{background:var(--green-deep);border-color:var(--green-deep)}
button.btn-line{background:transparent;border:1px solid var(--ink);color:var(--ink)}
button.btn-line:hover{background:var(--ground-dark);color:#fff}
/* The outlined buttons sit on mist now, so they take the page's own
   treatment. Both selectors are kept in case the dark variant returns. */
.hcdark button.btn-line{border-color:#5C6A66;color:#fff}
.hcdark button.btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.hclight button.btn-line{border-color:var(--ink);color:var(--ink)}
.hclight button.btn-line:hover{background:var(--ground-dark);color:#fff;border-color:var(--ground-dark)}
.hcbar{height:3px;background:var(--rule)}
.hcbar i{display:block;height:100%;background:var(--green);width:0;transition:width .3s ease}
.opt{display:block;width:100%;text-align:left;background:#fff;border:1px solid var(--rule);
  padding:18px 22px;margin-bottom:12px;font:inherit;font-size:1.06rem;cursor:pointer;transition:.16s;line-height:1.4}
.opt:hover{border-color:var(--green);background:var(--tint)}
.opt.sel{border-color:var(--green);background:var(--tint);font-weight:600}
.rrow2{display:grid;grid-template-columns:minmax(0,14em) minmax(0,1fr) 3.2em minmax(6.5em,auto);
  gap:clamp(10px,1.6vw,22px);align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.rrow2 b{font-size:1.04rem;font-weight:700;letter-spacing:-.012em}
.rtrack{background:var(--mist);height:22px;position:relative}
.rtrack i{display:block;height:100%;background:var(--green-deep)}
.rtrack i.good{background:var(--green)}
.rtrack i.ok{background:var(--green-deep)}
.rtrack i.low{background:#C9A227}
.rtrack i.bad{background:#C0392B}
.rlvl{display:flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--slate);overflow-wrap:break-word;min-width:0}
.rlvl .dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--slate)}
.rlvl.red{color:#C0392B}
.rlvl.red .dot{background:#C0392B}
.rlvl.amber{color:#8A6A18}
.rlvl.amber .dot{background:#C9A227}
.rlvl.green{color:var(--green-deep)}
.rlvl.green .dot{background:var(--green-deep)}
@media (max-width:820px){.rrow2{grid-template-columns:minmax(0,1fr) 3.2em minmax(6.5em,auto)}
  .rrow2 b{grid-column:1/-1;margin-bottom:2px}}
@media (max-width:520px){.rrow2{grid-template-columns:1fr auto;gap:6px}
  .rrow2 .rtrack{grid-column:1/-1;order:3}.rlvl{justify-content:flex-end}}
.pri{border-left:3px solid var(--green);background:var(--tint);padding:20px 24px;margin-bottom:14px}
.pri b{display:block;font-size:1.06rem;font-weight:700;margin-bottom:6px}
.flag{border-left:3px solid #B4553A;background:#FBF1EE;padding:20px 24px;margin-bottom:12px}
.flag b{display:block;font-size:1.06rem;font-weight:700;color:#7A3120;margin-bottom:7px}
.flag p{font-size:1rem;color:#4A2C22;line-height:1.55;margin:0}
.flag a{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#7A3120;border-bottom:1px solid rgba(122,49,32,.35)}
.flag a:hover{color:#B4553A}
.kb{font-size:.78rem;color:var(--slate);margin-top:20px}
.kb kbd{font-family:inherit;font-size:.76rem;border:1px solid var(--rule);background:var(--mist);
  padding:2px 7px;margin:0 2px;font-weight:600}
.pri p{font-size:1rem;color:#25382C;line-height:1.55;margin:0}
.pri .based{font-size:.9rem;color:#4B5457;font-style:italic;margin-top:10px}
.pri .route{margin-top:12px}
.scorehead{display:flex;flex-wrap:wrap;gap:20px 34px;align-items:center;justify-content:space-between}
.bigscore{display:flex;align-items:baseline;gap:10px}
.bigscore b{font-size:clamp(2.6rem,5vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1}
.bigscore span{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.bigscore.red b{color:#C0392B}
.bigscore.amber b{color:#8A6A18}
.bigscore.green b{color:var(--green-deep)}
.rscore{font-size:1.02rem;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
.rscore.red{color:#C0392B}
.rscore.amber{color:#8A6A18}
.rscore.green{color:var(--green-deep)}
/* This block used to be near black, so everything in it was written pale.
   It is mist now, like the closing banners elsewhere, and each of these has
   to come back down to a colour that reads on a light ground. Pale grey on
   mist would have been the worse of the two mistakes. */
.emailbox{border-top:1px solid var(--rule);margin-top:30px;padding-top:26px}
.emailbox label{color:var(--slate);margin-bottom:10px}
.emailrow{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;max-width:34em}
.emailrow input{flex:1 1 16em;min-width:0;margin:0;background:var(--paper);border-color:var(--rule);color:var(--ink)}
.emailrow input::placeholder{color:var(--slate)}
.emailrow .btn{white-space:nowrap}
.emailnote{font-size:.88rem;color:#4B5457;line-height:1.5;margin:12px 0 0;max-width:38em}
.emailok{font-size:.9rem;margin:12px 0 0;line-height:1.5;max-width:38em}
.emailok.good{color:var(--green-deep)}
.emailok.bad{color:var(--alert)}
.resultbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pri .route a{font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);border-bottom:1px solid rgba(16,174,77,.4)}
.flagbox{border:1px solid #E7DFC9;background:#FBF6E9;padding:clamp(22px,3vw,32px);margin-bottom:38px}
.flaghead{font-size:1.24rem;font-weight:700;letter-spacing:-.016em;color:#6B5518;margin:0 0 8px}
.flagintro{font-size:1rem;color:#5C4A18;line-height:1.55;margin:0 0 22px;max-width:44em}
.flag{border-top:1px solid #EADFC0;padding:18px 0 0;margin-bottom:18px}
.flag:last-child{margin-bottom:0}
.fa{display:flex;align-items:center;gap:9px;font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;
  font-weight:700;color:#8A6A18;flex-wrap:wrap}
.fa .dot{width:10px;height:10px;border-radius:50%;flex:none;background:#C9A227}
.fa em{font-style:normal;font-size:.62rem;font-weight:700;letter-spacing:.14em;padding:3px 8px;
  background:#F0E2B6;color:#6B5518;border-radius:2px}
.flag.red .fa{color:#8E2A1E}
.flag.red .fa .dot{background:#C0392B}
.flag.red .fa em{background:#F3D9D4;color:#8E2A1E}
.flag.red{border-left:3px solid #C0392B;padding-left:16px}
.flag.amber{border-left:3px solid #C9A227;padding-left:16px}
.fs{font-size:1.02rem;font-weight:700;color:#4A3A16;margin:8px 0 6px;line-height:1.4}
.fw{font-size:.99rem;color:#5C4A18;line-height:1.6;margin:0;max-width:46em}