/* Shared chrome for the finding pages. A page sets --accent and --accent-soft;
   everything colour-bearing here reads from those, so a new finding needs one line. */
body { font-family: "Noto Sans", system-ui, sans-serif; color: var(--ink); margin: 0; }
  a { color: inherit; }
  code, .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

  .top { display: flex; align-items: center; gap: 16px; padding: 18px 3.4vw; font-size: .86rem; }
  .top a.back { text-decoration: none; color: var(--ink-2); }
  .top a.back:hover { color: var(--ink); }
  .top .mark { font-family: "Noto Serif", Georgia, serif; font-weight: 700; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 3.4vw 90px; }
  .sheet {
    background: rgba(255,255,255,.95); border: 1px solid rgba(63,96,124,.16);
    border-radius: 22px; box-shadow: var(--soft); padding: 46px 54px 42px; margin-top: 12px;
  }

  .eyebrow { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
  .pill {
    font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    padding: 4px 11px; border-radius: 999px; color: #fff; background: var(--accent, var(--ochre));
  }
  .pill.soft { color: var(--ink-2); background: rgba(63,96,124,.09); font-weight: 500; }
  h1 {
    font-family: "Noto Serif", Georgia, serif; font-size: clamp(1.9rem, 4vw, 3.15rem);
    line-height: 1.16; letter-spacing: -.022em; margin: 16px 0 0; font-weight: 700;
  }
  .stand {
    font-family: "Caveat", cursive; font-size: clamp(1.25rem, 2.3vw, 1.75rem);
    color: var(--ink-2); margin: 12px 0 0; max-width: 62ch;
  }

  /* the headline pair */
  .bignum {
    display: flex; align-items: center; gap: clamp(18px, 3vw, 46px); flex-wrap: wrap;
    margin: 30px 0 0; padding: 26px 30px; border-radius: 18px;
    background: var(--accent-soft, rgba(239,71,111,.08));
    border: 1px solid color-mix(in srgb, var(--accent, var(--clay)) 26%, transparent);
  }
  .bignum .n {
    font-family: "Noto Serif", Georgia, serif; font-weight: 700; line-height: 1;
    font-size: clamp(2.5rem, 6vw, 4.4rem); letter-spacing: -.03em;
  }
  .bignum .n small { display: block; font-family: "Noto Sans", sans-serif; font-size: .21em;
                     font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
                     color: var(--dim); margin-top: 10px; line-height: 1.5; }
  .bignum .arrow { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--dim); }
  .bignum .good { color: #14713f; } .bignum .bad { color: var(--accent, var(--clay)); }
  .bignum .say { flex: 1 1 260px; font-size: .93rem; line-height: 1.72; color: var(--ink-2); min-width: 240px; }

  h2 {
    font-family: "Noto Serif", Georgia, serif; font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    margin: 52px 0 0; letter-spacing: -.015em; display: flex; align-items: baseline; gap: 12px;
  }
  h2 .step {
    font-size: .62em; font-family: "Noto Sans", sans-serif; font-weight: 700; color: #fff;
    background: var(--ink); width: 1.9em; height: 1.9em; border-radius: 50%;
    display: inline-grid; place-items: center; flex: 0 0 auto; letter-spacing: 0;
  }
  p { font-size: .97rem; line-height: 1.8; color: var(--ink-2); margin: 14px 0 0; max-width: 78ch; }
  p b, li b { color: var(--ink); font-weight: 600; }
  .num { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); }

  figure { margin: 24px 0 0; }
  figure img { width: 100%; height: auto; display: block; border-radius: 12px;
               border: 1px solid rgba(63,96,124,.16); background: #fff; }
  figcaption { font-size: .8rem; line-height: 1.66; color: var(--dim); margin-top: 10px; font-style: italic; }
  .two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }

  table { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 20px; }
  th, td { padding: 10px 14px; text-align: left; border-bottom: 1px solid rgba(63,96,124,.14); }
  thead th { font-size: .63rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); }
  td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
  tbody tr:last-child td { border-bottom: 0; }
  tr.hi td { background: color-mix(in srgb, var(--accent, var(--clay)) 8%, transparent); }
  table.cohorts { font-size: .82rem; }
  table.cohorts td, table.cohorts th { padding: 8px 10px; }
  table.cohorts td:first-child { font-family: ui-monospace, Menlo, monospace; font-size: .92em; }
  td.mk { color: var(--accent, var(--clay)); font-weight: 700; }        /* the values that give a site away */
  table.cohorts tr.hi td:last-child { color: var(--accent, var(--clay)); font-weight: 700; }
  tr.hi td.n { color: var(--accent, var(--clay)); font-weight: 700; }
  tr.ok td.n { color: #14713f; font-weight: 700; }

  .caveat {
    margin-top: 44px; padding: 22px 26px; border-radius: 16px;
    background: rgba(63,96,124,.05); border: 1px solid rgba(63,96,124,.18);
    border-left: 5px solid var(--dim);
  }
  .caveat h3 { font-family: "Noto Serif", Georgia, serif; font-size: 1.05rem; margin: 0; }
  .caveat p { font-size: .9rem; margin-top: 10px; }

  .prov { margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(63,96,124,.16);
          display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; }
  .prov div { font-size: .84rem; line-height: 1.6; color: var(--ink-2); }
  .prov dt { font-size: .6rem; letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
             margin-bottom: 5px; }
  .cta2 { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .cta2 a {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    padding: 12px 24px; border-radius: 999px; font-size: .9rem; font-weight: 600;
    background: var(--accent, var(--ochre)); color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--accent, var(--ochre)) 34%, transparent);
    transition: transform .16s;
  }
  .cta2 a.ghost { background: #fff; color: var(--ink); border: 1.5px solid rgba(63,96,124,.24);
                  box-shadow: none; }
  .cta2 a:hover { transform: translateY(-2px); }

  @media (max-width: 860px) {
    .sheet { padding: 30px 22px 30px; border-radius: 16px; }
    .two { grid-template-columns: 1fr; }
  }

/* redrawn charts sit where the figure images used to */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; }
figure:has(.chart) { border: 1px solid rgba(63,96,124,.14); border-radius: 12px;
                     padding: 14px 16px 6px; background: #fff; }
figure:has(.chart) figcaption { padding: 0 2px 10px; margin-top: 4px; }
.two2 { display: grid; grid-template-columns: 1fr; gap: 22px; }