/* ============================================================
   The demo report, in the site's light theme.
   Marcus 2026-09-25: "it should be a light theme similar to the website for
   continuity... it has to seem like it's possibly embedded in the same site
   and there needs to be a call to action at the bottom for people to get
   their own and get started for free. This one goes to the paid plan which
   is not the goal of our homepage."
   So: our nav and footer, our type, our blue, and the closing CTA is the free
   diagnosis rather than OTIS Plus. Grade colours are re-picked for a light
   surface; the product's own greens and reds fail AA on white.
   ============================================================ */
:root{
  --g-good:#0E7338;   /* 5.6:1 on white */
  --g-mid:#B45309;    /* 4.9:1 on white */
  --g-bad:#B91C1C;    /* 6.2:1 on white */
  --r-line:rgba(0,5,61,.10);
}
.rep{padding:56px 0 0}
.rep-shell{width:100%;max-width:1000px;margin:0 auto;padding:0 24px}
.rep-meta{font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--blue);margin-bottom:14px}
.rep-hook{font-family:var(--ff-display);font-size:clamp(28px,4vw,42px);line-height:1.14;margin:0 0 8px}
.rep-sub{color:var(--grey);font-size:17px;margin-bottom:34px}

.rep-card{border:1px solid var(--r-line);border-radius:var(--r-lg);background:#fff;
  box-shadow:0 2px 16px rgba(0,5,61,.05);padding:26px;margin-bottom:22px}
.rep-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--blue);margin-bottom:12px}
.rep-h{font-family:var(--ff-display);font-size:23px;margin:0 0 6px}
.rep-note{color:var(--grey);font-size:14.5px;line-height:1.6;margin-bottom:18px}

/* the leak */
.rep-leak{display:grid;grid-template-columns:1fr 168px;gap:26px;align-items:start;
  background:var(--tint-soft);border:1px solid var(--steel);border-left:4px solid var(--g-bad)}
.rep-leak>*{min-width:0}
.rep-leakname{font-family:var(--ff-display);font-size:30px;margin:2px 0 10px}
.rep-leak p{font-size:14.5px;line-height:1.65;color:#31384F;margin-bottom:9px}
.rep-leak .lyn{color:var(--g-good);font-weight:600}
.rep-badge{width:78px;height:78px;border-radius:16px;background:var(--g-bad);color:#fff;
  display:grid;place-items:center;font-size:36px;font-weight:700;margin:0 auto 8px}
.rep-gwrap{text-align:center}
.rep-glabel{font-size:9.5px;letter-spacing:.12em;color:var(--grey);font-weight:700}
.rep-pnl{font-size:26px;font-weight:700;color:var(--g-bad);margin-top:14px;line-height:1}

/* four scores */
.rep-scores{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.rep-scores>*{min-width:0}
.rep-score{border:1px solid var(--r-line);border-radius:var(--r-md);padding:16px;background:#fff}
.rep-score .k{font-size:10px;letter-spacing:.11em;font-weight:700;color:var(--grey);margin-bottom:7px}
.rep-score .v{font-size:30px;font-weight:700;line-height:1;color:var(--g-mid)}
.rep-score .v small{font-size:13px;font-weight:600;color:var(--grey)}
.rep-score.wr .v,.rep-score.pf .v{color:var(--blue)}
.rep-score .n{font-size:11.5px;color:var(--grey);margin-top:7px}

/* bars */
.rep-row{margin-bottom:14px}
.rep-rowtop{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;margin-bottom:5px}
.rep-rowtop b{font-weight:700}
.rep-rowtop .sub{font-size:11.5px;color:var(--grey);margin-left:8px;font-weight:400}
.rep-track{height:8px;border-radius:999px;background:#EDF1F8;overflow:hidden}
.rep-track i{display:block;height:100%;border-radius:999px}
.up{color:var(--g-good)} .dn{color:var(--g-bad)}

/* two columns of ticks */
.rep-split2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.rep-split2>*{min-width:0}
.rep-list{list-style:none;padding:0;margin:0}
.rep-list li{display:flex;gap:10px;font-size:14.5px;line-height:1.55;padding:9px 0;
  border-top:1px solid var(--r-line)}
.rep-list li:first-child{border-top:0}
.rep-list .rep-mk{flex-shrink:0;width:22px;height:22px;padding:0;border:0;border-radius:999px;display:grid;
  place-items:center;font-size:12px;font-weight:700;color:#fff;margin-top:1px;line-height:1}
.rep-list .ok .rep-mk{background:var(--g-good)}
.rep-list .no .rep-mk{background:var(--g-bad)}

/* tables */
.rep-tbl{width:100%;border-collapse:collapse;font-size:14px}
.rep-tbl th{text-align:left;font-size:10px;letter-spacing:.1em;color:var(--grey);
  font-weight:700;padding:0 10px 9px 0;border-bottom:1px solid var(--r-line)}
.rep-tbl td{padding:11px 10px 11px 0;border-bottom:1px solid var(--r-line)}
.rep-tbl tr:last-child td{border-bottom:0}
.rep-tbl .num{text-align:right;font-weight:700;white-space:nowrap}

/* grade card */
.rep-gradehead{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:2px solid var(--navy);margin-bottom:4px}
.rep-gradehead b{font-size:12px;letter-spacing:.12em}
.rep-gradehead .s{font-size:22px;font-weight:700;color:var(--g-mid)}
.rep-ax{display:grid;grid-template-columns:1fr 46px;gap:16px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--r-line)}
.rep-ax>*{min-width:0}
.rep-ax .nm{font-weight:600;font-size:14.5px}
.rep-ax .q{font-size:12.5px;color:var(--grey);margin-top:2px}
.rep-ax .gr{text-align:right;font-size:20px;font-weight:700}
.gr-a{color:var(--g-good)} .gr-b{color:var(--g-good)} .gr-c{color:var(--g-mid)}
.gr-d{color:var(--g-mid)} .gr-f{color:var(--g-bad)}
.rep-focus{display:inline-block;font-size:8.5px;letter-spacing:.1em;font-weight:700;
  background:var(--g-bad);color:#fff;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:2px}

/* counterfactual */
.rep-cf{display:grid;grid-template-columns:1fr 210px;gap:26px;align-items:center}
.rep-cf>*{min-width:0}
.rep-cfnum{border:1px solid var(--r-line);border-radius:var(--r-md);padding:14px;margin-bottom:10px}
.rep-cfnum .k{font-size:10px;letter-spacing:.1em;color:var(--grey);font-weight:700}
.rep-cfnum .v{font-size:24px;font-weight:700;line-height:1.2}

.rep-disc{font-size:11.5px;line-height:1.65;color:var(--grey);max-width:92ch;margin:0 auto;
  padding:26px 0 8px;border-top:1px solid var(--r-line)}

@media (max-width:860px){
  .rep-leak,.rep-cf,.rep-split2{grid-template-columns:1fr}
  .rep-scores{grid-template-columns:1fr 1fr}
  .rep-gwrap{display:flex;align-items:center;gap:18px;text-align:left}
  .rep-badge{margin:0}
  .rep-pnl{margin-top:0}
}
@media (max-width:560px){
  .rep-card{padding:20px}
  .rep-tbl .hide-s{display:none}
}

.rep-tbl .q2{font-size:12px;color:var(--grey);margin-top:2px}

/* ---------- colour ----------
   Marcus 2026-09-25: "the theme can be light but the sections can have some
   colour. It looks really plain Jane." Cards now carry the meaning of their
   content: the wins panel reads green, the costs panel and the leak table read
   red, the receipts read green, and the page alternates white against a soft
   tint so the stack has rhythm instead of being twelve identical white boxes. */
.rep{background:linear-gradient(180deg,#fff 0%,var(--tint-soft) 22%,var(--tint-soft) 100%)}
.rep-card{position:relative}
.rep-card::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  border-radius:var(--r-lg) var(--r-lg) 0 0;background:var(--blue)}
.rep-card.k-good::before{background:var(--g-good)}
.rep-card.k-bad::before{background:var(--g-bad)}
.rep-card.k-mid::before{background:var(--g-mid)}
.rep-leak::before{display:none}

.rep-pane{border-radius:var(--r-md);padding:18px 20px}
.rep-pane.good{background:#EAF6EE;border:1px solid #BFE3CD}
.rep-pane.bad{background:#FDECEC;border:1px solid #F5CACA}
.rep-pane .rep-eyebrow{color:var(--g-good)}
.rep-pane.bad .rep-eyebrow{color:var(--g-bad)}
.rep-pane .rep-list li{border-top-color:rgba(0,5,61,.09)}

.rep-score{background:linear-gradient(180deg,#fff,#FAFCFF)}
.rep-score.edge{border-color:#EBD4B4} .rep-score.psy{border-color:#EBD4B4}
.rep-score.wr,.rep-score.pf{border-color:var(--steel)}

.rep-tbl tbody tr:hover{background:#FAFCFF}
.rep-card.k-bad .rep-tbl .num{color:var(--g-bad)}

/* ---------- the equity chart ----------
   The counterfactual was two number tiles and no curve, which is the one
   picture the whole page builds to. Shape is the same two series the homepage
   plots, drawn larger with fills, a break-even rule and end labels. */
.rep-chart{position:relative;border:1px solid var(--r-line);border-radius:var(--r-md);
  background:#fff;padding:18px 18px 12px;margin-bottom:18px}
.rep-chart svg{display:block;width:100%;height:auto}
.rep-legend{display:flex;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--grey);margin-top:10px}
.rep-legend span{display:inline-flex;align-items:center;gap:7px}
.rep-legend i{width:16px;height:3px;border-radius:2px;display:block}
.rep-gap{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;
  background:#FDECEC;border:1px solid #F5CACA;border-radius:var(--r-md);
  padding:16px 20px;margin-bottom:16px;text-align:center}
.rep-gap b{font-size:30px;font-weight:700;color:var(--g-bad);line-height:1}
.rep-gap span{font-size:14px;color:#6B2222}
.rep-cfnums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rep-cfnums>*{min-width:0}
@media (max-width:560px){ .rep-cfnums{grid-template-columns:1fr} }