/* metrishq.com. One stylesheet for every page.

   The navy and the emerald are the same values assessment/index.html uses, so
   the site and the assessment read as one site. Manrope carries the
   headings. Public Sans, already in use, carries the body text. */

:root{
  /* the two section grounds */
  --navy:#0E1F3B;
  --cream:#F6F5F1;

  /* the one accent */
  --emerald:#10B981;
  --emerald-soft:rgba(16,185,129,.12);

  /* text on each ground */
  --on-navy:#F4F6F9;
  --on-cream:#16213A;

  --card-navy:#16294A;
  --card-cream:#FFFFFF;
  --line-navy:#2A3F66;
  --line-cream:#E2DFD7;
  --muted-navy:#A9B6CC;
  --muted-cream:#5B667C;

  /* a fact still to be confirmed, kept deliberately visible */
  --amber-on-navy:#F59E0B;
  --amber-on-cream:#B45309;

  /* the one red, for what not to share and when to stop (the advisor).
     6.41 to 1 on the navy, 5.65 on the navy card */
  --red-on-navy:#F5806D;

  /* one radius for every card surface */
  --r-card:18px;
  /* one space above the footer, used by every page container */
  --space-footer:96px;
  --ring:0 0 0 3px rgba(16,185,129,.38);
  /* one frame height for the reel photos and the O'Reilly card */
  --frame-h:min(60vh,520px);
  --r-hero:32px;

  --nav-h:72px;      /* space every page reserves below the fixed header */
  --nav-row:72px;    /* the height of the header bar itself, one row wide */
  --wrap:1120px;

  /* the hero grid. The trail canvas reads --grid-min and snaps to it. */
  --grid-min:33px;
  --grid-maj:132px;
}

/* the trademark symbol after METRIS and 3AEA, small and raised. line-height:0
   keeps it from pushing its line apart from the ones around it */
.tm{font-size:0.55em;line-height:0;vertical-align:super;margin-left:0.05em}
/* the navbar wordmark is a flex row with a 10px gap, which makes the symbol
   its own item and ignores vertical-align: pull it back against METRIS and
   raise it to the top of the row */
.nav-brand .tm{align-self:flex-start;margin-left:-10px;line-height:1}

*{box-sizing:border-box}

/* ---------------------------------------------- one card treatment

   Every card on the site lights its border on hover, and does the same when
   anything inside it takes keyboard focus, with a ring so focus is visible
   and not only a color change. This is the only hover rule for cards. */
.hoverable{transition:border-color .2s ease,box-shadow .2s ease}
.hoverable:hover{border-color:var(--emerald)}
.hoverable:focus-within{border-color:var(--emerald);box-shadow:var(--ring)}

html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  font-variant-numeric:tabular-nums;
  background:var(--navy);
  color:var(--on-navy);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,.display{
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  letter-spacing:-.022em;
  margin:0;
}

a{color:inherit}
:focus-visible{outline:3px solid var(--emerald);outline-offset:3px}
img{max-width:100%;display:block}

/* ---------------------------------------------------------------- nav */

.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  /* its own height, never --nav-h: the script writes the measured header
     height into --nav-h, and reading it back here would feed into itself */
  height:var(--nav-row);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 22px;
  background:rgba(14,31,59,.94);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:var(--on-navy);
}
.nav-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--on-navy);
  font-weight:800;letter-spacing:.1em;font-size:16px;
}
.nav-ring{flex:none;display:block;height:23px;width:auto}
/* One pill, used by the header nav and by the About page tabs. Shape, size,
   radius, padding and font live here once. Only the four colors are tokens,
   so the same pill reads correctly on navy and on the off-white page. */
.nav-pill{
  --pill-line:rgba(255,255,255,.14);
  --pill-bg:rgba(255,255,255,.05);
  --pill-ink:var(--muted-navy);
  --pill-ink-hover:var(--on-navy);
  --pill-fill:rgba(255,255,255,.1);
  --pill-ink-selected:var(--on-navy);

  display:inline-flex;gap:4px;
  padding:4px;
  border:1px solid var(--pill-line);
  border-radius:999px;
  background:var(--pill-bg);
}
/* on a light ground the selected tab fills with navy and white text */
.page .nav-pill{
  --pill-line:var(--line-cream);
  --pill-bg:transparent;
  --pill-ink:var(--muted-cream);
  --pill-ink-hover:var(--on-cream);
  --pill-fill:var(--navy);
  --pill-ink-selected:var(--cream);
}
.nav-pill a,
.nav-pill button{
  font-family:inherit;
  line-height:inherit;
  border:0;
  background:none;
  cursor:pointer;
  text-decoration:none;
  color:var(--pill-ink);
  font-weight:600;font-size:14px;
  padding:7px 18px;
  border-radius:999px;
}
.nav-pill a:hover,
.nav-pill button:hover{color:var(--pill-ink-hover)}
.nav-pill a[aria-current="page"],
.nav-pill button[aria-selected="true"],
.nav-pill button[aria-current="true"]{background:var(--pill-fill);color:var(--pill-ink-selected)}
.nav-cta{
  text-decoration:none;
  background:var(--emerald);
  color:var(--navy);
  font-weight:700;font-size:14px;
  padding:10px 20px;
  border-radius:999px;
  white-space:nowrap;
}
.nav-cta:hover{opacity:.9}

@media (max-width:860px){
  .nav{padding:0 14px}
  /* the pill is three items now, so the action fits beside the wordmark
     and no longer has to be dropped on a phone */
  .nav-cta{padding:9px 14px;font-size:13px}
  .nav-pill a,
  .nav-pill button{padding:7px 15px}
}

/* ------------------------------------------------------------- panels */

.panel{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:calc(var(--nav-h) + 56px) 24px 72px;
  background:var(--panel-bg);
  color:var(--panel-ink);
}
/* Only the hero clips, to hold the grid background and the trail canvas. A
   sticky panel that clips makes anything past the fold unreachable, which is
   what was swallowing the expanded bio. */
.hero{overflow:hidden}
.panel--navy{
  --panel-bg:var(--navy);
  --panel-ink:var(--on-navy);
  --panel-muted:var(--muted-navy);
  --panel-line:var(--line-navy);
  --panel-card:var(--card-navy);
  --panel-tbd:var(--amber-on-navy);
}
.panel--cream{
  --panel-bg:var(--cream);
  --panel-ink:var(--on-cream);
  --panel-muted:var(--muted-cream);
  --panel-line:var(--line-cream);
  --panel-card:var(--card-cream);
  --panel-tbd:var(--amber-on-cream);
}
.wrap{max-width:var(--wrap);margin:0 auto;width:100%;position:relative;z-index:1}
/* a wider column, for the section that needs the extra room */
/* the hosts row takes the page's full content width, the widest it can be
   without breaking past the page's own side margin */
.wrap--wide{max-width:none}

.eyebrow{
  font-size:12px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--emerald);
  margin:0 0 22px;
}
.h-display{font-size:clamp(44px,6.95cqw,120px);line-height:1.02;font-weight:300;letter-spacing:-.03em}
/* the second line is its own block, so the headline is always two lines */
.h-accent{display:block;color:var(--emerald)}
.h-section{font-size:clamp(30px,3.9vw,54px);line-height:1.1;font-weight:300;max-width:20ch}
.h-section.wide{max-width:26ch}
.lede{
  font-size:clamp(17px,1.5vw,21px);
  line-height:1.55;
  color:var(--panel-muted);
  max-width:62ch;
  margin:26px 0 0;
}
p{margin:0}
.tbd{color:var(--panel-tbd,var(--amber-on-navy));font-weight:600}

/* the stacking scroll. The script scales and fades each panel as the next
   one slides up over it. Below 768px, and for anyone who asked for reduced
   motion, the panels simply stack and the script does nothing. */
.stack > .panel:last-child{padding-bottom:var(--space-footer)}
.stack > .panel{
  position:sticky;
  top:0;
  transform-origin:50% 0;
  will-change:transform,opacity;
}
/* A panel taller than the window pins by its bottom edge (stack.js sets a
   negative top), so it is read in full before the next one slides over it.
   A panel marked panel--flow opts out and scrolls as an ordinary section. */
.stack > .panel--flow{position:static;transform:none !important;opacity:1 !important}
@media (max-width:767px){
  .stack > .panel{position:static;transform:none !important;opacity:1 !important;min-height:0}
  .panel{padding:calc(var(--nav-h) + 36px) 18px 52px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .stack > .panel{position:static;transform:none !important;opacity:1 !important}
}

/* ------------------------------------------------------------ buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--emerald);
  color:var(--navy);
  border:0;border-radius:999px;
  padding:16px 34px;
  font-family:inherit;font-weight:700;font-size:16px;
  text-decoration:none;cursor:pointer;
}
.btn:hover{opacity:.9}
.btn--lg{padding:19px 42px;font-size:17px}
.btn--off,.btn:disabled{
  background:transparent;
  color:var(--panel-muted);
  border:1px dashed var(--panel-line);
  cursor:not-allowed;
  opacity:1;
}

.details{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(14px,1.25vw,17px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--panel-ink);
  display:inline-block;
  padding:12px 0 12px 18px;
  border-left:2px solid var(--emerald);
  margin:34px 0 0;
}

/* --------------------------------------------------------------- hero */

.hero .wrap{
  max-width:1280px;
  /* the headline measures itself against this column, not the window. The
     longer line, "Can you measure what changed?", needs 14.2 times the font
     size in width, so 6.95cqw clears it with a little room to spare */
  container-type:inline-size;
}
.hero-grid{
  content:"";
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(to right,rgba(16,185,129,.10) 0 1px,transparent 1px var(--grid-maj)),
    repeating-linear-gradient(to bottom,rgba(16,185,129,.07) 0 1px,transparent 1px var(--grid-maj)),
    repeating-linear-gradient(to right,rgba(244,246,249,.045) 0 1px,transparent 1px var(--grid-min)),
    repeating-linear-gradient(to bottom,rgba(244,246,249,.03) 0 1px,transparent 1px var(--grid-min));
  -webkit-mask-image:radial-gradient(115% 85% at 78% 12%,#000 0%,rgba(0,0,0,.45) 42%,transparent 78%);
  mask-image:radial-gradient(115% 85% at 78% 12%,#000 0%,rgba(0,0,0,.45) 42%,transparent 78%);
  pointer-events:none;
}
.hero-actions{margin:38px 0 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center}

/* ------------------------------------------------- section 2: the five */

.cards-lead{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:30px 0 0}
.cards-rest{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:20px 0 0;max-width:calc(66.666% - 7px)}
.qcard{
  background:var(--panel-card);
  border:1px solid var(--panel-line);
  border-radius:var(--r-card);
  padding:30px 28px;
}
.qcard h3{font-size:24px;font-weight:600;line-height:1.2;margin:20px 0 10px}
/* a card title that leads somewhere still reads as a title, not a link */
.qcard h3 a{color:inherit;text-decoration:none}
.qcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.qcard p{color:var(--panel-muted);font-size:15px;line-height:1.55}
.qcard--sm{padding:22px 24px;border-radius:14px}
.qcard--sm h3{font-size:18px;margin:14px 0 8px}
.qcard--sm p{font-size:14px}
.qcard .ico{color:var(--emerald)}
.card-rank{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--emerald);
  display:block;margin:0 0 4px;
}

/* ------------------------------------------- section 7: nobody stays measured */

.drift{width:100%;height:auto;display:block;margin:0 0 10px}
.caption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

/* ----------------------------------------------- section 4: the seats */

.seat-tabs{display:flex;flex-wrap:wrap;gap:10px;margin:40px 0 28px}
/* One toggle chip: the role tabs on the Workshop page. */
.seat-tab{
  font-family:"Manrope",system-ui,sans-serif;
  background:transparent;
  border:1px solid var(--panel-line, var(--line-cream));
  color:var(--panel-ink, var(--on-cream));
  border-radius:999px;
  padding:11px 22px;
  font-size:15px;font-weight:600;
  cursor:pointer;
}
.seat-tab:hover{border-color:var(--emerald)}
.seat-tab[aria-selected="true"]{background:var(--emerald);border-color:var(--emerald);color:var(--navy)}
.seat-panel{
  background:var(--panel-card);
  border:1px solid var(--panel-line);
  border-left:4px solid var(--emerald);
  border-radius:var(--r-card);
  padding:44px 42px;
  min-height:210px;
  display:flex;flex-direction:column;justify-content:center;
}
.seat-panel .seat-name{
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald);margin:0 0 14px;
}
.seat-panel .seat-line{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(22px,2.6vw,34px);
  line-height:1.28;font-weight:300;
}
.seat-note{margin:18px 0 0;color:var(--panel-muted);font-size:15px}

/* --------------------------------- section 5: what you'll leave with */

.leave-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:48px 0 0}
.leave-card{
  border:1px dashed var(--panel-line);
  border-radius:var(--r-card);
  min-height:220px;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
}

/* --------------------------------------- section 6: staying ready

   The pie is four real <button> elements, not SVG paths, so Enter and Space
   come free and a screen reader announces each one. Each slice is a quadrant
   square with its outer corner rounded to 100 per cent, which makes a true
   quarter disc, and border-radius is honored by hit testing, so a click
   outside the arc falls through instead of landing on the slice. */

.quarters-layout{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:40px;
  align-items:center;
  margin:30px 0 0;
}

.pie{position:relative;width:232px;height:232px;flex:none}
.slice{
  position:absolute;
  width:50%;height:50%;
  padding:0;
  border:2px solid var(--cream);
  cursor:pointer;
  font-family:inherit;
  transition:transform .28s cubic-bezier(.4,0,.2,1),box-shadow .28s ease,background .28s ease;
}
.slice span{
  position:absolute;
  font-size:11px;font-weight:700;
  letter-spacing:.04em;
  color:var(--navy);
  white-space:nowrap;
  pointer-events:none;
}
.slice-1{top:0;left:50%;border-top-right-radius:100%;background:#10B981}
.slice-2{top:50%;left:50%;border-bottom-right-radius:100%;background:#2BC493}
.slice-3{top:50%;left:0;border-bottom-left-radius:100%;background:#55D3AC}
.slice-4{top:0;left:0;border-top-left-radius:100%;background:#86E1C6}

.slice-1 span{left:46%;bottom:46%;transform:translate(-50%,50%)}
.slice-2 span{left:46%;top:46%;transform:translate(-50%,-50%)}
.slice-3 span{right:46%;top:46%;transform:translate(50%,-50%)}
.slice-4 span{right:46%;bottom:46%;transform:translate(50%,50%)}

.slice:hover{filter:brightness(1.06)}
.slice:focus-visible{outline:3px solid var(--on-cream);outline-offset:3px;z-index:3}

/* the selected quarter lifts out along its own bisector */
.slice[aria-pressed="true"]{z-index:2;box-shadow:0 10px 26px rgba(14,31,59,.26)}
.slice-1[aria-pressed="true"]{transform:translate(9px,-9px)}
.slice-2[aria-pressed="true"]{transform:translate(9px,9px)}
.slice-3[aria-pressed="true"]{transform:translate(-9px,9px)}
.slice-4[aria-pressed="true"]{transform:translate(-9px,-9px)}

.pie-center{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:96px;height:96px;
  border-radius:50%;
  background:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:14px;font-weight:600;
  color:var(--on-cream);
  /* catches its own clicks so the hole is a dead zone rather than
     selecting whichever slice happens to sit underneath */
  pointer-events:auto;
  cursor:default;
  z-index:4;
}

.quarter-panel{
  background:var(--card-cream);
  border:1px solid var(--line-cream);
  border-left:4px solid var(--emerald);
  border-radius:var(--r-card);
  padding:24px 28px;
  min-height:168px;
}
.quarter-num{
  font-size:12px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald);
  margin:0 0 10px;
}
.quarter-panel h3{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(21px,2.2vw,27px);
  font-weight:300;line-height:1.2;
  margin:0 0 12px;
}
.quarter-panel p:last-child{color:var(--muted-cream);font-size:15px;line-height:1.55}

.all-year{
  margin:26px 0 0;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:16px;font-weight:600;
  padding-left:16px;
  border-left:2px solid var(--emerald);
}

.benefits-row{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0 18px;
  margin:20px 0 0;
}
.benefit{border-top:1px solid var(--panel-line);padding:11px 0 0}
.benefit b{font-family:"Manrope",system-ui,sans-serif;font-size:13px;font-weight:600;display:block;margin:0 0 3px;line-height:1.25}
.benefit span{color:var(--panel-muted);font-size:12px;line-height:1.45;display:block}

/* Reduced motion: the slice changes color rather than moving. */
@media (prefers-reduced-motion:reduce){
  .slice{transition:none;transform:none !important}
  .slice[aria-pressed="true"]{background:#0A7F5C;box-shadow:none}
  .slice[aria-pressed="true"] span{color:#F4F6F9}
}

@media (max-width:900px){
  /* on phones the panel drops below the circle */
  .quarters-layout{grid-template-columns:1fr;justify-items:center;gap:26px}
  .quarter-panel{width:100%}
  .benefits-row{grid-template-columns:repeat(2,1fr);gap:0 20px}
}

/* ------------------------------------------------- section 7: hosts

   The portraits are square, so they sit beside the name at a readable size
   rather than stretched across the top of the card. That also keeps the card
   short enough that the expanded bio still fits on one screen. */

/* The pair reaches past the text column to the panel's own content width,
   because the longest title is 59 characters and has to sit on one line.
   auto-fit drops them to one card per row as soon as two no longer fit,
   which keeps the nowrap safe at every width above the stacking point. */
/* Two equal columns, side by side, down to the stacking point. Side by side
   matters more than one line, so if the longest title cannot fit at half
   width it wraps rather than the cards widening or stacking. */
.hosts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  /* three shared rows: the header, the bio, the Read more link. Both cards
     take the same tracks, so the divider, the first bio line and the link
     land on the same y in each, whatever the text does. */
  grid-template-rows:auto 1fr auto;
  column-gap:32px;
  row-gap:0;
  align-items:stretch;
  justify-items:stretch;
  margin:46px 0 0;
}
.host{
  background:var(--panel-card);
  border:1px solid var(--panel-line);
  border-radius:var(--r-card);
  padding:24px;
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  align-content:stretch;
  min-width:0;
}
.host-head{
  display:flex;
  gap:16px;
  align-items:center;
  padding:0 0 18px;
  /* the query container lives here, not on the card: a card that is a
     subgrid cannot also be a containment context */
  container-type:inline-size;
  border-bottom:1px solid var(--panel-line);
  margin:0 0 18px;
}
.host-photo{
  width:96px;height:96px;
  flex:none;
  border-radius:12px;
  overflow:hidden;
  background:#CFCBC2;
  display:block;
}
.host-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
.host-head > div{min-width:0}
.host-head h3{
  font-size:22px;font-weight:600;
  margin:0 0 5px;line-height:1.15;
}
.host-title{
  color:var(--emerald);
  font-size:12px;font-weight:700;
  letter-spacing:.01em;text-transform:uppercase;
  line-height:1.4;
  margin:0;
}

/* A 546px header leaves 434px beside the 96px photo and the 16px gap, which
   is what the 59 character title needs at 12px. Narrower than that it wraps
   rather than overflow. */
@container (min-width:546px){
  .host-head h3,
  .host-title{white-space:nowrap}
}
.host-bio{color:var(--panel-muted);font-size:15px;line-height:1.6;margin:0}
/* the link sits at the top of its own row, which is the last row, so it is
   pinned to the bottom of the card */
.host .readmore{align-self:start;justify-self:start;margin:14px 0 0}
/* an open dialog lives in the top layer, so it must not claim a fourth row */
.host > .bio-modal{grid-row:1;grid-column:1}

/* ------------------------------------------- section 8: closing card */

.closing{
  background:var(--navy);
  color:var(--on-navy);
  --panel-ink:var(--on-navy);
  --panel-muted:var(--muted-navy);
  --panel-line:var(--line-navy);
  --panel-card:var(--card-navy);
  --panel-tbd:var(--amber-on-navy);
  border-radius:var(--r-hero);
  padding:clamp(40px,5vw,72px);
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.closing .details{margin-top:28px}
.closing .btn{margin-top:36px}

/* ------------------------------------------------------- the footer */

.site-footer{
  background:var(--navy);
  color:var(--muted-navy);
  border-top:1px solid var(--line-navy);
  padding:58px 24px 44px;
  font-size:14px;
}
.site-footer .inner{max-width:var(--wrap);margin:0 auto}
.site-footer a{color:var(--muted-navy);text-decoration:none}
.site-footer a:hover{color:var(--on-navy)}
.site-footer .tbd{color:var(--amber-on-navy)}

/* four columns: the wordmark and its line, then Measure, Company and
   Elsewhere. An offering that cannot be bought or used today is a plain
   span, never a link, so the markup itself carries the distinction. */
.foot-cols{
  display:grid;
  grid-template-columns:1.5fr 1.2fr 1fr 1fr;
  gap:40px;
  padding:0 0 40px;
  border-bottom:1px solid var(--line-navy);
}
.foot-mark{
  font-family:"Manrope",system-ui,sans-serif;
  font-weight:800;font-size:18px;letter-spacing:.14em;
  color:var(--on-navy);display:block;
}
.foot-tag{margin:12px 0 0;color:var(--muted-navy);font-size:14px}
.foot-place{margin:8px 0 0;color:var(--muted-navy);font-size:13px}
.foot-h{
  font-size:11px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--emerald);
  margin:0 0 16px;
}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-col li{font-size:13.5px;line-height:1.45}
/* not live: shown, but dimmer and not a link */
.foot-soon{color:#5E6E8C}
.foot-legal{margin:26px 0 0;font-size:13px;color:var(--muted-navy)}

@media (max-width:860px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:minmax(0,1fr);gap:30px}
  .site-footer{padding-top:44px}
}

/* --------------------------------------------------- session page */

.session-grid{
  max-width:var(--wrap);
  margin:0 auto;
  padding:calc(var(--nav-h) + 56px) 24px var(--space-footer);
  display:grid;
  grid-template-columns:minmax(0,1fr) 372px;
  gap:56px;
  align-items:start;
}
.session-main > section{margin:0 0 78px}
.session-main > section:last-child{margin-bottom:0}

.aside-panel{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  background:var(--card-navy);
  border:1px solid var(--line-navy);
  border-radius:var(--r-card);
  padding:28px;
}
.aside-hosts{display:grid;gap:14px;margin:0 0 24px}
.aside-host{display:flex;align-items:center;gap:13px}
.aside-host .pic{
  width:46px;height:46px;border-radius:50%;flex:none;
  background:#CFCBC2;overflow:hidden;
}
.aside-host .pic img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(1)}
.aside-host b{font-family:"Manrope",system-ui,sans-serif;font-size:15px;font-weight:600;display:block}
.aside-host span{color:var(--muted-navy);font-size:12.5px;line-height:1.35;display:block}
.aside-price{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:46px;font-weight:300;letter-spacing:-.03em;
  line-height:1;margin:0 0 6px;
}
.aside-facts{border-top:1px solid var(--line-navy);margin:20px 0 0;padding:18px 0 0;display:grid;gap:11px}
.aside-fact{display:flex;gap:11px;font-size:14px;color:var(--muted-navy)}
.aside-fact b{color:var(--on-navy);font-weight:600}
.aside-zones{font-size:13.5px;color:var(--muted-navy);line-height:1.6}
.aside-note{font-size:13px;color:var(--muted-navy);margin:16px 0 0}
.aside-panel .btn{width:100%;margin:20px 0 0}

.mobile-bar{display:none}

/* the timeline */
.tl{list-style:none;margin:34px 0 0;padding:0;position:relative}
.tl:before{content:"";position:absolute;left:15px;top:10px;bottom:10px;width:2px;background:var(--line-cream)}
.tl li{position:relative;padding:0 0 30px 56px}
.tl li:last-child{padding-bottom:0}
/* the step number is the marker, so the seven steps read as numbered and the
   numerals sit in the mono face with everything else */
.tl-n{
  position:absolute;left:0;top:-3px;
  width:32px;height:32px;border-radius:50%;
  background:var(--cream);border:2px solid var(--emerald);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;font-weight:600;
  color:var(--on-cream);
}
.tl h3{font-size:21px;font-weight:600;margin:0 0 5px}
.tl p{color:var(--muted-cream);font-size:15px;line-height:1.55}

/* the registration form */
.formcard{
  background:var(--card-cream);
  border:1px solid var(--line-cream);
  border-radius:var(--r-card);
  padding:36px 34px 34px;
}

/* ----------------------------------------------------- inner pages */

.page{
  min-height:calc(100vh - var(--nav-h));
  background:var(--cream);
  color:var(--on-cream);
  --panel-ink:var(--on-cream);
  --panel-muted:var(--muted-cream);
  --panel-line:var(--line-cream);
  --panel-card:var(--card-cream);
  --panel-tbd:var(--amber-on-cream);
  padding:calc(var(--nav-h) + 72px) 24px var(--space-footer);
}
.page .wrap{max-width:780px}
.page h1{font-size:clamp(38px,5.4vw,72px);line-height:1.05;font-weight:300;margin:0 0 28px}
.page h2{font-size:26px;font-weight:600;margin:52px 0 16px}
.page p{margin:0 0 18px;font-size:17px;line-height:1.68}
.page .tbd{color:var(--amber-on-cream)}
.page .photo-slot{
  border:1px dashed var(--line-cream);
  border-radius:16px;
  padding:22px;
  color:var(--muted-cream);
  font-size:14px;
  margin:0 0 26px;
}
ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:14px 0 14px 24px;border-bottom:1px solid var(--line-cream);position:relative;font-size:16px}
ul.plain li:last-child{border-bottom:0}
ul.plain li:before{content:"";position:absolute;left:0;top:23px;width:8px;height:8px;border-radius:2px;background:var(--emerald)}
.page .btn{margin:34px 0 0}
.card{
  background:var(--card-cream);
  border:1px solid var(--line-cream);
  border-radius:var(--r-card);
  padding:40px 38px;
}

/* --------------------------------------------------------- responsive */

@media (max-width:1040px){
  .session-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:var(--space-footer)}
  .aside-panel{display:none}
  .mobile-bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:fixed;left:0;right:0;bottom:0;z-index:300;
    background:var(--navy);
    border-top:1px solid var(--line-navy);
    padding:14px 18px calc(14px + env(safe-area-inset-bottom));
    color:var(--on-navy);
    --panel-muted:var(--muted-navy);
    --panel-line:var(--line-navy);
  }
  .mobile-bar .price{font-family:"Manrope",system-ui,sans-serif;font-size:26px;font-weight:400;line-height:1.1}
  .mobile-bar .price small{display:block;font-size:12px;color:var(--muted-navy);font-weight:400;letter-spacing:.02em}
  .mobile-bar .btn{padding:13px 24px;font-size:15px}
}

@media (max-width:900px){
  .hosts{grid-template-columns:1fr;grid-template-rows:none;row-gap:32px}
  .host{display:flex;flex-direction:column;grid-row:auto}
  .host .readmore{margin-top:auto}
  .cards-lead{grid-template-columns:1fr}
  .cards-rest{grid-template-columns:1fr;max-width:none}
  .split{grid-template-columns:1fr;gap:34px}
  .leave-grid{grid-template-columns:repeat(2,1fr)}
  .ring-layout{grid-template-columns:1fr;justify-items:center;text-align:left}
  .ring-col--right{text-align:left}
  .seat-panel{padding:32px 26px}
}

@media (max-width:560px){
  .leave-grid{grid-template-columns:1fr}
  .formcard{padding:26px 20px 24px}
  .page{padding:calc(var(--nav-h) + 46px) 18px 64px}
  .session-grid{padding:calc(var(--nav-h) + 40px) 18px var(--space-footer)}
  .session-main > section{margin-bottom:56px}
  .closing{padding:40px 24px;border-radius:24px}
}

/* --------------------------------- the session page's own ground */

.session-page{
  background:var(--cream);
  color:var(--on-cream);
  --panel-ink:var(--on-cream);
  --panel-muted:var(--muted-cream);
  --panel-line:var(--line-cream);
  --panel-card:var(--card-cream);
  --panel-tbd:var(--amber-on-cream);
}
.session-main h1{font-size:clamp(34px,4.6vw,62px);line-height:1.06;font-weight:300;margin:0 0 24px}
.session-main h2{font-size:clamp(26px,3vw,40px);line-height:1.12;font-weight:300;margin:0 0 8px}
.session-main .lede{margin-top:0;color:var(--muted-cream)}
.session-main .eyebrow{margin-bottom:16px}
.aside-panel{
  --panel-ink:var(--on-navy);
  --panel-muted:var(--muted-navy);
  --panel-line:var(--line-navy);
  --panel-tbd:var(--amber-on-navy);
  color:var(--on-navy);
}
.aside-panel .tbd{color:var(--amber-on-navy)}

/* the fixed nav is 72px tall, so an anchor jump has to stop short of it */
[id]{scroll-margin-top:calc(var(--nav-h) + 20px)}

/* ------------------------------------------- read more, and the photo stack */

/* One inline text link. Read more, the card backs and the O'Reilly card are
   the same thing: a small Manrope link with an emerald rule under it. */
.readmore,
.card-more,
.ocard-link{
  font-family:"Manrope",system-ui,sans-serif;
  background:none;
  border:0;
  border-bottom:1px solid var(--emerald);
  color:var(--panel-ink,inherit);
  font-size:14px;font-weight:600;
  padding:0 0 2px;
  margin:14px 0 0;
  text-decoration:none;
  cursor:pointer;
  align-self:flex-start;
}
.readmore:hover{color:var(--emerald)}
.readmore .chev{display:inline-block;margin-left:6px;transition:transform .2s}
.readmore:hover .chev{transform:translateX(3px)}

/* The full bio opens in a reading overlay. Inside a pinned, one-screen
   section there is no room to expand in place: the panel would run off the
   bottom of the viewport with no way to scroll to it. A dialog is not bound by
   the section, and the browser handles Escape and focus for free. */
.bio-modal{
  width:min(640px,calc(100vw - 40px));
  max-height:86vh;
  padding:0;
  border:1px solid var(--line-cream);
  border-radius:var(--r-card);
  background:var(--card-cream);
  color:var(--on-cream);
  --panel-muted:var(--muted-cream);
  --panel-line:var(--line-cream);
  --panel-tbd:var(--amber-on-cream);
  overflow:hidden;
}
.bio-modal::backdrop{background:rgba(14,31,59,.62)}
.bio-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 24px 18px;
  border-bottom:1px solid var(--line-cream);
}
.bio-modal-head h3{font-size:22px;font-weight:600;margin:0}
.bio-close{
  flex:none;
  width:34px;height:34px;
  border:1px solid var(--line-cream);
  border-radius:50%;
  background:none;
  color:var(--on-cream);
  font-size:20px;line-height:1;
  cursor:pointer;
}
.bio-close:hover{border-color:var(--emerald);color:var(--emerald)}
.bio-panel{
  padding:22px 24px 26px;
  overflow-y:auto;
  max-height:calc(86vh - 76px);
  overscroll-behavior:contain;
}
.bio-panel p{margin:0 0 14px;font-size:15.5px;line-height:1.62;color:var(--panel-muted)}
.bio-panel p:last-of-type{margin-bottom:0}
.bio-panel p{margin:0 0 14px;font-size:15px;line-height:1.62;color:var(--panel-muted)}
.bio-panel p:last-of-type{margin-bottom:0}

/* the measurement trail. It sits above the static grid and below the text,
   and never takes a click. */
.hero-canvas{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* --------------------------------- the "Nobody stays measured" chart

   Every segment and dot runs the same 7.4 second loop, so they stay in
   lockstep without a stack of animation-delays. Each keyframe set just holds
   its element back until its own moment. Drawing is stroke-dashoffset on a
   path with pathLength="1", so no script has to measure anything.

   The cycle: four downward drifts at 1.2s each (the short tail takes 0.4s),
   a 0.3s emerald jump at each quarterly check followed by one soft pulse on
   its dot, then a 2s hold and a 0.5s fade before it replays.

   Without the is-anim class the chart simply sits finished, which is what a
   visitor who asked for reduced motion sees, and what shows if the script
   never runs. */

.drift .chart-grid line{stroke:#2A3F66;stroke-width:1}
.drift .chart-checks line{stroke:#10B981;stroke-width:1.4;stroke-dasharray:5 7;opacity:.55}
.drift .seg{fill:none;stroke-width:3;stroke-linecap:round}
.drift .seg-drift{stroke:#F4F6F9}
.drift .seg-jump{stroke:#10B981}
.drift .dot{fill:#10B981;transform-box:fill-box;transform-origin:center}

.drift.is-anim .seg,
.drift.is-anim .dot{
  animation-duration:7400ms;
  animation-iteration-count:infinite;
  animation-timing-function:linear;
  animation-fill-mode:both;
  animation-play-state:paused;
}
.drift.is-anim .seg{stroke-dasharray:1;stroke-dashoffset:1}
.drift.is-anim.is-playing .seg,
.drift.is-anim.is-playing .dot{animation-play-state:running}

.drift.is-anim .seg-d1{animation-name:seg-d1}
.drift.is-anim .seg-j1{animation-name:seg-j1}
.drift.is-anim .seg-d2{animation-name:seg-d2}
.drift.is-anim .seg-j2{animation-name:seg-j2}
.drift.is-anim .seg-d3{animation-name:seg-d3}
.drift.is-anim .seg-j3{animation-name:seg-j3}
.drift.is-anim .seg-t{animation-name:seg-t}
.drift.is-anim .dot-1{animation-name:dot-1}
.drift.is-anim .dot-2{animation-name:dot-2}
.drift.is-anim .dot-3{animation-name:dot-3}

@keyframes seg-d1{
  0%{stroke-dashoffset:1;opacity:1}
  16.216%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-j1{
  0%,16.216%{stroke-dashoffset:1;opacity:1}
  20.270%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-d2{
  0%,20.270%{stroke-dashoffset:1;opacity:1}
  36.486%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-j2{
  0%,36.486%{stroke-dashoffset:1;opacity:1}
  40.541%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-d3{
  0%,40.541%{stroke-dashoffset:1;opacity:1}
  56.757%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-j3{
  0%,56.757%{stroke-dashoffset:1;opacity:1}
  60.811%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes seg-t{
  0%,60.811%{stroke-dashoffset:1;opacity:1}
  66.216%{stroke-dashoffset:0;opacity:1}
  93.243%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:0}
}

@keyframes dot-1{
  0%,20.270%{opacity:0;transform:scale(.6);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  22.297%{opacity:1;transform:scale(1.6);filter:drop-shadow(0 0 9px rgba(16,185,129,.95));animation-timing-function:ease-in}
  25.676%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  93.243%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  100%{opacity:0;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
}
@keyframes dot-2{
  0%,40.541%{opacity:0;transform:scale(.6);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  42.568%{opacity:1;transform:scale(1.6);filter:drop-shadow(0 0 9px rgba(16,185,129,.95));animation-timing-function:ease-in}
  45.946%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  93.243%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  100%{opacity:0;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
}
@keyframes dot-3{
  0%,60.811%{opacity:0;transform:scale(.6);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  62.838%{opacity:1;transform:scale(1.6);filter:drop-shadow(0 0 9px rgba(16,185,129,.95));animation-timing-function:ease-in}
  66.216%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  93.243%{opacity:1;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
  100%{opacity:0;transform:scale(1);filter:drop-shadow(0 0 0 rgba(16,185,129,0))}
}

@media (prefers-reduced-motion:reduce){
  .drift .seg,.drift .dot{
    animation:none !important;
    stroke-dashoffset:0 !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* ------------------------------------------------- the flip cards

   Both faces sit in the same CSS grid cell, so the wrapper takes the height
   of the taller one and nothing has to be positioned absolutely or measured.
   The front turns away and the back turns in over half a second.

   For a visitor who asked for reduced motion the card does not rotate at all;
   the two faces simply swap, handled at the bottom of this block. */

.flip{
  perspective:1400px;
  cursor:pointer;
  border-radius:18px;
  /* the wrapper is the grid item now, so it has to pass the row's full
     height down to the two faces or a flipped card comes up short */
  display:grid;
}
.flip:focus-visible{outline:3px solid var(--emerald);outline-offset:4px}
.flip-inner{
  display:grid;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.4,0,.2,1);
}
.flip.is-flipped .flip-inner{transform:rotateY(180deg)}
.flip-face{
  grid-area:1/1;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex;
  flex-direction:column;
}
.flip-back{transform:rotateY(180deg)}

.flip-back .try-line{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:19px;
  line-height:1.45;
  font-weight:500;
  color:var(--panel-ink);
  margin:16px 0 0;
}
.flip-back.qcard--sm .try-line{font-size:16px;margin-top:12px}
.card-more{margin:auto 0 0;color:var(--emerald)}
.card-more .tbd{font-weight:600}

@media (prefers-reduced-motion:reduce){
  .flip-inner{transition:none;transform:none !important}
  .flip-face{backface-visibility:visible;-webkit-backface-visibility:visible}
  .flip-back{transform:none;visibility:hidden}
  .flip.is-flipped .flip-front{visibility:hidden}
  .flip.is-flipped .flip-back{visibility:visible}
}

/* Short windows: claw back some of the section padding and shrink the pie, so
   the taller sections still fit the one-screen rule on a small laptop. */
@media (max-height:900px){
  .panel{padding:calc(var(--nav-h) + 30px) 24px 44px}
  .pie{width:204px;height:204px}
  .pie-center{width:86px;height:86px;font-size:13px}
  .slice span{font-size:10.5px}
  .quarters-layout{gap:32px;margin-top:24px}
  .quarter-panel{padding:20px 24px;min-height:0}
}

/* Shorter laptop windows: trim the display type and the section padding a
   step further, so every section still holds to one screen. */
@media (max-height:860px){
  .panel{padding:calc(var(--nav-h) + 22px) 24px 34px}
  .h-display{font-size:clamp(36px,5vw,64px)}
  .h-section{font-size:clamp(27px,3.2vw,42px)}
  .lede{font-size:clamp(16px,1.3vw,18px);margin-top:18px}
  .details{margin-top:22px;padding-top:9px;padding-bottom:9px}
  .hero-actions{margin-top:26px}
  .cards-lead{margin-top:22px}
  .qcard{padding:22px 24px}
  .qcard h3{font-size:21px;margin:14px 0 8px}
}

/* The O'Reilly card. Its height comes from its own text plus even padding,
   never from a fixed height, so nothing sits below the link. */
.ocard{
  position:relative;
  border:1px solid transparent;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:48px;
  border-radius:var(--r-card);
  background:
    radial-gradient(120% 90% at 88% 6%,rgba(16,185,129,.20),transparent 62%),
    var(--navy);
  color:var(--on-navy);
  text-align:left;
}
/* the small emerald mark, lined up with the padding */
.ocard:before{
  content:"";
  position:absolute;left:48px;top:0;
  width:34px;height:3px;
  background:var(--emerald);
}
/* scoped under .ocard so the page's own paragraph rule does not win on
   specificity and flatten all three to 17px */
.ocard .ocard-title{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:40px;
  font-weight:400;line-height:1.12;
  letter-spacing:-.02em;
  margin:0;
}
.ocard .ocard-sub{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:19px;
  font-weight:500;
  line-height:1.4;
  color:var(--muted-navy);
  /* narrow enough to fall in two lines */
  max-width:27ch;
  margin:20px 0 0;
}
.ocard .ocard-next{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:13px;
  line-height:1.7;
  color:var(--muted-navy);
  margin:24px 0 0;
}
.ocard .ocard-link{
  font-size:14px;
  color:var(--emerald);
  border-bottom:1px solid var(--emerald);
  margin:28px 0 0;
  padding:0 0 2px;
}

/* ================================================== the About page

   Full width. A large linked name, the role beneath it, then three tabs
   and, under them, a film reel of session photos that runs edge to edge. */

.about-page .wrap{max-width:1280px}
.about-page{padding-bottom:var(--space-footer)}
/* The card carries 48px of its own padding, so its panel sits that much
   lower, leaving the same space under the last line of text as under the
   last photo in the other two tabs. */
#panel-oreilly{margin-bottom:-48px}

.about-head{margin:0 0 40px}
.page .about-head h1{margin:0;font-size:clamp(44px,7vw,96px);line-height:1.02;font-weight:300}
.name-link{color:inherit;text-decoration:none;border-bottom:2px solid var(--emerald);padding-bottom:4px}
.name-link:hover{color:var(--emerald)}
.about-role{
  color:var(--emerald);
  font-size:clamp(13px,1.2vw,15px);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  margin:22px 0 0 !important;
}

/* the three tabs, side by side across the full width */

/* the reel, edge to edge. The page has 24px of side padding, so pulling
   back by exactly that fills the viewport without creating a scrollbar. */
.reels{margin:44px 0 0}
.reel-panel[hidden]{display:none}
.reel{
  margin:0 -24px;
  overflow:hidden;
}
.reel-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:reel-run 54s linear infinite;
}
/* Margin rather than gap, and this is the whole trick. The strip holds each
   image twice, so one set is exactly half the strip. With a uniform
   margin-right on every item, one set measures N x (width + gap), and half
   the strip lands precisely on the copy of the first image. A flex gap would
   land half a gap short and show a jump every cycle.

   There is no margin-left anywhere, so nothing sits before the first image,
   and the only trailing margin is at the far right end of the strip, past
   the reset point, where it is never on screen. */
.reel-item{
  flex:none;
  height:var(--frame-h);
  aspect-ratio:4/3;
  margin-right:20px;
  border-radius:var(--r-card);
  overflow:hidden;
  background:#CFCBC2;
}
.reel-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);display:block}
@keyframes reel-run{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
.reel:hover .reel-track{animation-play-state:paused}

/* the O'Reilly tab holds two cards side by side, each about 640px wide, on
   the content column and only as tall as what is inside it; they stack on
   narrow screens */
.card-pair{display:grid;grid-template-columns:repeat(2,minmax(0,640px));gap:24px}
@media (max-width:1100px){.card-pair{grid-template-columns:minmax(0,640px)}}

@media (max-width:820px){
  .reel-item{height:min(44vh,380px)}
  .ocard{padding:32px}
  .ocard:before{left:32px}
  .ocard .ocard-title{font-size:32px}
}

@media (prefers-reduced-motion:reduce){
  /* no movement: the images sit in a row the visitor scrolls sideways */
  .reel{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .reel-track{animation:none;width:max-content}
  .reel-item[data-copy]{display:none}
}



/* Where Suneeta sits in each frame. The 4 by 3 crop would otherwise cut her
   out of the taller photos, so those name their own focal point. */
img.pos-lectern{object-position:center 24%}
img.pos-questions{object-position:center 11%}
img.pos-opening{object-position:center 7%}
img.pos-table{object-position:center 22%}

/* the O'Reilly card's second line */
.ocard-sub{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(15px,1.7vw,21px);
  font-weight:500;
  line-height:1.35;
  color:var(--muted-navy);
  margin:14px 0 0;
  max-width:24ch;
}

/* ------------------------------------------------------- the hero block */

.hero .lede{max-width:52ch;margin-top:28px}
/* the subtitle runs to two paragraphs. The line box is 1.55em, so half of it
   is .775em: enough to separate them without reading as a new block. */
.hero .lede + .lede{margin-top:.775em}
.hero-actions{margin:32px 0 0}
/* the two secondary links, in the same pill as the nav */
/* the second one is not live yet, so it does not take a click or the keyboard */
.nav-pill .is-soon{
  color:var(--muted-navy);
  font-weight:600;font-size:14px;
  padding:7px 18px;
  border-radius:999px;
  opacity:.55;
  cursor:not-allowed;
  position:relative;
}
.nav-pill .is-soon:hover:after{
  content:"Coming soon";
  position:absolute;
  left:50%;top:calc(100% + 8px);
  transform:translateX(-50%);
  white-space:nowrap;
  background:var(--on-navy);
  color:var(--navy);
  font-size:12px;font-weight:600;
  padding:5px 10px;
  border-radius:6px;
}

@media (max-width:640px){
  .nav-pill .is-soon{text-align:center}
}

/* ==================================================== numerals and figures

   Two things the measurement pages need that the rest of the site did not.

   1. Every numeral on the site is set in a monospace face with tabular
      figures, so a date, a price, a duration and a figure's own numbers all
      line up on the same column widths and none of them reflow as they
      change.

   2. A figure component. Each one is a mono label, an inline SVG and a
      one-line caption. The SVG draws itself once when it scrolls into view.
      Without figs.js, and for anyone who asked for reduced motion, the
      figure simply sits finished, so it is never blank. */

:root{
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.num,
.details,
.illus,
.fig text,
.step-n,
.aside-price,
.aside-facts,
.mobile-bar .price{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
/* the details line was set in Manrope; it is all facts and numerals, so it
   takes the mono face with the rest of them */
.details{font-weight:500;letter-spacing:-.01em}

/* the tag that marks a number as an example and not a measured result */
.illus{
  display:inline-block;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--panel-muted);
  border:1px solid var(--panel-line);
  border-radius:4px;
  padding:3px 7px;
  vertical-align:middle;
  white-space:nowrap;
}

/* ------------------------------------------------------- the figure */

.fig{margin:36px 0 0}
.fig-head{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig-caption{
  font-size:12.5px;line-height:1.6;
  color:var(--panel-muted);
  max-width:64ch;
  margin:14px 0 0;
}

/* the shared drawing vocabulary, so every figure reads in the same hand */
.fig .ink{stroke:var(--panel-ink);fill:none;stroke-width:1.5}
.fig .weak{stroke:var(--panel-line);fill:none;stroke-width:1}
.fig .acc{stroke:var(--emerald);fill:none;stroke-width:2}
.fig .acc-dash{stroke:var(--emerald);fill:none;stroke-width:2;stroke-dasharray:6 6}
.fig .fill-acc{fill:var(--emerald);stroke:none}
.fig .fill-card{fill:var(--panel-card);stroke:none}
.fig text{fill:var(--panel-ink);font-size:12px}
.fig .t-lab{fill:var(--panel-muted);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.fig .t-acc{fill:var(--emerald)}
.fig .t-muted{fill:var(--panel-muted)}
.fig .t-big{font-size:130px;font-weight:300;letter-spacing:-.045em}
/* a tracked tag inside a drawing, and the size for a single digit or an aside */
.fig .t-tag{font-size:11px;letter-spacing:.16em}
.fig .t-sm{font-size:11px}
.fig .t-mid{text-anchor:middle}
.fig .t-letter{font-size:15px;font-weight:600}

/* The reveal. figs.js adds .fig-anim only when motion is allowed, so the
   start states below never apply to a reduced-motion visitor or when the
   script does not run: the figure is already in its finished state. */
.fig-anim .fx{opacity:0}
.fig-anim .fx-draw{stroke-dasharray:1;stroke-dashoffset:1}
.fig-anim .fx-grow{transform:scaleX(0);transform-origin:left center;transform-box:fill-box}
.fig-anim.is-in .fx{animation:fig-fade .5s ease forwards;animation-delay:calc(var(--i,0)*.11s)}
.fig-anim.is-in .fx-draw{animation:fig-draw .75s ease forwards;animation-delay:calc(var(--i,0)*.11s)}
.fig-anim.is-in .fx-grow{animation:fig-grow .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(var(--i,0)*.11s)}
@keyframes fig-fade{to{opacity:1}}
@keyframes fig-draw{to{stroke-dashoffset:0}}
@keyframes fig-grow{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .fig-anim .fx,.fig-anim .fx-draw,.fig-anim .fx-grow{
    opacity:1;stroke-dashoffset:0;transform:none;animation:none;
  }
}

/* --------------------------------------------- the measurement lists

   Three plain text blocks the argument needs: the short row of things a
   company already knows, the harder questions under it, and the numbered
   method. None of them is a card, a pill or a button. */

.knowns{
  display:flex;flex-wrap:wrap;
  gap:10px 0;
  margin:30px 0 0;
  list-style:none;padding:0;
}
.knowns li{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel-muted);
  padding:0 18px;
  border-left:1px solid var(--panel-line);
}
.knowns li:first-child{padding-left:0;border-left:0}

.qlist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 44px;
  margin:26px 0 0;
  list-style:none;padding:0;
}
.qlist li{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(18px,1.7vw,23px);
  font-weight:300;line-height:1.35;
  padding:16px 0;
  border-top:1px solid var(--panel-line);
  display:flex;gap:14px;align-items:baseline;
}
.qlist .step-n{font-size:11px;color:var(--emerald);flex:none}

.closer{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:clamp(18px,1.8vw,24px);
  font-weight:400;line-height:1.4;
  max-width:44ch;
  margin:34px 0 0;
  padding:0 0 0 18px;
  border-left:2px solid var(--emerald);
}
/* the closing quote now carries a line of its own under it, and a quiet
   prompt below that. The action reuses .start-small, so the hero keeps the
   only filled button on the page. */
.closer p{margin:0}
.closer-note{
  font-family:"Public Sans",system-ui,sans-serif;
  font-size:16px;font-weight:400;line-height:1.6;
  color:var(--panel-muted);
  margin:12px 0 0;max-width:54ch;
}
.closer-ask{margin:34px 0 0;font-size:17px;color:var(--panel-ink)}
.closer-act{margin-top:10px}

/* How we measure: one claim on the left, the seven steps on the right in
   two columns, each carrying the same emerald mark. */
.claim-split{align-items:start;gap:64px}
.claim-split .h-section{max-width:none;margin:0;font-size:clamp(26px,2.9vw,40px)}
/* Column first, not row first: the left column reads M, E, T and the right
   reads R, I, S, so scanning either one as a unit still spells the name. */
.method{margin:0;list-style:none;padding:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(3,auto);
  grid-auto-flow:column;
  gap:20px 36px}
.method li{display:grid}
/* the initial of each step is set in emerald, so the six of them read down
   the list as METRIS */
.method .cap{color:var(--emerald)}
.method b{
  font-family:var(--mono);
  font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  display:block;margin:0 0 6px;
}
.method div > span{color:var(--panel-muted);font-size:14.5px;line-height:1.5;display:block}

/* The ROI arithmetic row. Three of the five numbers are inputs. The cell is
   a grid so the Illustrative tag can sit beside its number in the markup,
   where a reader checking the source finds them together, while on screen it
   belongs under the label. */
.arith{
  display:flex;flex-wrap:wrap;align-items:flex-start;
  gap:18px 26px;
  margin:30px 0 0;
}
.arith .cell{
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:"val steps" "lab lab" "tag tag";
  justify-content:start;align-items:center;
  row-gap:8px;column-gap:10px;
}
.arith .v{
  grid-area:val;
  font-family:var(--mono);
  font-size:clamp(24px,2.7vw,36px);
  font-weight:400;letter-spacing:-.02em;line-height:1;
}
.arith .k{grid-area:lab;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-muted)}
.arith .illus{grid-area:tag;justify-self:start}
.arith .steps{grid-area:steps;display:flex;flex-direction:column;gap:4px}
.arith .op{font-family:var(--mono);font-size:22px;color:var(--emerald);align-self:start;padding:clamp(6px,1vw,14px) 0 0}

/* the four evidence bands, section 5 */
.bands{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:34px 0 0;
  list-style:none;padding:0;
}
.bands li{border-top:2px solid var(--emerald);padding:16px 0 0}
.bands li:nth-child(2){border-top-color:rgba(16,185,129,.55)}
.bands li:nth-child(3){border-top-color:rgba(16,185,129,.28)}
.bands li:nth-child(4){border-top-style:dashed;border-top-color:var(--panel-line)}
.bands b{
  font-family:var(--mono);
  display:block;
  font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  margin:0 0 8px;
}
.bands .band-line{display:block;color:var(--panel-muted);font-size:14px;line-height:1.55}
/* The tag sits under the example, in the same shape the ROI row uses. The
   four lines run to different lengths, so each band is a column and the tag
   is pushed to its foot: all four tags then share one baseline. */
.bands li{display:flex;flex-direction:column}
.bands .illus{margin:auto 0 0;padding-top:0;align-self:flex-start}
.bands .band-line{margin:0 0 12px}

/* the plain list used by "who it's for" and "what's included" */
.plainlist{margin:26px 0 0;list-style:none;padding:0;max-width:62ch}
.plainlist li{
  padding:12px 0 12px 26px;
  border-top:1px solid var(--panel-line);
  color:var(--panel-muted);
  font-size:16px;line-height:1.55;
  position:relative;
}
.plainlist li:before{
  content:"";
  position:absolute;left:0;top:21px;
  width:10px;height:1px;
  background:var(--emerald);
}

/* the small print that closes the session page */
.fineprint{margin:30px 0 0;font-size:13px;line-height:1.6;color:var(--panel-muted)}

/* the one line naming the hosts, under the closing card's button */
.hosted{margin:26px 0 0;font-size:14px;color:var(--panel-muted)}

@media (max-width:860px){
  .qlist{grid-template-columns:minmax(0,1fr)}
  .bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .method{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row;gap:22px}
  .claim-split{gap:34px}
}
@media (max-width:620px){
  .bands{grid-template-columns:minmax(0,1fr)}
  .knowns li{padding:0 12px}
}

/* ------------------------------------------------ the last few details

   Odds and ends the two measurement pages need, kept together rather than
   scattered through the file above. */

/* two fact lines stacked, each keeping its own emerald rule */
.detail-stack{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:30px 0 0}
.detail-stack .details{margin:0}

/* the arithmetic cells hug their content so the Illustrative tag does not
   stretch to the width of the cell */

/* .bands span and .method span both set a color, so the amber placeholder
   has to be named at the same depth to be seen */
.method .tbd{color:var(--panel-tbd)}

/* the figure inside the closing card is centered with everything else */
.closing .fig{max-width:340px;width:100%;margin:0 0 20px}
.closing .fig-head{justify-content:center}
.closing .fig-caption{text-align:center;margin-left:auto;margin-right:auto}

/* Short laptop windows. Every panel has to hold to one screen, because a
   sticky panel taller than the window hides whatever falls past the fold.
   The figures carry most of the height, so they are the ones that give. */
@media (max-height:810px) and (min-width:768px){
  .fig{margin-top:26px}
  .fig-head{margin-bottom:10px}
  .fig-caption{margin-top:10px;font-size:12px}
  .stack .fig svg{max-width:84%}
  .arith{margin-top:22px;gap:16px 28px}
  .closing{padding:clamp(28px,3.4vw,46px)}
  .closing .fig{max-width:290px;margin-bottom:16px}
  .closing .fig svg{max-width:100%}
  .hosted{margin-top:20px}
}
@media (max-height:740px) and (min-width:768px){
  .stack .fig svg{max-width:72%}
  .arith{gap:12px 22px}
  .arith .v{font-size:clamp(22px,2.4vw,32px)}
}

/* Phones. A diagram drawn to be read across the page cannot shrink to 340px
   and still say anything, so the wide ones hold their proportions and scroll
   sideways instead. The closing card's mark is small enough to stay put. */
@media (max-width:700px){
  .fig{overflow-x:auto;overflow-y:hidden}
  .fig > svg{min-width:520px}
  .closing .fig{overflow:visible}
  .closing .fig > svg{min-width:0}
  .fig-caption{font-size:12.5px}
  .arith{gap:18px 24px}
  .qlist li{font-size:18px}
}

/* ==================================================== the Offerings page

   Four groups, each a row of the same cards the Home page uses. An offering
   that cannot be bought or used today is a plain span, never a link, so a
   reader of the markup can tell the two apart as easily as a visitor can. */

.page--wide .wrap{max-width:var(--wrap)}
.offer-group{margin:56px 0 0}
.offer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.offer-grid .qcard{display:flex;flex-direction:column}
.offer-grid .qcard h3{margin-top:0}
.page .offer-grid .qcard p{font-size:15px;line-height:1.55;color:var(--panel-muted);margin:0}
.offer-grid .card-more{padding:20px 0 0}
@media (max-width:760px){
  .offer-grid{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------- the return loop's triggers

   On the figure itself the six triggers are set along the dashed return
   curve, each on its own point. Below 768px that curve is too small to carry
   text, so the labels come off it and become a wrapped row of chips. The
   chip is the Illustrative tag's shape, in emerald, rather than a new one. */

.fig .t-trig{font-size:10px;letter-spacing:.04em}
.triggers{display:none}

@media (max-width:767px){
  .trig-svg{display:none}
  .triggers{
    display:flex;flex-wrap:wrap;gap:8px;
    margin:14px 0 0;padding:0;list-style:none;
  }
  .triggers .illus{
    color:var(--emerald);
    border-color:var(--emerald);
    text-transform:none;
    letter-spacing:.04em;
  }
}

/* what METRIS measures, sitting under the caption on the same left edge */
.measures{margin:28px 0 0}
.measures .eyebrow{margin-bottom:12px}
.measures-body{
  font-size:12.5px;line-height:1.6;
  color:var(--panel-muted);
  max-width:60ch;
  margin:14px 0 0;
}

/* Three items in the header pill need their room back on a phone. Without
   this the pill runs past the header's own right padding at 390px. */
@media (max-width:480px){
  .nav .nav-pill a,
  .nav .nav-pill button{padding-left:12px;padding-right:12px;font-size:13px}
}

/* =============================================== the live ROI section

   Nothing here is stored or sent anywhere. The controls only change what
   Fig 03 draws, so a visitor can watch one number turn into a range. */

/* an editable number keeps the look of a printed one until it is touched */
input.v{
  -webkit-appearance:none;appearance:none;
  width:4.4ch;
  color:var(--panel-ink);
  background:transparent;
  border:0;border-bottom:1px dashed var(--panel-line);
  border-radius:0;
  padding:0 0 3px;
  font-variant-numeric:tabular-nums;
}
#roi-tasks{width:7.2ch}
input.v:hover{border-bottom-color:var(--emerald)}
input.v:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--emerald)}
input.v:focus-visible{box-shadow:0 3px 0 -1px var(--emerald)}
.stepper{
  font-family:var(--mono);
  width:24px;height:20px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  color:var(--panel-muted);
  background:transparent;
  border:1px solid var(--panel-line);
  border-radius:6px;
  cursor:pointer;font-size:13px;
}
.stepper:hover{border-color:var(--emerald);color:var(--panel-ink)}
.stepper:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--emerald)}

.roi-eyebrow{margin:38px 0 18px}
.roi-qs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 44px}
.roi-q{display:flex;flex-direction:column;gap:12px}
.roi-qhead{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.roi-qhead label,.roi-qlabel{
  font-family:"Manrope",system-ui,sans-serif;
  font-size:16px;font-weight:500;line-height:1.4;
  color:var(--panel-ink);
}
.roi-qhead .illus{flex:none}
.roi-out{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-size:12.5px;
  color:var(--panel-muted);
}

.roi-q input[type=range]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:20px;margin:0;background:transparent;
}
.roi-q input[type=range]::-webkit-slider-runnable-track{
  height:3px;border-radius:2px;
  background:linear-gradient(to right,var(--emerald) 0 var(--pct,50%),var(--panel-line) var(--pct,50%) 100%);
}
.roi-q input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--emerald);border:0;cursor:pointer;margin-top:-7.5px;
}
.roi-q input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--panel-line)}
.roi-q input[type=range]::-moz-range-progress{height:3px;border-radius:2px;background:var(--emerald)}
.roi-q input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--emerald);border:0;cursor:pointer}
.roi-q input[type=range]:focus{outline:none}
.roi-q input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--ring)}
.roi-q input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--ring)}

/* Two handles on one track are two real range inputs stacked, so each handle
   keeps its own keyboard focus and announces its own value. */
.dual{position:relative;height:20px}
.dual .dual-track,.dual .dual-fill{position:absolute;top:8.5px;height:3px;border-radius:2px}
.dual .dual-track{left:0;right:0;background:var(--panel-line)}
.dual .dual-fill{background:var(--emerald)}
.dual input[type=range]{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.dual input[type=range]::-webkit-slider-runnable-track{background:transparent}
.dual input[type=range]::-webkit-slider-thumb{pointer-events:auto}
.dual input[type=range]::-moz-range-track{background:transparent}
.dual input[type=range]::-moz-range-progress{background:transparent}
.dual input[type=range]::-moz-range-thumb{pointer-events:auto}

.roi-pair{display:flex;gap:22px;flex-wrap:wrap}
.roi-money{display:flex;align-items:baseline;gap:7px}
.roi-money label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--panel-muted)}
.roi-money .cur{font-family:var(--mono);color:var(--panel-muted);font-size:15px}
.roi-money input{
  -webkit-appearance:none;appearance:none;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-size:17px;width:4.6ch;
  color:var(--panel-ink);background:transparent;
  border:0;border-bottom:1px dashed var(--panel-line);
  padding:0 0 3px;
}
.roi-money input:hover{border-bottom-color:var(--emerald)}
.roi-money input:focus{outline:none;border-bottom-style:solid;border-bottom-color:var(--emerald)}
.roi-money input:focus-visible{box-shadow:0 3px 0 -1px var(--emerald)}

.roi-reset{margin:22px 0 0}
.roi-reset button{
  font-family:inherit;font-size:13.5px;
  color:var(--emerald);background:none;border:0;
  border-bottom:1px solid var(--emerald);
  padding:0 0 2px;cursor:pointer;
}
.roi-reset button:focus-visible{outline:none;box-shadow:var(--ring)}
.roi-note{
  margin:20px 0 0;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:17px;color:var(--emerald);
}

/* Fig 03 is three separate drawings, so they sit in a row on a desktop and
   stack on a phone without anything being redrawn. */
.roi-fig{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) 32px minmax(0,1fr);
  align-items:center;
}
.roi-stage svg,.roi-arrow svg{display:block;width:100%;height:auto;overflow:visible}
.fig .t-naive{font-family:var(--mono);font-size:22px;fill:var(--panel-ink)}
.fig .t-struck{text-decoration:line-through}
.fig .t-real{font-family:var(--mono);font-size:19px;fill:var(--panel-ink)}

/* this section carries the least empty space above it of any on the page:
   the controls start straight after the heading */
.roi-panel{padding-top:calc(var(--nav-h) + 26px)}

@media (max-width:767px){
  .roi-qs{grid-template-columns:minmax(0,1fr);gap:24px}
  .roi-fig{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .roi-arrow{justify-self:center;width:32px;transform:rotate(90deg)}
  .arith{gap:18px 26px}
  /* the three drawings stack, so they must not also scroll sideways */
  .roi-panel .fig{overflow:visible}
}

/* Below 1024px the arithmetic row wraps, and an operator left at the end of
   a line points at nothing. The operators are decoration the labels already
   carry in words, so they step out rather than mislead. */
@media (max-width:1023px){
  .arith .op{display:none}
}

/* ------------------------------------------------ Reserve buttons

   Every Reserve button carries both of its labels. The markup is the closed
   state, so without a Payment Link, or without the script, the button shows
   "Registration opens soon", has no link and cannot be clicked. site-config.js
   adds .is-open and the link when paymentLinkUrl is set. */
[data-reserve] .r-on{display:none}
[data-reserve].is-open .r-on{display:inline}
[data-reserve].is-open .r-off{display:none}

/* the header sits on no panel, so its closed button names its own colors */
.nav-cta.btn--off{
  background:transparent;
  color:var(--muted-navy);
  border:1px dashed var(--line-navy);
  padding:9px 19px;
  cursor:not-allowed;
}

/* the Workshop page's reserve card: the facts, then the one button */
.reserve-card{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.reserve-card .details{margin:0}

/* The sticky panel. The grid sizes each cell to its own content, so the aside
   was only as tall as the panel inside it and the panel had no room to stick:
   it scrolled away with the top of the page. Stretching the aside to the
   full height of the row gives the panel the whole page to stick within. */
.session-grid > aside{align-self:stretch}

/* the reserve card's facts break between facts, never inside one */
.reserve-card .details time,
.reserve-card .details span{white-space:nowrap}

/* The About page reel pulls back by the page's side padding to run edge to
   edge. That padding is 18px below 560px, not 24px, so the pull matches it.
   This sits after the base .reel rule on purpose: it has to come later. */
@media (max-width:560px){
  .reel{margin:0 -18px}
}

/* A smaller version of the one button, for use inside a card. */
.btn--sm{padding:11px 22px;font-size:14px}
.offer-grid .btn{margin:auto 0 0;align-self:flex-start}

/* The Workshop page no longer has a bar fixed to the bottom on a phone, so
   the page no longer leaves room for one. */
.talk-foot{margin:30px 0 0}


/* ------------------------------------------- the decision home page

   Added for the hero, Who we serve, How it works and Where to start. No new
   card or button shape: the three cards reuse .qcard and .btn--sm. What is
   new here is layout, and the four states a condition can be in. */

/* The hero is the first screen and holds only the heading, the paragraph and
   the two buttons. svh rather than vh, so a phone's shrinking toolbar does
   not cut it. min-height, so either screen grows with its content instead of
   clipping it. */
/* Below 767px the stacking scroll is switched off and panels drop to
   min-height:0, at a specificity these two have to match to keep their
   screen. They still grow past it when the content is taller. */
.hero--decision,
.fig-panel,
.stack > .hero--decision,
.stack > .fig-panel{min-height:100svh}
.hero--decision{overflow:visible}

/* One width for the whole hero block. "Some need a decision." measures a
   steady 9.903em of the headline's own size at every desktop width, so the
   shared edge can be expressed from that size rather than measured in JS.
   The paragraph and the decision strip both take it, so the three share a
   left and a right edge. One gap value sits above the paragraph and above
   the buttons, so those two spaces are equal by construction. */
.hero--decision{
  --h-size:clamp(3.5rem,8vw,8rem);
  --hero-w:calc(var(--h-size) * 9.903);
  --hero-gap:30px;
}
.hero--decision .h-display{
  font-size:var(--h-size);
  line-height:1.0;
  letter-spacing:-.035em;
}
.hero--decision .lede{
  font-size:clamp(1.25rem,1.5vw,1.6rem);
  line-height:1.45;
  max-width:var(--hero-w);
  margin-top:var(--hero-gap);
}
.hero--decision .hero-actions{margin-top:var(--hero-gap)}

/* The figure gets a screen to itself. Heading, drawing and caption are one
   group, centered together, so there is no empty band above them: the top
   padding only clears the fixed bar, and the panel's own centering does the
   rest. */
.fig-panel{padding-top:var(--nav-h);padding-bottom:0}
.fig-panel .fig-heading{margin:0 0 34px;max-width:24ch}
.fig-panel .fig{margin:0;width:100%}

/* Two drawings of the same five conditions: one across, one stacked. Below
   700px every wide figure on the site keeps its proportions and scrolls
   sideways, which would leave these labels at about five pixels. This figure
   owns a whole screen, so it stacks instead and stays readable. */
.fig svg.fig-tall{display:none}
@media (max-width:700px){
  .fig-panel .fig{overflow:visible}
  .fig-panel .fig svg.fig-wide{display:none}
  .fig-panel .fig svg.fig-tall{display:block;min-width:0}
}
.fig-panel .fig-caption{max-width:none;margin-top:22px;font-size:15px}

@media (max-width:640px){
  /* the headline stays large and simply wraps, and the whole block runs the
     full column rather than the headline's line width */
  .hero--decision{--h-size:clamp(2.75rem,11vw,4.5rem);--hero-w:100%}
  .hero--decision .h-display{font-size:var(--h-size)}
  .hero--decision .lede{font-size:1.2rem}
  .stack > .hero--decision,
  .stack > .fig-panel{min-height:100svh;height:auto}
}

/* the four states a condition can be in, plus the one that blocks */
.fig .st-proven{fill:var(--emerald);stroke:none}
.fig .st-claimed{fill:none;stroke:var(--emerald);stroke-width:2}
.fig .st-contra{fill:none;stroke:var(--panel-ink);stroke-width:2;stroke-dasharray:5 4}
.fig .st-unseen{fill:none;stroke:var(--panel-line);stroke-width:1.5;stroke-dasharray:2 5}
.fig .st-block{fill:none;stroke:var(--emerald);stroke-width:2.5}
.fig .t-on{fill:var(--navy)}
.fig .grey{fill:var(--panel-line);stroke:none}

/* Who we serve: three situations side by side */
.situations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin:36px 0 0}
.situation h3{font-size:21px;font-weight:600;line-height:1.25;margin:0 0 10px}
.situation p{color:var(--panel-muted);font-size:15px;line-height:1.55;margin:0}
.situation .fig{margin:22px 0 0}

/* How it works: the four steps */
.steps-num{margin:28px 0 0;padding:0 0 0 26px;max-width:58ch}
.steps-num li{margin:0 0 18px;line-height:1.55;font-size:16px;color:var(--panel-muted)}
.steps-num li b{color:var(--panel-ink);font-weight:600}
.steps-num li::marker{color:var(--emerald);font-family:var(--mono);font-size:14px}

/* Where to start */
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:34px 0 0}
.start-grid .qcard{display:flex;flex-direction:column}
.start-grid .qcard h3{margin-top:0}
.start-grid .btn{margin:auto 0 0;align-self:flex-start}
.not-line{margin:26px 0 0;font-size:14px;line-height:1.6;color:var(--panel-muted);font-style:italic;max-width:74ch}
.start-small{margin:30px 0 0;font-size:17px;color:var(--panel-ink)}
.start-small a{color:var(--emerald);text-decoration:underline;text-underline-offset:3px}

@media (max-width:900px){
  .situations{grid-template-columns:minmax(0,1fr);gap:40px}
  .start-grid{grid-template-columns:minmax(0,1fr)}
  .steps-num{max-width:none}
}


/* ----------------------------------------- the hero headline, in motion

   Each line rises once on load, then keeps a band of light crossing it. The
   two white lines carry a green band; the green line carries a near white
   one. The three sweeps start .15s apart, so the light reads as travelling
   down the headline. All three stop while the pointer is on it. Under
   reduced motion none of it runs and the lines sit in solid colour. */

.hero-h .h-l1,
.hero-h .h-l2{display:block;font-weight:500}
.hero-h .h-l3{font-weight:600;display:block}

@media (prefers-reduced-motion:no-preference){
  .hero-h .h-l1,
  .hero-h .h-l2,
  .hero-h .h-l3{opacity:0;transform:translateY(12px)}
  .hero-h .h-l1{animation:hero-rise .4s ease-out forwards}
  .hero-h .h-l2{animation:hero-rise .4s ease-out .15s forwards}
  .hero-h .h-l3{animation:hero-rise .4s ease-out .3s forwards}

  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .hero-h .h-l1,
    .hero-h .h-l2,
    .hero-h .h-l3{
      background-size:300% 100%;
      background-position:100% 0;
      background-repeat:no-repeat;
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }

    /* white lines, with a green band running through them */
    .hero-h .h-l1,
    .hero-h .h-l2{
      background-image:linear-gradient(100deg,
        var(--on-navy) 0%, var(--on-navy) 30%,
        #A7F3D0 42%,
        var(--emerald) 50%,
        #A7F3D0 58%,
        var(--on-navy) 70%, var(--on-navy) 100%);
    }

    /* the green line, with a near white band running through it */
    .hero-h .h-l3{
      background-image:linear-gradient(100deg,
        var(--emerald) 0%, var(--emerald) 30%,
        #A7F3D0 42%,
        #ECFDF5 50%,
        #A7F3D0 58%,
        var(--emerald) 70%, var(--emerald) 100%);
    }

    .hero-h .h-l1{animation:hero-rise .4s ease-out forwards, hero-sweep 3.5s ease-in-out .7s infinite}
    .hero-h .h-l2{animation:hero-rise .4s ease-out .15s forwards, hero-sweep 3.5s ease-in-out .85s infinite}
    .hero-h .h-l3{animation:hero-rise .4s ease-out .3s forwards, hero-sweep 3.5s ease-in-out 1s infinite}
  }

  .hero-h:hover .h-l1,
  .hero-h:hover .h-l2,
  .hero-h:hover .h-l3{animation-play-state:paused}
}

@keyframes hero-rise{to{opacity:1;transform:translateY(0)}}

/* one pass takes about 1.1s of the 3.5s, then the band waits off the edge */
@keyframes hero-sweep{
  0%{background-position:100% 0}
  32%{background-position:0% 0}
  100%{background-position:0% 0}
}


/* A short heading above each figure, saying what it shows. Smaller inside
   the three columns of Who we serve, where it sits under a card heading. */
.fig-title{
  font-size:clamp(19px,1.7vw,24px);
  font-weight:600;
  line-height:1.25;
  margin:34px 0 0;
  max-width:34ch;
  color:var(--panel-ink);
}
.fig-title + .fig{margin-top:14px}
.situation .fig-title{font-size:17px;margin-top:22px;max-width:none}
.situation .fig-title + .fig{margin-top:10px}

/* the two lines that close the offerings list */
.offer-limits{margin:40px 0 0;font-size:16px;line-height:1.6;color:var(--panel-muted);max-width:74ch}
.offer-who{margin:14px 0 0;font-size:16px;line-height:1.6;color:var(--panel-muted);max-width:62ch}
.page .hero-actions{margin-top:38px}


/* ------------------------------------------- the measurement home page

   The six by three grid, the sample result, the founder block and the two
   ways to start. On a phone the grid drops to one card per layer, so it is
   read down the page rather than across it. */

.measure-panel .wrap{max-width:var(--wrap)}
.mgrid{margin:34px 0 0;display:grid;gap:1px;background:var(--panel-line);border:1px solid var(--panel-line);border-radius:var(--r-card);overflow:hidden}
.mrow{display:grid;grid-template-columns:150px repeat(3,minmax(0,1fr));gap:1px;background:var(--panel-line)}
.mrow > span{background:var(--panel-bg);padding:16px 18px;font-size:14px;line-height:1.5;color:var(--panel-ink)}
.mrow .mlayer{font-weight:600;background:var(--panel-card)}
.mhead > span{background:var(--panel-card);font-size:13px}
.mhead b{display:block;font-weight:700;font-size:14px}
.mhead i{display:block;font-style:normal;color:var(--panel-muted);font-size:12.5px;margin-top:3px}
.mrow em{display:none}

/* the sample result */
.illus-tag{
  margin:16px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--panel-muted);
}
.sample-card{
  margin:26px 0 0;max-width:80ch;
  background:var(--panel-card);border:1px solid var(--panel-line);
  border-radius:var(--r-card);padding:34px 36px;
}
.sample-card h3{font-size:clamp(21px,2vw,27px);font-weight:600;margin:0 0 6px}
.sample-list{margin:18px 0 0}
.sample-list dt{
  margin:20px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--emerald);
}
.sample-list dd{margin:7px 0 0;font-size:16px;line-height:1.6;color:var(--panel-ink)}

/* the founder */
.founder-lede{max-width:none}
.founder-photo{width:100%;height:auto;display:block;border-radius:var(--r-card)}

/* two ways to start */
.start-who{margin:26px 0 0;font-size:16px;line-height:1.6;color:var(--panel-muted);max-width:62ch}

@media (max-width:860px){
  /* one card per layer: the column headings go, and each cell names its own */
  .mgrid{gap:16px;background:none;border:0;border-radius:0;overflow:visible}
  .mhead{display:none}
  .mrow{
    grid-template-columns:minmax(0,1fr);gap:0;background:none;
    border:1px solid var(--panel-line);border-radius:var(--r-card);overflow:hidden;
  }
  .mrow .mlayer{font-size:17px;padding:14px 18px}
  .mrow > span + span{border-top:1px solid var(--panel-line)}
  .mrow em{
    display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--panel-muted);margin-bottom:5px;
  }
  .sample-card{padding:26px 22px}
}

/* the three measurements, side by side and then stacked. Reuses .start-grid
   and .qcard, so no new card shape. */
.measure-three{margin-top:38px}
.measure-three .qcard h3{font-size:clamp(22px,2vw,28px);margin:0 0 10px}
.measure-three .qcard p{font-size:16px;line-height:1.6}

/* the one paragraph under "Why we measure": a readable measure, no card */
.why-lede{max-width:72ch;margin-top:28px}

/* the argument on the left, the loop it implies on the right, and the loop
   under the text once .split drops to one column at 900px */
.why-split{grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:48px}
.cycle{list-style:none;margin:0;padding:0}
.cycle li{
  position:relative;
  margin-left:4px;padding:0 0 30px 26px;
  border-left:1px solid rgba(16,185,129,.4);
  color:var(--panel-muted);font-size:16px;line-height:1.45;
}
.cycle li:last-child{border-left-color:transparent;padding-bottom:0}
.cycle li::before{
  content:"";position:absolute;left:-5px;top:.36em;
  width:9px;height:9px;border-radius:999px;background:var(--emerald);
}

@media (max-width:900px){
  .why-split{grid-template-columns:minmax(0,1fr);gap:36px}
}

/* the seven decisions: names only, in a simple grid */
.decisions{
  list-style:none;margin:38px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.decisions li,
.decision-card{
  background:var(--panel-card);border:1px solid var(--panel-line);
  border-radius:calc(var(--r-card) / 2);padding:20px 22px;
  font-size:17px;line-height:1.4;font-weight:500;color:var(--panel-ink);
}
/* where the names open a window, the button is the card and the li is bare */
.decisions--open li{background:none;border:0;padding:0}
.decision-card{
  display:block;width:100%;text-align:left;
  font-family:inherit;cursor:pointer;
}
.decision-card:hover{border-color:var(--emerald)}
.decision-card:focus-visible{outline:none;box-shadow:var(--ring)}
.dec-sub{margin-top:44px}
/* the first group is four, so it fills one row instead of leaving an orphan */
.decisions--four{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:860px){
  .decisions,
  .decisions--four{grid-template-columns:minmax(0,1fr);gap:10px}
  .decisions li,
  .decision-card{padding:16px 18px;font-size:16px}
  .decisions--open li{padding:0}
}

/* ------------------------------------------- the Industries we serve menu

   "Industries we serve" is the only item the menu bar ever shows for this
   group. Life sciences and Healthcare are stacked in a panel that opens
   over the page, at every width, so the fixed header keeps the height that
   every page offsets its content by. */

.nav-drop{position:relative;display:inline-flex}
/* a display rule beats the hidden attribute, so hidden has to be said */
.nav-drop[hidden]{display:none}
.nav-dropbtn::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}

.nav-menu{
  position:absolute;top:calc(100% + 10px);left:0;
  display:none;flex-direction:column;gap:2px;min-width:190px;z-index:60;
  padding:6px;border:1px solid var(--pill-line);border-radius:14px;
  background:var(--navy);box-shadow:0 14px 34px rgba(0,0,0,.4);
}
.page .nav-menu{background:var(--card-cream);box-shadow:0 14px 34px rgba(14,31,59,.16)}
.nav-dropbtn[aria-expanded="true"] + .nav-menu{display:flex}
.nav-menu a{display:block;padding:9px 14px;border-radius:9px;white-space:nowrap}
.nav-menu a:hover{background:var(--pill-fill)}

/* the Learn menu carries a line of explanation under each name, so its
   items are two lines rather than one and the panel is wider */
.nav-menu--rich{min-width:0;width:min(360px, calc(100vw - 28px));padding:8px}
.nav-menu--rich a{white-space:normal;padding:11px 12px;border-radius:10px}
.nav-menu--rich b{
  display:block;font-family:"Manrope",system-ui,sans-serif;
  font-size:14.5px;font-weight:600;line-height:1.3;color:var(--pill-ink-hover);
}
.nav-menu--rich a span{
  display:block;margin-top:3px;
  font-size:12.5px;line-height:1.45;color:var(--pill-ink);
}
.nav-menu--rich a:hover b,
.nav-menu--rich a:focus-visible b{color:var(--pill-ink-hover)}
.nav-menu--rich a:focus-visible{outline:none;box-shadow:var(--ring)}

/* the Services menu: two lists side by side, each under its own heading,
   so either list can grow without the panel being redrawn. On a phone the
   two lists stack, industry first. */
.nav-dropbtn[aria-expanded="true"] + .nav-menu--cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;
}
.nav-menu--cols{width:min(600px, calc(100vw - 28px))}
.nav-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.nav-col-h{
  display:block;padding:10px 12px 4px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--emerald);
}
@media (max-width:599px){
  .nav-dropbtn[aria-expanded="true"] + .nav-menu--cols{grid-template-columns:minmax(0,1fr)}
}

@media (min-width:900px){
  /* room enough to hang it centred under its own button */
  .nav-menu{left:50%;transform:translateX(-50%)}
}

@media (max-width:899px){
  /* the items will not sit beside the wordmark, so the pill takes a row of
     its own and wraps. Every page offsets its content by --nav-h, so the
     token has to cover the tallest the header can get. nav-drop.js measures
     the header and tightens this to the real height; these values are the
     fallback when that script has not run. */
  :root{--nav-h:210px}
  .nav{flex-wrap:wrap;height:auto;align-items:center;padding-top:12px;padding-bottom:12px}
  .nav-pill{order:3;width:100%;margin-top:12px;flex-wrap:wrap;justify-content:flex-start}
  /* the button can end up anywhere along the row, so the panel hangs off the
     header itself and spans it, rather than off the button and off screen */
  .nav-drop{position:static}
  .nav-menu{left:14px;right:14px;top:calc(100% + 4px);min-width:0}
  .nav-menu--cols{width:auto}
}

@media (max-width:360px){
  /* the smallest phones still in use: the pill gives back some of its
     padding so the four items keep well clear of the edge */
  .nav .nav-pill a,
  .nav .nav-pill button{padding-left:9px;padding-right:9px}
}

/* the two industry pages */
.ind-lede{max-width:70ch;margin-top:26px}
.ind-gridh{margin-top:56px}

/* ------------------------------------- the four steps of a Decision Review

   A row on a wide screen, a column on a phone, with a short line running
   from each step to the next. The line is drawn in the grid gap, so it
   never takes part in the layout. */

.flow{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;margin:34px 0 0;list-style:none;
}
.flow li{position:relative}
.flow h3{font-size:19px;font-weight:600;line-height:1.25;margin:14px 0 8px}
.flow-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:999px;
  background:var(--emerald);color:var(--navy);
  font-size:15px;font-weight:700;
}
/* .qcard pads 30px down and 28px in, so the line meets the middle of the dot */
.flow li:not(:last-child)::after{
  content:"";position:absolute;background:var(--panel-line);
  left:100%;top:48px;width:20px;height:1px;
}
/* nothing to point at from the last item in a row */
.flow li:nth-child(3n)::after{content:none}

@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr);gap:18px}
  /* one column, so every step but the last points at the next one */
  .flow li:nth-child(3n)::after{content:""}
  .flow li:last-child::after{content:none}
  .flow li:not(:last-child)::after{
    left:45px;top:100%;width:1px;height:18px;
  }
}

/* ------------------------------------------------- the decision window

   One dialog, opened from any of the seven decision cards. It sits on the
   navy ground wherever it is opened from, so it sets the panel tokens on
   itself rather than inheriting them: the top layer is outside the panel.
   Green appears twice only, on the status pill and on the button. */

.dwin{
  --panel-ink:var(--on-navy);
  --panel-muted:var(--muted-navy);
  --panel-line:var(--line-navy);
  --panel-card:var(--card-navy);

  width:min(680px, calc(100vw - 32px));
  max-height:min(86vh, 860px);
  padding:0;
  border:1px solid var(--line-navy);
  border-radius:var(--r-card);
  background:var(--navy);
  color:var(--on-navy);
  overflow:hidden;
  display:none;
}
.dwin[open]{display:flex;flex-direction:column}
.dwin::backdrop{background:rgba(6,14,28,.66)}

/* the title bar */
.dwin-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px 12px 16px;
  border-bottom:1px solid var(--line-navy);
  background:var(--card-navy);
  flex:0 0 auto;
}
.dwin-dots{display:inline-flex;gap:7px}
.dwin-dots i{width:11px;height:11px;border-radius:999px;display:block}
.dwin-dots i:nth-child(1){background:#8C4A4A}
.dwin-dots i:nth-child(2){background:#9A7636}
.dwin-dots i:nth-child(3){background:#4E7D68}
.dwin-app{
  font-family:var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size:12px;letter-spacing:.06em;color:var(--muted-navy);
  margin:0 auto 0 4px;
}
.dwin-x{
  font-family:inherit;font-size:20px;line-height:1;
  width:28px;height:28px;border-radius:8px;
  border:1px solid transparent;background:none;cursor:pointer;
  color:var(--muted-navy);
}
.dwin-x:hover{color:var(--on-navy);border-color:var(--line-navy)}
.dwin-x:focus-visible{outline:none;box-shadow:var(--ring)}

/* the body, which is the part that scrolls */
.dwin-body{padding:24px 26px 6px;overflow:auto;flex:1 1 auto}
.dwin-name{
  font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-navy);margin:0 0 10px;
}
.dwin-q{font-size:clamp(20px,2.2vw,25px);line-height:1.25;font-weight:400;margin:0 0 4px}
.dwin-h{
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-navy);margin:26px 0 8px;
}
.dwin-why{color:var(--muted-navy);font-size:16px;line-height:1.6}
.dwin-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.dwin-list li{
  color:var(--muted-navy);font-size:15px;line-height:1.55;
  padding-left:18px;position:relative;
}
.dwin-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--line-navy);
}
.dwin-find{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.dwin-pill{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--emerald-soft);border:1px solid var(--emerald);
  color:var(--emerald);
  font-size:13px;font-weight:600;white-space:nowrap;
}
.dwin-findline{color:var(--panel-ink);font-size:15px;line-height:1.55;flex:1 1 14ch}
.dwin-note{margin-top:10px;font-size:12px;color:var(--muted-navy)}

.dwin-foot{
  display:flex;justify-content:flex-end;
  padding:18px 26px 22px;flex:0 0 auto;
}

/* a short rise, and nothing at all for anyone who asked for less motion */
@keyframes dwin-in{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
@keyframes dwin-dim{from{opacity:0}to{opacity:1}}
.dwin[open]{animation:dwin-in .18s ease-out}
.dwin[open]::backdrop{animation:dwin-dim .18s ease-out}
@media (prefers-reduced-motion:reduce){
  .dwin[open],.dwin[open]::backdrop{animation:none}
}

@media (max-width:560px){
  /* a sheet across the bottom, with room for the home indicator */
  .dwin{
    width:100%;max-width:100%;
    max-height:min(88vh, 100dvh - 20px);
    margin:auto auto 0;
    border-radius:16px 16px 0 0;
    border-bottom:0;
  }
  .dwin-body{padding:20px 18px 4px}
  .dwin-foot{padding:14px 18px calc(18px + env(safe-area-inset-bottom))}
  .dwin-foot .btn{width:100%;text-align:center}
  @keyframes dwin-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* ----------------------------------------------------- the masterclass

   The registration panel is the right column on a wide screen and sits
   directly under the hero on a phone. The shared .session-grid hides its
   aside below 1040px in favour of a fixed bar; this page keeps the panel
   instead, because the panel is the point of the page. */

.masterclass .mc-hero{grid-column:1;grid-row:1}
.masterclass > aside{grid-column:2;grid-row:1 / span 2}
.masterclass .session-main{grid-column:1;grid-row:2;margin-top:64px}

.mc-facts{
  margin:22px 0 0;font-size:15px;color:var(--muted-navy);
  letter-spacing:.01em;
}
.mc-reg-h{font-size:21px;font-weight:600;line-height:1.25;margin:0 0 6px}
.mc-next{margin:0 0 20px}

.mc-field{display:grid;gap:6px;margin:0 0 14px}
.mc-field label{font-size:13px;font-weight:600;color:var(--muted-navy);line-height:1.35}
.mc-field input,
.mc-field textarea{
  font-family:inherit;font-size:15px;color:var(--on-navy);
  background:var(--navy);
  border:1px solid var(--line-navy);border-radius:10px;
  padding:10px 12px;width:100%;
}
.mc-field textarea{resize:vertical;min-height:72px}
.mc-field input:disabled,
.mc-field textarea:disabled{opacity:.6;cursor:not-allowed}

/* what is included: two columns on a wide screen, one on a phone */
.checks{list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.checks li{
  position:relative;padding-left:26px;
  font-size:16px;line-height:1.55;color:var(--panel-muted);
}
.checks li::before{
  content:"";position:absolute;left:2px;top:.36em;
  width:11px;height:6px;
  border-left:2px solid var(--emerald);border-bottom:2px solid var(--emerald);
  transform:rotate(-45deg);
}

@media (max-width:1040px){
  /* the panel stacks under the hero rather than disappearing */
  .masterclass > aside{grid-column:1;grid-row:auto}
  .masterclass .mc-hero,
  .masterclass .session-main{grid-column:1;grid-row:auto}
  .masterclass .aside-panel{display:block;position:static;margin:34px 0 0}
  .masterclass .session-main{margin-top:56px}
}

@media (max-width:720px){
  .checks{grid-template-columns:minmax(0,1fr);gap:11px}
}

/* what a Decision Review hands back: a plain list, two columns when there
   is room for them */
.receive{list-style:none;margin:30px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 30px}
.receive li{
  position:relative;padding-left:24px;
  font-size:16px;line-height:1.55;color:var(--panel-muted);
}
.receive li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:9px;height:1px;background:var(--emerald);
}

/* the three questions under the quote. <details> gives the open and close
   on click, tap and keyboard without a script. */
.qa{margin:30px 0 0;max-width:56ch}
.qa-item{border-top:1px solid var(--panel-line)}
.qa-item:last-child{border-bottom:1px solid var(--panel-line)}
.qa-item summary{
  list-style:none;cursor:pointer;
  padding:15px 28px 15px 0;position:relative;
  font-size:16px;font-weight:600;line-height:1.4;color:var(--panel-ink);
}
.qa-item summary::-webkit-details-marker{display:none}
.qa-item summary::after{
  content:"";position:absolute;right:6px;top:calc(50% - 4px);
  width:8px;height:8px;
  border-right:1.5px solid var(--emerald);border-bottom:1.5px solid var(--emerald);
  transform:rotate(45deg);transform-origin:center;
}
.qa-item[open] summary::after{transform:rotate(-135deg)}
.qa-item summary:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.qa-item p{
  margin:0 0 16px;padding-right:28px;
  font-size:15.5px;line-height:1.6;color:var(--panel-muted);
}

@media (max-width:720px){
  .receive{grid-template-columns:minmax(0,1fr);gap:11px}
}

/* ================================================== the service pages

   Built from the Home page's panels and cards. Two additions: the opening
   pair of cards sits two across rather than three, and a second heading
   inside one panel needs room above it. */
.svc-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-h2{margin-top:72px}
@media (max-width:900px){
  .svc-two{grid-template-columns:minmax(0,1fr)}
  .svc-h2{margin-top:52px}
}

/* The service pages open on the Home page's hero. Their headlines run a
   full sentence rather than three short lines, so the type steps down from
   the Home page's size and the headline wraps at about eighteen characters. */
.svc-hero{--h-size:clamp(2.75rem,5.4vw,5.75rem)}
.svc-hero .h-display{max-width:18ch}
.svc-hero .lede{max-width:62ch}
@media (max-width:640px){
  .svc-hero{--h-size:clamp(2.25rem,9vw,3.25rem)}
}

/* ================================================== Insights

   The index is one navy panel holding a field of dots, one per planned
   part, along a path that snakes across the page and becomes one column on
   a phone. insights.js lays it out. A published dot is filled green with
   its number, "PART n" and the title below, all one link, with the summary
   in a tooltip. The next part is a green ring marked NEXT. Planned parts
   are small muted rings. The path is solid green between published dots
   and dashed after them. A post is one cream panel that reads top to
   bottom: a link back to Insights, the part line, the title, byline, the
   figure at full width, its caption, the text, the note, the button and
   the link back again. */
.insights-panel{align-items:flex-start}
.field-wrap{position:relative;z-index:1;width:100%;max-width:1600px;margin:0 auto}

/* the published posts as plain links: shown only without JavaScript, and
   kept in the page, out of sight, for screen readers and crawlers */
.visually-hidden{
  position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.field-plain{list-style:none;margin:0 auto;padding:0;max-width:var(--wrap);display:grid;gap:16px}
.field-plain a{color:var(--on-navy);font-size:18px;text-decoration:underline;text-underline-offset:3px}
.field{position:relative;width:100%}
.field-path{position:absolute;left:0;top:0;overflow:visible}
.field-path path{fill:none}
.field-path .seg-done{stroke:var(--emerald);stroke-width:3}
.field-path .seg-todo{stroke:rgba(148,163,184,.42);stroke-width:2;stroke-dasharray:7 7}
.field-dots{list-style:none;margin:0;padding:0}
.fd{position:absolute;width:0;height:0}

.fd-dot{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--navy);
  font-family:"Manrope",system-ui,sans-serif;line-height:1;
}
.is-planned .fd-dot{width:20px;height:20px;border:2px solid rgba(148,163,184,.55)}
.is-next .fd-dot{width:40px;height:40px;border:2.5px solid var(--emerald);color:var(--emerald);font-size:15px;font-weight:600}
.is-published .fd-dot{
  width:46px;height:46px;background:var(--emerald);color:var(--navy);
  font-size:18px;font-weight:800;
  box-shadow:0 0 0 12px rgba(16,185,129,.16),0 0 0 26px rgba(16,185,129,.07);
  transition:box-shadow .15s ease;
}

.fd-part{
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-navy);white-space:nowrap;
}
.is-next .fd-part{position:absolute;top:36px;left:0;transform:translateX(-50%);color:var(--muted-navy)}

/* the published dot, its label and its title are one link, centered under
   the dot and as wide as one step of the path, so titles never touch */
.fd-link{
  position:absolute;top:-23px;left:calc(var(--step) / -2 + 6px);width:calc(var(--step) - 12px);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  color:inherit;text-decoration:none;cursor:pointer;
}
.fd-link .fd-dot{position:static;transform:none;flex:none}
.fd-link .fd-part{margin-top:24px}
.fd-title{
  margin-top:8px;font-size:14px;line-height:1.4;color:var(--on-navy);
}
.fd-link:hover .fd-dot,
.fd-link:focus-visible .fd-dot{box-shadow:0 0 0 12px rgba(16,185,129,.26),0 0 0 26px rgba(16,185,129,.12)}
.fd-link:focus-visible{outline:none}
.fd-link:focus-visible .fd-dot{box-shadow:0 0 0 12px rgba(16,185,129,.26),0 0 0 26px rgba(16,185,129,.12),var(--ring)}

/* the one-line summary, above the dot on hover and keyboard focus */
.fd-tip{
  position:absolute;top:-34px;left:50%;transform:translate(-50%,-100%);
  width:max-content;max-width:280px;padding:10px 13px;border-radius:9px;
  background:var(--cream);color:var(--on-cream);
  font-size:13.5px;font-weight:500;line-height:1.45;text-align:left;
  box-shadow:0 10px 26px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease;z-index:5;
}
.at-start .fd-tip{left:0;transform:translateY(-100%)}
.at-end .fd-tip{left:auto;right:0;transform:translateY(-100%)}
.fd-link:hover .fd-tip,
.fd-link:focus-visible .fd-tip{opacity:1;visibility:visible}
.fd-link:hover,.fd-link:focus-visible{z-index:6}
.fd:has(.fd-link:hover),.fd:has(.fd-link:focus-visible){z-index:6}

.fd-section{
  position:absolute;bottom:96px;left:-23px;white-space:nowrap;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-navy);
}
.fd-section.is-right{left:auto;right:-23px}

/* one column on a phone: the dot on the left, its label and title beside */
.is-column .fd-link{
  left:-23px;width:min(320px, calc(100vw - 90px));
  display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:18px;
  align-items:start;text-align:left;
}
.is-column .fd-link .fd-dot{grid-row:1 / span 2}
.is-column .fd-link .fd-part{margin-top:2px}
.is-column .fd-title{margin-top:4px}
.is-column .is-next .fd-part{top:-7px;left:34px;transform:none}
.is-column .fd-section{bottom:auto;top:-46px;left:41px}
.is-column .is-published .fd-section{top:-66px}
.is-column .fd-tip{left:0;top:-30px;transform:translateY(-100%);max-width:calc(100vw - 60px)}

@media (prefers-reduced-motion:reduce){
  .fd-tip,.is-published .fd-dot{transition:none}
}

.post-meta{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-cream)}

.post article{max-width:960px}
.post article > .post-back:first-child{margin:0 0 26px}
.post .hero-actions + .post-back{margin-top:34px}
.post article > .post-meta{margin:0 0 14px}
.post-byline{margin:16px 0 0;font-family:var(--mono);font-size:13px;color:var(--panel-muted)}
.post-fig{margin:36px 0 0}
.post-fig img{display:block;width:100%;height:auto;border-radius:var(--r-card);border:1px solid var(--panel-line)}
.post-fig .fig-caption{margin-top:14px}
.post-body{margin:36px 0 0;max-width:68ch}
.post-body p{font-size:18px;line-height:1.65;color:var(--panel-ink);margin:0 0 18px}
.post-body h2{font-family:"Manrope",system-ui,sans-serif;font-size:clamp(22px,2vw,28px);font-weight:600;line-height:1.25;margin:40px 0 14px}
.post-body ul{margin:0 0 22px;padding:0 0 0 22px}
.post-body ul li{font-size:18px;line-height:1.6;color:var(--panel-ink);margin:0 0 8px}
.post-body ul li::marker{color:var(--emerald)}
.post-body .steps-num{margin:8px 0 26px;max-width:none}
.post-body .steps-num li{font-size:17px;color:var(--panel-ink)}
.post-note{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--panel-muted);max-width:68ch}

/* the Client Community link in the header pill, marked with a lock */
.nav-lock{display:inline-flex;align-items:center;gap:6px}
.nav-lock svg{flex:none}

/* ------------------------------------------- emerald on light grounds */

/* Emerald text measures 2.3:1 on cream and 2.5:1 on white, under the 4.5:1
   WCAG AA asks for. On a light ground the words turn navy and the emerald
   stays as a mark beside them: a short bar before a label, a thick
   underline under a link. Navy grounds keep emerald text, which passes. */
:is(.panel--cream,.about-page) :is(.eyebrow,.about-role,.card-rank){color:var(--on-cream)}
:is(.panel--cream,.about-page) :is(.eyebrow,.about-role,.card-rank)::before{
  content:"";display:inline-block;vertical-align:middle;
  width:18px;height:2px;margin:0 10px 2px 0;background:var(--emerald);
}
.about-page .about-role .tm{color:inherit}
.panel--cream .start-small a{
  color:var(--on-cream);
  text-decoration:underline;text-decoration-color:var(--emerald);
  text-decoration-thickness:2px;text-underline-offset:4px;
}

/* The masterclass page sits on navy, but its ledes took the muted color
   meant for cream (2.8:1). They take the navy one. */
.masterclass .session-main .lede{color:var(--muted-navy)}