/* ===========================================================================
   For business, the AI playbook, and about us.

   Built on the theme in home.css: the shell, the palette, the two faces,
   the buttons and the cards all come from there. What is here is only what
   these three pages add.
   ========================================================================= */

/* A message after a form, at the top where it will be seen. */
.pg-flash{max-width:var(--shell);margin:16px auto 0;padding:14px 20px;border-radius:16px;
  font-size:14.5px;font-weight:600}
.pg-flash.ok{background:#E3F6EE;color:#136F4F;border:1px solid #BFE8D8}
.pg-flash.bad{background:#FDECEC;color:#B3272D;border:1px solid #F5C9C9}

.bz-sec .hm-wrap{padding:96px 28px}

/* ------------------------------------------------------------------ hero -- */
.bz-hero{overflow:hidden}
.bz-hero > .hm-wrap{position:relative;padding:76px 28px 84px;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:52px;align-items:center}
.bz-glow{position:absolute;right:-140px;top:-90px;width:640px;height:540px;border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse,rgba(114,202,234,.32),rgba(114,202,234,0) 68%)}
.bz-left{position:relative;min-width:0}

.bz-aud{display:inline-flex;gap:4px;padding:5px;background:#fff;border:1px solid var(--line-2);
  border-radius:99px;margin-bottom:22px}
.bz-aud button{border:none;background:none;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--ink-2);padding:10px 18px;border-radius:99px;cursor:pointer;
  transition:background .2s,color .2s;white-space:nowrap}
.bz-aud button:hover{color:var(--ink)}
.bz-aud button.on{background:var(--ink);color:#fff}

.bz-hero h1{font-size:clamp(38px,4.9vw,64px);line-height:1.04;text-wrap:balance}
.hm p.bz-lede{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:540px;
  margin-top:20px;text-wrap:pretty}
.bz-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.bz-ticks{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:13.5px;
  font-weight:500;color:var(--muted)}

/* the console a client is given ------------------------------------------- */
.bz-dash{position:relative;min-width:0}
.bz-dash-card{background:#fff;border:1px solid var(--line-2);border-radius:26px;padding:20px;
  box-shadow:0 40px 80px -40px rgba(13,8,77,.35)}
.bz-dash-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.bz-dash-top .who{display:flex;align-items:center;gap:11px;min-width:0}
.bz-dash-top .av{width:38px;height:38px;flex:none;border-radius:12px;background:var(--ink);
  color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.bz-dash-top b{display:block;font-size:15px;font-weight:700}
.bz-dash-top em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
.bz-dash-top .live{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.06em;color:var(--red);background:#FDECEC;padding:5px 10px;border-radius:99px}
.bz-dash-top .live i{width:6px;height:6px;border-radius:50%;background:var(--red);
  animation:hmGlow 1.6s infinite}
.bz-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}
.bz-kpis div{padding:14px 12px;border-radius:14px;background:var(--bg);text-align:center}
.bz-kpis b{display:block;font-family:var(--serif);font-size:26px;line-height:1;
  letter-spacing:-.03em}
.bz-kpis span{display:block;font-size:11.5px;color:var(--muted);margin-top:6px}
.bz-rows-l{font-size:11px;font-weight:800;letter-spacing:.07em;color:var(--faint);
  margin:20px 0 10px}
.bz-rows>div{display:flex;align-items:center;gap:12px;padding:9px 0}
.bz-rows .ic{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid #E6EAF1;
  background-size:16px;background-repeat:no-repeat;background-position:center}
.bz-rows .t{flex:1;min-width:0}
.bz-rows .hd{display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.bz-rows .tr{height:5px;border-radius:99px;background:#EEF0F5;margin-top:6px;overflow:hidden}
.bz-rows .tr i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--sky),var(--blue))}
.bz-toast{position:absolute;left:-18px;bottom:-22px;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line-2);border-radius:18px;padding:13px 18px 13px 13px;
  box-shadow:0 20px 44px -22px rgba(13,8,77,.4)}
.bz-toast .tick{width:32px;height:32px;flex:none;border-radius:50%;background:#E3F6EE;
  color:var(--green);font-weight:800;display:flex;align-items:center;justify-content:center}
.bz-toast b{display:block;font-size:14px;font-weight:700}
.bz-toast em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}

/* -------------------------------------------------------- the two cards -- */
.bz-two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.bz-card{background:#fff;border:1px solid var(--line-2);border-radius:28px;overflow:hidden;
  display:flex;flex-direction:column}
.bz-card-top{position:relative;height:150px;display:flex;align-items:center;justify-content:center;
  gap:12px}
.bz-card-icons{position:relative;display:flex;gap:10px}
.bz-card-icons span{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.85);
  border:1px solid #fff;box-shadow:0 4px 0 rgba(13,8,77,.06),0 14px 26px -12px rgba(13,8,77,.3);
  display:flex;align-items:center;justify-content:center}
.bz-card-icons i{width:28px;height:28px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.bz-card-tag{position:absolute;left:16px;top:16px;font-size:12px;font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.9);padding:6px 12px;border-radius:99px}
.bz-card-b{padding:26px 26px 30px}
.bz-card-b h3{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.015em}
.bz-card-b p{font-size:15px;line-height:1.6;color:var(--ink-2);margin-top:10px;text-wrap:pretty}
.bz-pts{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.bz-pts div{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.bz-pts span{width:20px;height:20px;flex:none;border-radius:50%;background:#E3F6EE;
  color:var(--green);font-size:11px;font-weight:800;display:flex;align-items:center;
  justify-content:center;margin-top:2px}
.bz-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line-3)}
.bz-chips span{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-3);padding:6px 11px;border-radius:99px}

/* --------------------------------------------------------------- tools -- */
/* A heading that holds the left of the column with the line that qualifies
   it set beside it, baseline-aligned. The same arrangement as the dark
   band, and what their file uses wherever a section has both. */
.bz-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap}
.bz-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:14px;
  max-width:560px;text-wrap:balance}
.bz-head p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:380px}

/* The skill map: the claim on the left, the skills as tiles on the right. */
.bz-map .hm-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:56px;align-items:center}
.bz-map-l h2{font-size:clamp(28px,3.1vw,40px);line-height:1.1;margin-top:14px;
  text-wrap:balance}
.bz-map-l p{font-size:15.5px;line-height:1.65;color:var(--ink-2);margin-top:18px;
  max-width:380px}
.bz-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* A square with the mark over a centred label. A wide pill with the mark
   beside the label reads as a list of features; this reads as a map. */
.bz-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;aspect-ratio:1;padding:16px 12px;background:#fff;
  border:1px solid var(--line-2);border-radius:18px;text-align:center;
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.bz-tool:hover{transform:translateY(-3px);box-shadow:0 20px 40px -26px rgba(13,8,77,.3)}
.bz-tool .ic{width:34px;height:34px;flex:none;display:flex;align-items:center;
  justify-content:center}
.bz-tool .ic i{width:30px;height:30px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.bz-tool .t{font-size:13.5px;font-weight:600;line-height:1.3;color:var(--ink)}

/* What the chosen programme includes, under the picks. Without it the
   panel ended a third of the way up the column beside it. */
.bz-plan-card .incl{margin-top:20px}
.bz-plan-card .incl .lbl{display:block;font-size:11.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--sky)}
.bz-plan-card .incl ul{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:9px}
.bz-plan-card .incl li{position:relative;padding-left:24px;font-size:14px;
  line-height:1.5;color:rgba(255,255,255,.84)}
.bz-plan-card .incl li::before{content:"✓";position:absolute;left:0;top:0;
  color:var(--sky);font-weight:700}

/* --------------------------------------------------------- the quote -- */
/* Asked for at the moment somebody has just built a plan and wants it in
   writing, so it asks for three things and shows them what it is about to
   send. Anything longer and they go back to reading. */
.bz-modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
  justify-content:center;padding:24px}
.bz-modal[hidden]{display:none}
.bz-modal-veil{position:absolute;inset:0;background:rgba(13,8,77,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:bzFade .25s ease}
.bz-modal-card{position:relative;width:min(100%,460px);max-height:calc(100vh - 48px);
  overflow:auto;background:#fff;border-radius:26px;padding:34px 32px 30px;
  box-shadow:0 60px 120px -40px rgba(13,8,77,.55);animation:bzRise .3s cubic-bezier(.2,.7,.2,1)}
@keyframes bzFade{from{opacity:0}}
@keyframes bzRise{from{opacity:0;transform:translateY(14px) scale(.98)}}
@media (prefers-reduced-motion:reduce){
  .bz-modal-veil,.bz-modal-card{animation:none}
}
.bz-modal-x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:none;
  border-radius:50%;background:var(--bg);color:var(--ink-2);font-size:22px;line-height:1;
  cursor:pointer;transition:background .2s,color .2s}
.bz-modal-x:hover{background:var(--line-3);color:var(--ink)}
.bz-modal .kick{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--blue)}
.bz-modal h3{font-size:26px;line-height:1.14;letter-spacing:-.02em;margin-top:10px}
.bz-modal h3 .hm-em{color:var(--blue);font-style:italic}
/* What they are about to be sent, so the form is not a leap of faith. */
.bz-modal-plan{font-size:13.5px;line-height:1.55;color:var(--ink-2);background:var(--bg);
  border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;margin-top:16px}
.bz-modal-form{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.bz-quote-send{width:100%;justify-content:center;margin-top:4px}
.bz-modal-note{font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.bz-modal-err{font-size:13px;color:var(--red);text-align:center;margin-top:-4px}

/* What the dialog becomes once it has been sent. */
.bz-modal-done{text-align:center;padding:8px 0 4px}
.bz-modal-done .tick{display:grid;place-items:center;width:52px;height:52px;margin:0 auto;
  border-radius:50%;background:#E8F7F0;color:var(--green);font-size:24px;font-weight:700}
.bz-modal-done h3{font-size:25px;line-height:1.16;letter-spacing:-.02em;margin-top:18px}
.bz-modal-done h3 .hm-em{color:var(--blue);font-style:italic}
.bz-modal-done p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:12px}
.bz-modal-done-btns{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.bz-modal-done-btns .hm-btn{width:100%;justify-content:center}

/* The page behind it does not scroll while it is open. */
body.bz-locked{overflow:hidden}

/* ------------------------------------------------------- the numbers -- */
/* The one dark band on the page. The figures sit straight on it behind thin
   rules rather than inside a card: a card would make them four things, and
   they are one statement. */
.bz-numbers{position:relative;overflow:hidden;background:var(--ink);color:#fff}
/* A soft light low on the left, as their band has. */
.bz-numbers::before{content:"";position:absolute;left:-180px;bottom:-280px;
  width:760px;height:620px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(19,98,177,.5),rgba(19,98,177,0) 70%)}
.bz-numbers .hm-wrap{position:relative;z-index:1}
.bz-numbers .hm-wrap{padding:88px 28px 92px;border-color:rgba(255,255,255,.1)}
.bz-numbers-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:28px;flex-wrap:wrap}
.bz-numbers-head h2{font-size:clamp(32px,3.6vw,46px);line-height:1.08;max-width:520px;
  text-wrap:balance}
.bz-numbers-head h2 .hm-em{color:var(--sky);font-style:italic}
.bz-numbers-head p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.7);
  max-width:380px}
.bz-numbers-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:52px}
.bz-numbers-grid>div{padding:0 28px;border-left:1px solid rgba(255,255,255,.14)}
.bz-numbers-grid>div:first-child{padding-left:0;border-left:none}
.bz-numbers-grid b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(42px,4.2vw,56px);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.bz-numbers-grid span{display:block;font-size:15px;font-weight:700;margin-top:16px}
.bz-numbers-grid em{display:block;font-style:normal;font-size:14px;line-height:1.55;
  color:rgba(255,255,255,.64);margin-top:5px;text-wrap:pretty}

/* ---------------------------------------------------------- programmes -- */
.bz-progs{margin-top:44px}
.bz-progs .rl-track{--rl-w:calc((100% - 40px) / 3);gap:20px;align-items:stretch}
.bz-progs .bz-prog{height:100%}
.bz-prog{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:26px;
  padding:30px 26px 26px;display:flex;flex-direction:column;gap:14px}
.bz-prog.pop{background:var(--ink);color:#fff;border-color:var(--ink);
  box-shadow:0 40px 80px -40px rgba(13,8,77,.5)}
.bz-kick,.bz-pop{display:inline-flex;align-self:flex-start;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:99px}
.bz-kick{color:var(--blue);background:#EEF5FC}
.bz-pop{color:var(--ink);background:var(--sky)}
.bz-prog h3{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
.bz-prog p{font-size:14.5px;line-height:1.6}
.bz-prog>p{color:var(--ink-2)}
.bz-prog.pop>p{color:rgba(255,255,255,.76)}
.bz-prog-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;
  border-top:1px solid var(--line-3);border-bottom:1px solid var(--line-3)}
.bz-prog.pop .bz-prog-meta{border-color:rgba(255,255,255,.16)}
.bz-prog-meta span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint)}
.bz-prog.pop .bz-prog-meta span{color:rgba(255,255,255,.55)}
.bz-prog-meta b{display:block;font-size:14.5px;margin-top:4px}
.bz-prog.pop .bz-pts span{background:rgba(255,255,255,.18);color:#fff}
.bz-prog .hm-btn{margin-top:auto;justify-content:center}
.hm .bz-prog.pop .hm-btn-primary{background:#fff;color:var(--ink);border-color:#fff}
.hm .bz-prog.pop .hm-btn-primary:hover{background:var(--sky);color:var(--ink)}

/* ------------------------------------------------------- the plan builder -- */
.bz-build{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;
  margin-top:44px;align-items:start}
.bz-build-l{background:#fff;border:1px solid var(--line-2);border-radius:24px;padding:12px}
.bz-q-step{padding:20px 20px 22px;border-bottom:1px solid var(--line-3)}
.bz-q-step:last-child{border-bottom:none}
.bz-q-step .h{display:flex;align-items:center;gap:11px;font-size:15.5px;font-weight:700}
.bz-q-step .h span{width:24px;height:24px;flex:none;border-radius:50%;background:var(--ink);
  color:#fff;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center}
.bz-q-step .h em{margin-left:auto;font-style:normal;font-size:13px;font-weight:600;
  color:var(--muted)}
.bz-q-step .opts{display:grid;gap:8px;margin-top:14px}
.bz-q-step .opts.two{grid-template-columns:1fr 1fr}
.bz-q-step .opts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bz-q-step .opts.flat{display:flex;flex-wrap:wrap}
.bz-q-step button{font-family:inherit;text-align:left;padding:13px 15px;border-radius:14px;
  border:1px solid #D7DCE6;background:#fff;cursor:pointer;color:var(--ink);
  transition:border-color .18s,background .18s}
.bz-q-step .opts.flat button{padding:9px 14px;border-radius:99px;font-size:13.5px;
  font-weight:600;color:var(--ink-2)}
.bz-q-step button:hover{border-color:var(--ink)}
.bz-q-step button b{display:block;font-size:14.5px}
.bz-q-step button em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  margin-top:3px}
/* Filled, not tinted. A pale wash with a coloured edge is what hover
   looks like; chosen has to be unmistakable from across the card. */
.bz-q-step button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  color:#fff}
.bz-q-step button[aria-pressed="true"] em{color:rgba(255,255,255,.7)}
.bz-q-step .opts.flat button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);
  color:#fff}
/* A slider you drag with a thumb. The browser's own is 16px tall, which is
   a target you have to look at to hit, so the track is drawn here and the
   control is given the height of the hand using it. */
.bz-range{-webkit-appearance:none;appearance:none;width:100%;height:44px;
  margin-top:6px;background:none;cursor:pointer}
.bz-range::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:var(--line-2)}
.bz-range::-moz-range-track{height:6px;border-radius:99px;background:var(--line-2)}
.bz-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:99px;background:var(--blue);
  border:3px solid #fff;box-shadow:0 2px 8px rgba(13,8,77,.3)}
.bz-range::-moz-range-thumb{width:24px;height:24px;border-radius:99px;
  background:var(--blue);border:3px solid #fff;box-shadow:0 2px 8px rgba(13,8,77,.3)}
.bz-range:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}

.bz-plan-card{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:24px;
  padding:28px;box-shadow:0 40px 80px -44px rgba(13,8,77,.55)}
.bz-plan-card .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bz-plan-card .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;
  color:rgba(255,255,255,.5)}
.bz-plan-card .kick{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:var(--sky);color:var(--ink);padding:5px 11px;border-radius:99px}
.bz-plan-card h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;font-size:30px;
  line-height:1.1;margin-top:16px}
.bz-plan-card>p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.76);margin-top:10px}
.bz-plan-card .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:22px;
  background:rgba(255,255,255,.14);border-radius:16px;overflow:hidden}
.bz-plan-card .facts div{background:var(--ink);padding:14px 16px}
.bz-plan-card .facts span{display:block;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.bz-plan-card .facts b{display:block;font-size:14.5px;margin-top:5px}
.hm .bz-plan-card .hm-btn{width:100%;justify-content:center;margin-top:22px;background:#fff;
  color:var(--ink);border-color:#fff}
.hm .bz-plan-card .hm-btn:hover{background:var(--sky);color:var(--ink)}
.bz-plan-card .note{font-size:12.5px;color:rgba(255,255,255,.55);text-align:center;margin-top:12px}

/* ------------------------------------------------------ inside the room -- */
.bz-vids{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.bz-vid{position:relative;margin:0;aspect-ratio:16/10;border-radius:24px;overflow:hidden;
  background:var(--ink);cursor:pointer}
.bz-vid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bz-vid .scrim{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(13,8,77,.1) 30%,rgba(13,8,77,.85))}
.bz-vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;
  height:70px;border-radius:50%;border:1px solid rgba(255,255,255,.7);
  background:rgba(13,8,77,.42);backdrop-filter:blur(10px);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -10px rgba(13,8,77,.6);transition:transform .3s,background .3s}
.bz-vid .play svg{width:24px;height:24px;margin-left:4px;fill:currentColor}
.bz-vid:hover .play{transform:translate(-50%,-50%) scale(1.08);background:rgba(13,8,77,.62)}
.bz-vid figcaption{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff}
.bz-vid figcaption b{display:block;font-size:17px;font-weight:700}
.bz-vid figcaption em{display:block;font-style:normal;font-size:13.5px;
  color:rgba(255,255,255,.75);margin-top:3px}

/* ------------------------------------------------------------- process -- */
.bz-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:44px}
.bz-step{position:relative;background:#fff;border:1px solid var(--line-2);border-radius:22px;
  padding:26px 22px}
.bz-step .n{position:absolute;right:20px;top:18px;font-family:var(--serif);font-size:40px;
  line-height:1;color:var(--line-2)}
.bz-step .when{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue)}
.bz-step h3{font-size:17.5px;line-height:1.3;font-weight:700;margin-top:10px}
.bz-step p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:8px}

/* ---------------------------------------------------------------- form -- */
.bz-plan .hm-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;
  align-items:start}
.bz-plan-l h2{font-size:clamp(30px,3.6vw,46px);line-height:1.06;margin-top:16px}
.bz-plan-l>p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px}
.bz-steps-l{display:flex;flex-direction:column;gap:16px;margin-top:28px}
.bz-steps-l>div{display:flex;gap:14px;align-items:flex-start}
.bz-steps-l span{width:26px;height:26px;flex:none;border-radius:50%;background:var(--ink);
  color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;
  justify-content:center}
.bz-steps-l b{display:block;font-size:15px}
.bz-steps-l em{display:block;font-style:normal;font-size:13.5px;color:var(--ink-2);margin-top:3px}
.bz-talk{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:flex;
  flex-direction:column;gap:8px;align-items:flex-start}
.bz-talk .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;color:var(--faint)}
.bz-talk a{font-size:15.5px;font-weight:600;color:var(--ink)}
.hm .bz-talk a.blue{color:var(--blue)}

.bz-form{background:#fff;border:1px solid var(--line-2);border-radius:28px;padding:26px;
  box-shadow:0 40px 80px -46px rgba(13,8,77,.35)}
.bz-f-top{padding-bottom:22px;border-bottom:1px solid var(--line-3)}
.bz-f-top .lbl{font-size:13px;font-weight:700;color:var(--ink-2)}
.bz-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.bz-pick button{text-align:left;padding:14px 16px;border-radius:16px;border:1px solid #D7DCE6;
  background:#fff;font-family:inherit;cursor:pointer;transition:border-color .2s,background .2s}
.bz-pick button:hover{border-color:var(--ink)}
.bz-pick button.on{border-color:var(--blue);background:#EEF5FC}
.bz-pick b{display:block;font-size:15px;color:var(--ink)}
.bz-pick em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:3px}

.bz-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.bz-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.bz-field.wide{grid-column:1/-1}
.bz-field>span{font-size:13px;font-weight:600;color:var(--ink)}
.bz-field i{font-style:normal;color:var(--red)}
.bz-field input,.bz-field select,.bz-field textarea{width:100%;padding:13px 14px;
  border:1px solid #D7DCE6;border-radius:14px;font-family:inherit;font-size:15px;
  color:var(--ink);background:#fff;outline:none;transition:border-color .16s,box-shadow .16s}
.bz-field textarea{resize:vertical;line-height:1.55}
.bz-field input:focus,.bz-field select:focus,.bz-field textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(19,98,177,.12)}
.bz-field input::placeholder,.bz-field textarea::placeholder{color:var(--faint)}
.hm .bz-send{width:100%;justify-content:center;margin-top:20px;min-height:54px;font-size:16px}
.bz-small{font-size:12.5px;color:var(--muted);text-align:center;margin-top:12px}

/* ----------------------------------------------------------------- faq -- */
.bz-faq{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:48px;
  align-items:start}
.bz-faq aside{position:sticky;top:96px}
.bz-faq aside h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:14px}
.bz-faq aside p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:14px}
.bz-faq-cta{margin-top:22px}
.bz-q{border-bottom:1px solid var(--line)}
.bz-q-head{width:100%;display:flex;align-items:center;gap:18px;padding:22px 2px;background:none;
  border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:17px;font-weight:600;
  color:var(--ink)}
.bz-q-head span{flex:1;min-width:0}
.bz-q-head .pm{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
  transition:transform .3s,background .2s}
.bz-q.open .pm{transform:rotate(45deg);background:var(--bg)}
.bz-q-body{display:none;padding:0 46px 22px 2px;font-size:15.5px;line-height:1.65;
  color:var(--ink-2);text-wrap:pretty}
.bz-q.open .bz-q-body{display:block}

/* ===================================================== the playbook ======= */
/* Their hero holds the left of the column. A reference page is something
   you read, and reading starts at the left margin. */
.pb-hero > .hm-wrap{padding:72px 28px 56px}
.pb-hero h1{font-size:clamp(38px,5.2vw,64px);line-height:1.04;margin-top:18px;
  max-width:880px;text-wrap:balance}
.hm p.pb-lede{font-size:17.5px;line-height:1.6;color:var(--ink-2);max-width:620px;
  margin-top:18px;text-wrap:pretty}

/* The contents: five guides, numbered, in one pill. Loose chips read as
   filters; a numbered strip reads as a table of contents, which is what
   this is. */
.pb-jump-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg)}
.pb-jump-band .hm-wrap{padding:14px 28px}
.pb-jump{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  background:#fff;border:1px solid var(--line-2);border-radius:99px;padding:5px;
  width:max-content;max-width:100%}
.pb-jump::-webkit-scrollbar{display:none}
.hm .pb-jump a{flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  font-size:14px;font-weight:600;color:var(--ink-2);padding:10px 18px;
  border-radius:99px;white-space:nowrap;transition:background .2s,color .2s}
.hm .pb-jump a span{font-size:11.5px;font-weight:800;color:var(--faint);
  font-variant-numeric:tabular-nums}
.hm .pb-jump a:hover{background:var(--bg);color:var(--ink)}
.hm .pb-jump a:hover span{color:var(--blue)}
.hm .pb-jump a[aria-current="true"]{background:var(--ink);color:#fff}
.hm .pb-jump a[aria-current="true"] span{color:rgba(255,255,255,.55)}

/* A section head that holds the left, like the hero above it. */
.pb-head{max-width:620px}
.pb-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.08;margin-top:14px;
  text-wrap:balance}
.pb-head p{font-size:16px;line-height:1.6;color:var(--ink-2);margin-top:16px}
.pb-sec .hm-wrap{padding:88px 28px}

/* the anatomy ------------------------------------------------------------- */
.pb-anat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:40px;
  align-items:start}
.pb-anat-l{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:10px}
.pb-anat-row{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;
  border:1px solid transparent;cursor:default;transition:background .2s,border-color .2s,opacity .2s}
.pb-anat-row .dot{width:10px;height:10px;flex:none;border-radius:50%;margin-top:6px}
.pb-anat-row .n{font-size:12px;font-weight:800;color:var(--faint);margin-top:3px}
.pb-anat-row b{display:block;font-size:16px}
.pb-anat-row em{display:block;font-style:normal;font-size:13.5px;line-height:1.5;
  color:var(--ink-2);margin-top:4px}
/* Hovering one part dims the others, here and in the prompt beside it. */
.pb-anat.lit .pb-anat-row{opacity:.28}
.pb-anat.lit .pb-anat-row.on{opacity:1;background:var(--bg);border-color:var(--line-2)}
.pb-anat-r{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:22px;
  padding:26px;box-shadow:0 40px 80px -46px rgba(13,8,77,.5)}
.pb-anat-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pb-anat-r .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.pb-anat-copy{font-family:inherit;font-size:12.5px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:99px;padding:6px 14px;cursor:pointer;transition:background .2s}
.pb-anat-copy:hover{background:rgba(255,255,255,.2)}

/* Each part on its own, under its own label, in the face a prompt is
   written in. Run together as prose it is the mistake the section is
   about. */
.pb-anat-text{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.pb-anat-text .line{transition:opacity .2s}
.pb-anat-text .k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  color:var(--c)}
.pb-anat-text .v{display:block;margin-top:5px;padding-left:11px;
  border-left:2px solid var(--c);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.9)}
.pb-anat.lit .pb-anat-text .line{opacity:.26}
.pb-anat.lit .pb-anat-text .line.on{opacity:1}

/* the rules --------------------------------------------------------------- */
.pb-rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pb-rule{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:26px}
.pb-rule .rn{font-family:var(--serif);font-size:28px;line-height:1;color:var(--line-2)}
.pb-rule h3{font-size:19px;font-weight:700;letter-spacing:-.015em;margin-top:8px}
.pb-rule .why{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:8px}
.pb-rule .pair{display:grid;gap:10px;margin-top:18px}
/* The before/after folds away on a phone -- see the phone block below. On
   anything wider the toggle does not exist and the pair is simply there. */
.pb-rule-t{display:none}
.pb-rule .weak,.pb-rule .strong{padding:14px 16px;border-radius:14px}
.pb-rule .weak{background:#FDECEC}
.pb-rule .strong{background:#E3F6EE}
.pb-rule .tag{display:inline-flex;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#C2404A}
.pb-rule .tag.good{color:#137A55}
.pb-rule .pair p{font-size:14.5px;line-height:1.55;margin-top:7px}
.pb-rule .weak p{color:var(--ink-2)}

/* the lab ----------------------------------------------------------------- */
.pb-lab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:40px;
  align-items:start}
.pb-lab-l{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:22px}
.pb-lab-f{margin-bottom:18px}
.pb-lab-f:last-child{margin-bottom:0}
.pb-lab-f label{display:flex;align-items:baseline;gap:9px;margin-bottom:8px}
.pb-lab-f .dot{width:9px;height:9px;flex:none;border-radius:50%}
.pb-lab-f b{font-size:14.5px}
.pb-lab-f em{font-style:normal;font-size:12.5px;color:var(--muted)}
.pb-lab-f input,.pb-lab-f textarea{width:100%;padding:12px 14px;border:1px solid #D7DCE6;
  border-radius:13px;font-family:inherit;font-size:14.5px;color:var(--ink);background:#fff;
  outline:none;resize:vertical;line-height:1.55;transition:border-color .16s,box-shadow .16s}
.pb-lab-f input:focus,.pb-lab-f textarea:focus{border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(19,98,177,.12)}
.pb-lab-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.pb-lab-chips button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:var(--bg);border:1px solid var(--line-3);padding:7px 12px;border-radius:99px;
  cursor:pointer}
.pb-lab-chips button:hover{border-color:var(--ink)}
.pb-lab-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.pb-lab-r{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:22px;padding:26px;
  box-shadow:0 40px 80px -46px rgba(13,8,77,.5)}
.pb-lab-r .lbl{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;
  font-weight:800;letter-spacing:.07em;color:rgba(255,255,255,.5)}
.pb-score{font-size:11.5px;font-weight:800;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.14);color:#fff}
.pb-score.weak{background:#FF8FA3;color:var(--ink)}
.pb-score.mid{background:var(--amber);color:var(--ink)}
.pb-score.near{background:var(--sky);color:var(--ink)}
.pb-score.good{background:#4FF5A7;color:var(--ink)}
.pb-out{margin-top:16px;font-family:ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.75;
  min-height:180px;white-space:pre-wrap;word-break:break-word;color:#fff}
.pb-out.empty{color:rgba(255,255,255,.45);font-family:var(--sans);font-size:14.5px}
.pb-meter{height:6px;border-radius:99px;background:rgba(255,255,255,.16);margin-top:18px;
  overflow:hidden}
.pb-meter i{display:block;height:100%;width:0;border-radius:99px;background:var(--sky);
  transition:width .3s}
.pb-crit{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.pb-crit span{font-size:12px;font-weight:600;padding:6px 10px;border-radius:99px;
  background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.pb-crit span.on{background:rgba(79,245,167,.18);color:#4FF5A7}
.pb-crit b{font-weight:800;opacity:.6}
.hm .pb-copy{width:100%;justify-content:center;margin-top:18px;background:rgba(255,255,255,.1);
  color:#fff;border-color:rgba(255,255,255,.2)}
.hm .pb-copy:hover{background:#fff;color:var(--ink)}

/* the drills -------------------------------------------------------------- */
.pb-drills{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.pb-drill{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:24px}
.pb-drill-top .tag{display:inline-flex;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#C2404A}
.pb-drill .weak{font-size:18px;font-weight:600;margin-top:9px}
.pb-drill .goal{font-size:13.5px;color:var(--muted);margin-top:6px}
.pb-try{width:100%;margin-top:16px;padding:13px 14px;border:1px solid #D7DCE6;border-radius:14px;
  font-family:inherit;font-size:14.5px;line-height:1.55;color:var(--ink);outline:none;resize:vertical}
.pb-try:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(19,98,177,.12)}
.pb-drill .hm-btn{width:100%;justify-content:center;margin-top:12px}
.pb-answer{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-3)}
.pb-answer .tag{display:inline-flex;font-size:11.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#137A55}
.pb-answer .strong{font-size:14.5px;line-height:1.6;margin-top:9px;padding:14px 16px;
  border-radius:14px;background:#E3F6EE}
.pb-answer .changed{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.pb-answer .changed b{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint)}
.pb-answer .changed span{font-size:13.5px;color:var(--ink-2)}

/* the directory ----------------------------------------------------------- */
.pb-cats{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:34px}
.pb-cats button{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--ink-2);
  background:#fff;border:1px solid var(--line-2);padding:9px 15px;border-radius:99px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px}
.pb-cats button:hover{border-color:var(--ink);color:var(--ink)}
.pb-cats button b{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:99px;
  background:var(--bg);color:var(--ink-2)}
.pb-cats button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pb-cats button[aria-pressed="true"] b{background:rgba(255,255,255,.18);color:#fff}
.pb-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px}
.hm .pb-tool{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line-2);
  border-radius:18px;padding:18px 20px;text-decoration:none;color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .2s}
.hm .pb-tool:hover{transform:translateY(-3px);border-color:var(--ink);
  box-shadow:0 20px 40px -26px rgba(13,8,77,.3)}
.pb-tool .cat{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--blue)}
.pb-tool b{font-size:16.5px;font-weight:700}
.pb-tool em{font-style:normal;font-size:13.5px;color:var(--ink-2);line-height:1.45}
.pb-tool .site{font-size:12.5px;color:var(--faint);margin-top:6px}
.pb-none{grid-column:1/-1;text-align:center;color:var(--muted);padding:30px 0}

/* mcp --------------------------------------------------------------------- */
.pb-mcp{margin-top:40px;background:#fff;border:1px solid var(--line-2);border-radius:24px;
  overflow:hidden}
.pb-mcp-pick{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--line-3);
  overflow-x:auto;scrollbar-width:none}
.pb-mcp-pick::-webkit-scrollbar{display:none}
.pb-mcp-pick button{flex:0 0 auto;font-family:inherit;font-size:14px;font-weight:600;
  color:var(--ink-2);background:none;border:none;padding:10px 18px;border-radius:99px;
  cursor:pointer;white-space:nowrap}
.pb-mcp-pick button:hover{color:var(--ink)}
.pb-mcp-pick button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pb-mcp-body{display:none;padding:30px}
.pb-mcp-body.on{display:block}
.pb-flow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pb-flow-box{flex:1;min-width:130px;padding:16px 18px;border-radius:16px;background:var(--bg);
  border:1px solid var(--line)}
.pb-flow-box.hot{background:var(--ink);border-color:var(--ink);color:#fff}
.pb-flow-box .k{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint)}
.pb-flow-box.hot .k{color:rgba(255,255,255,.55)}
.pb-flow-box .v{display:block;font-size:14.5px;font-weight:600;margin-top:5px}
.pb-flow-arrow{color:var(--faint);font-size:18px}
.pb-mcp-steps{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.pb-mcp-steps>div{display:flex;gap:14px;align-items:flex-start}
.pb-mcp-steps .n{width:26px;height:26px;flex:none;border-radius:50%;background:var(--blue);
  color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center}
.pb-mcp-steps b{display:block;font-size:15px}
.pb-mcp-steps em{display:block;font-style:normal;font-size:14px;color:var(--ink-2);margin-top:4px}
.pb-mcp-steps code{display:block;margin-top:6px;padding:10px 12px;border-radius:11px;
  background:var(--bg);font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--blue);
  word-break:break-word}

.pb-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:30px}
.pb-step{text-align:center}
.pb-step .n{width:38px;height:38px;margin:0 auto;border-radius:50%;background:#fff;
  border:1px solid var(--line-2);font-size:14px;font-weight:800;color:var(--blue);
  display:flex;align-items:center;justify-content:center}
.pb-step b{display:block;font-size:14.5px;margin-top:12px}
.pb-step p{font-size:13px;line-height:1.5;color:var(--ink-2);margin-top:6px}

/* the glossary ------------------------------------------------------------ */
.pb-terms{margin-top:36px;background:#fff;border:1px solid var(--line-2);border-radius:22px;
  overflow:hidden}
.pb-term{border-top:1px solid var(--line-3)}
.pb-term:first-child{border-top:none}
.pb-term-head{width:100%;display:flex;align-items:center;gap:16px;padding:20px 24px;background:none;
  border:none;cursor:pointer;text-align:left;font-family:inherit}
.pb-term-head b{flex:1;min-width:0;font-size:16.5px;font-weight:700}
.pb-term-head em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--blue);background:#EEF5FC;padding:4px 10px;border-radius:99px}
.pb-term-head .pm{width:28px;height:28px;flex:none;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:transform .3s}
.pb-term.open .pm{transform:rotate(45deg)}
.pb-term-body{display:none;padding:0 24px 22px}
.pb-term.open .pb-term-body{display:block}
.pb-term-body p{font-size:15px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.pb-term-body .like{margin-top:12px;padding:13px 16px;border-radius:14px;background:var(--bg);
  font-size:14.5px;line-height:1.55}
.pb-term-body .like span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}

/* ========================================================== about us ====== */
.ab-hero > .hm-wrap{padding:84px 28px 56px;text-align:center}
.ab-hero h1{font-size:clamp(42px,6vw,78px);line-height:1.02;max-width:860px;margin:0 auto;
  text-wrap:balance}
.hm p.ab-lede{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:640px;
  margin:22px auto 0;text-wrap:pretty}

/* Who already learns here, two rows drifting opposite ways. The design
   pulled each organisation's favicon off the web; a page of ours does not
   load images from somebody else's server, so the names carry it. */
/* The six journeys, one at a time. */
.ab-impact{margin-top:40px;background:#fff;border:1px solid var(--line-2);border-radius:28px;
  overflow:hidden}
.ab-tabs{display:flex;gap:4px;padding:12px;border-bottom:1px solid var(--line-3);
  overflow-x:auto;scrollbar-width:none}
.ab-tabs::-webkit-scrollbar{display:none}
.ab-tabs button{flex:0 0 auto;border:none;background:none;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--ink-2);padding:10px 18px;border-radius:99px;cursor:pointer;
  transition:background .2s,color .2s;white-space:nowrap}
.ab-tabs button:hover{color:var(--ink)}
.ab-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.ab-panels{position:relative}
.ab-panel{display:none;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;padding:40px;
  animation:hmUp .5s cubic-bezier(.2,.7,.2,1) both}
.ab-panel.on{display:grid}
.ab-panel-l .n{font-family:var(--serif);font-size:36px;line-height:1;color:var(--line-2)}
.ab-panel-l h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(28px,3.2vw,40px);line-height:1.08;margin-top:12px;text-wrap:balance}
.ab-panel-l p{font-size:16px;line-height:1.65;color:var(--ink-2);margin-top:16px;
  text-wrap:pretty}
.ab-panel-r{display:flex;flex-direction:column;justify-content:center;gap:10px}
.ab-ba{padding:20px 22px;border-radius:18px;background:var(--bg);border:1px solid var(--line-3)}
.ab-ba.now{background:#EEF5FC;border-color:#DCE6F2}
.ab-ba .lbl{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint)}
.ab-ba.now .lbl{color:var(--blue)}
.ab-ba p{font-size:15px;line-height:1.55;margin-top:8px}
.ab-arrow{display:flex;justify-content:center;color:var(--blue)}
.ab-arrow svg{width:22px;height:22px}
/* The clock on the panel: how long before the next story. */
.ab-bar{height:3px;background:var(--line-3)}
.ab-bar i{display:block;height:100%;width:0;background:var(--blue)}

.ab-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#fff;
  border:1px solid var(--line-2);border-radius:24px;overflow:hidden;margin:0 28px 96px}
.ab-stat{padding:32px 30px;border-right:1px solid var(--line-3)}
.ab-stat:last-child{border-right:none}
.ab-stat .hm-stat-n{margin-top:20px}
.ab-grow{display:flex;align-items:flex-end;gap:4px;height:30px}
.ab-grow i{width:7px;border-radius:3px;background:var(--blue);opacity:.3}
.ab-grow i:last-child{opacity:1}

.ab-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.ab-step{position:relative;padding:30px 26px 32px;border-radius:24px;background:#fff;
  border:1px solid var(--line-2)}
.ab-step.mid{background:#EEF5FC;border-color:#DCE6F2}
.ab-step.now{background:var(--blue);border-color:var(--blue);color:#fff}
/* The label and the number on one line, the label first. */
.ab-step .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ab-step h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2vw,25px);
  line-height:1.2;letter-spacing:-.015em;margin-top:16px}
.ab-step .n{font-family:var(--serif);font-size:38px;line-height:1;color:#B8CBE2}
.ab-step.mid .n{color:var(--sky)}
.ab-step.now .n{color:#fff}
.ab-step .tag{display:inline-flex;margin-top:12px;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:#F1F3F8;color:var(--ink-2)}
.ab-step.mid .tag{background:#fff;color:var(--blue)}
.ab-step.now .tag{background:rgba(255,255,255,.16);color:#fff}
.ab-step h3{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.015em;margin-top:14px}
.ab-step p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin-top:10px}
.ab-step.now p{color:rgba(255,255,255,.82)}

.ab-vals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.ab-val{background:#fff;border:1px solid var(--line-2);border-radius:22px;padding:26px 22px}
.ab-val .n{font-family:var(--serif);font-size:34px;line-height:1;color:var(--line-2)}
.ab-val h3{font-size:17.5px;font-weight:700;margin-top:12px}
.ab-val p{font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:8px}

/* One statement with its three parts inside it. Loose on the page with
   three white cards it read as another row of features. */
.ab-promise-band .hm-wrap{padding-top:0}
.ab-promise{position:relative;overflow:hidden;background:var(--ink);color:#fff;
  border-radius:30px;padding:46px 44px;
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:44px;
  align-items:center}
.ab-promise h2{font-size:clamp(30px,3.6vw,46px);line-height:1.07;margin-top:14px}
.ab-pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-promise h2 .hm-em{color:var(--sky);font-style:italic}
.ab-pillar{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:20px;padding:22px 20px}
.ab-pillar b{font-size:16.5px;font-weight:700}
.ab-pillar p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.72);margin-top:8px}

.ab-tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.hm .ab-track{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-2);
  border-radius:24px;padding:10px 10px 26px;text-decoration:none;color:var(--ink);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.hm .ab-track:hover{transform:translateY(-5px);box-shadow:0 30px 60px -32px rgba(13,8,77,.3)}
.ab-track .top{height:130px;border-radius:18px;display:flex;align-items:center;
  justify-content:center;gap:10px}
.ab-track .top span{width:52px;height:52px;border-radius:16px;background:rgba(255,255,255,.9);
  box-shadow:0 4px 0 rgba(13,8,77,.05),0 14px 26px -12px rgba(13,8,77,.3);
  display:flex;align-items:center;justify-content:center}
.ab-track .top i{width:28px;height:28px;background-size:contain;background-repeat:no-repeat;
  background-position:center}
.ab-track h3{font-size:19px;line-height:1.3;font-weight:700;margin:20px 16px 0}
.ab-track p{font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:8px 16px 0}
.ab-track .go{margin:18px 16px 0;font-size:14.5px;font-weight:600;color:var(--blue)}

/* ---------------------------------------------------------------- widths -- */
@media (max-width:1040px){
  .ab-tracks,.ab-steps{grid-template-columns:1fr}
  .ab-stats{grid-template-columns:1fr}
  .ab-stat{border-right:none;border-bottom:1px solid var(--line-3)}
  .ab-stat:last-child{border-bottom:none}
  .bz-map .hm-wrap{grid-template-columns:1fr;gap:34px}
  .bz-map-l p{max-width:none}
  .bz-tools{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bz-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Stacked, each programme is a screen and a half and the third is three
     screens from anybody who has already decided. So it stays a row. */
  .bz-progs .rl-track{--rl-w:min(84vw,360px);gap:16px}
  .pb-tools{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pb-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-vals{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .bz-build{grid-template-columns:1fr}
  .bz-plan-card{position:static}
  .bz-vids{grid-template-columns:1fr}
  .bz-hero > .hm-wrap{grid-template-columns:1fr;gap:40px}
  .bz-plan .hm-wrap{grid-template-columns:1fr;gap:34px}
  .bz-faq{grid-template-columns:1fr;gap:30px}
  .bz-faq aside{position:static}
  .bz-two{grid-template-columns:1fr}
  .pb-anat,.pb-lab{grid-template-columns:1fr}
  .pb-anat-r,.pb-lab-r{position:static}
  .pb-rules,.pb-drills{grid-template-columns:1fr}
  .ab-panel{grid-template-columns:1fr;gap:26px}
  .ab-promise{grid-template-columns:1fr;gap:28px;padding:34px 24px;border-radius:24px}
}
/* The hit and reading sizes follow the pointer, not the width, so a tablet
   gets them as a phone does while a laptop keeps its own proportions. */
@media (max-width:760px), (max-width:1024px) and (pointer:coarse){
  .bz-sec .hm-wrap,.pb-sec .hm-wrap{padding:64px 20px}
  .bz-numbers .hm-wrap{padding:64px 20px 68px}
  /* Two across on a phone; the rules go horizontal with them. */
  .bz-numbers-grid{grid-template-columns:1fr 1fr;gap:28px 0;margin-top:36px}
  .bz-numbers-grid>div{padding:0 18px}
  .bz-numbers-grid>div:nth-child(2n+1){padding-left:0;border-left:none}
  .bz-hero > .hm-wrap{padding:52px 20px 60px}
  .pb-hero > .hm-wrap{padding:52px 20px 40px}
  .pb-jump-band .hm-wrap{padding:12px 20px}
  .pb-jump{width:100%}
  .ab-hero > .hm-wrap{padding:52px 20px 44px}
  .bz-grid{grid-template-columns:1fr}
  .bz-toast{left:0;bottom:-16px;padding:11px 14px 11px 11px}
  .pb-rules{grid-template-columns:1fr}

  /* -- the directory ----------------------------------------------------
     Fifty-two tools, one under another, is seven screens of scrolling. Two
     up with the url dropped -- the whole card is a link to it anyway --
     brings it under three, and the filter comes along for the ride. */
  .pb-cats{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x proximity;scrollbar-width:none;
    position:sticky;z-index:4;
    /* The bar reaches both edges of the screen, which means a negative
       margin that cancels the column's padding -- and that padding is not
       the same at every width, so it is named once here and overridden
       with the padding it belongs to, rather than written out twice and
       left to drift. */
    --gut:20px;
    /* clears the header, whose phone height is set in nav.css */
    top:68px;margin:34px calc(-1 * var(--gut)) 0;padding:10px var(--gut);
    background:rgba(246,248,251,.94);backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px)}
  .pb-cats::-webkit-scrollbar{display:none}
  .pb-cats button{flex:0 0 auto;scroll-snap-align:center}
  .pb-tools{grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hm .pb-tool{padding:14px 14px 15px;border-radius:18px;gap:3px}
  .pb-tool b{font-size:15px}
  .pb-tool .site{display:none}

  /* -- the rules --------------------------------------------------------
     The headline and the why are the rule; the weak and strong examples
     are the proof, and they are what makes the section three screens long.
     They open on a tap, one rule at a time if you like. */
  .pb-rule{padding:22px}
  .pb-rule .pair{display:none}
  .pb-rule.open .pair{display:grid}
  .pb-rule-t{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
    min-height:42px;padding:0;background:none;border:none;cursor:pointer;
    font-family:inherit;font-size:13.5px;font-weight:700;color:var(--blue)}
  .pb-rule-t::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s}
  .pb-rule.open .pb-rule-t::after{transform:rotate(-135deg) translate(-2px,-2px)}

  /* -- two up rather than one ------------------------------------------- */
  .bz-tools{grid-template-columns:1fr 1fr;gap:10px}
  .bz-tool{padding:14px 10px;gap:10px;border-radius:15px}
  .bz-tool .ic{width:28px;height:28px}
  .bz-tool .ic i{width:26px;height:26px}
  .bz-tool .t{font-size:12.5px}
  .ab-vals{grid-template-columns:1fr 1fr;gap:10px}
  .ab-val{padding:20px 16px}
  .ab-val .n{font-size:28px}
  .ab-val h3{font-size:16px;margin-top:9px}
  .ab-val p{font-size:13px}

  /* -- the journeys ------------------------------------------------------
     Six of them in a row that already scrolls; snapping makes it land on a
     whole word rather than halfway through one. */
  .ab-tabs{scroll-snap-type:x proximity}
  .ab-tabs button{scroll-snap-align:center}
  .pb-hero > .hm-wrap{padding:52px 20px 40px}
  .pb-mcp-body{padding:20px}
  .pb-flow{flex-direction:column;align-items:stretch}
  .pb-flow-arrow{text-align:center;transform:rotate(90deg)}
  .pb-cats button,.pb-mcp-pick button,.pb-lab-chips button{min-height:42px}
  .hm .pb-jump a{min-height:44px}
  .pb-anat-copy{min-height:40px;padding:8px 16px}
  .ab-hero > .hm-wrap{padding:52px 20px 36px}
  .ab-panel{padding:26px 20px;gap:26px}
  .ab-tabs{padding:10px}
  .ab-stats{margin:0 20px 64px}
  .ab-steps,.ab-tracks,.ab-pillars{grid-template-columns:1fr}
  /* Touch sizes on this page's own controls. */
  .ab-tabs button{min-height:44px}
  .bz-steps,.pb-parts{grid-template-columns:1fr}
  .pb-steps{grid-template-columns:1fr 1fr}
  .pb-lab-l,.pb-lab-r,.pb-anat-r{padding:18px}
  .bz-aud button{font-size:13.5px;padding:11px 15px}
  /* Nothing under 12px. These pages are full of small labels -- eyebrows,
     tags, chips, captions -- all set at 11.5, which is a size you can see
     and cannot read at arm's length. Named by kind rather than one at a
     time, because every new section brought more of them. */
  .bz-sec .lbl,.pb-sec .lbl,.bz-hero .lbl,.ab-impact .lbl,
  .bz-ticks,.bz-kpis span,.bz-rows-l,.bz-toast em,.bz-chips span,.bz-card-tag,
  .bz-pts span,.bz-dash-top .live,.bz-q-step .h em,
  .bz-kick,.bz-pop,.bz-prog-meta span,.bz-step .when,.bz-talk .lbl,.bz-small,
  .bz-plan-card .lbl,.bz-plan-card .incl .lbl,.bz-plan-card .kick,.bz-plan-card .facts span,
  .bz-plan-card .note,.bz-vid figcaption em,
  .pb-rule .tag,.pb-part code,.pb-tool em,.pb-tool .cat,.pb-tool .site,
  .pb-score,.pb-term-head em,.pb-crit span,.pb-anat-row .n,.pb-anat-r .lbl,
  .pb-lab-r .lbl,.pb-lab-f em,.pb-drill .tag,.pb-drill .goal,.pb-answer .tag,
  .pb-answer .changed b,.pb-term-body .like span,.pb-step p,
  .ab-ba .lbl,.ab-step .tag,.ab-trust-l,.ab-val .n,
  .pb-cats button b,.pb-crit b,.pb-flow-box .k,.pb-mcp-steps em,
  .hm .pb-jump a span,.pb-anat-text .k,
  .hm-eyebrow{font-size:12.5px}
  /* Touch sizes, as everywhere else on the site. */
  .bz-field input,.bz-field select,.bz-field textarea{min-height:50px}
  .bz-pick button{min-height:62px}
  .bz-q-head{min-height:58px}
  .bz-aud button{min-height:44px}
  .bz-pick button,.bz-send{min-height:52px}
  .bz-q-step button{min-height:46px}
  .bz-q-step .opts.three{grid-template-columns:1fr}
  .bz-plan-card .facts{grid-template-columns:1fr}
}
@media (max-width:380px){
  .bz-sec .hm-wrap,.pb-sec .hm-wrap{padding:52px 16px}
  /* and the pinned filter bleeds to the new one */
  .pb-cats{--gut:16px}
  .bz-hero > .hm-wrap{padding:40px 16px 48px}
  .bz-form{padding:18px}
  .bz-card-b{padding:22px 18px 24px}
  .pb-steps{grid-template-columns:1fr}
}