/* AUMENTOR design system.
   Brand is fixed by the corporate identity: HomePro blue and orange. Everything
   else is a cool neutral chosen to sit under that blue without fighting it.

   Two rules hold across the whole app:
     Orange is the attention colour and nothing else. It marks the one thing on a
     screen that needs a person. If orange is everywhere it stops meaning anything.
     Nothing is drawn as a filled bar unless the number behind it is real. A missing
     measure is drawn as a hatched slot, never as an empty bar that reads as zero. */

:root {
  color-scheme: light;

  /* brand */
  --brand: #1560AC;
  --brand-deep: #0A4894;
  /* What a solid brand button goes when the pointer is on it. Its own token
     rather than --brand-deep, because --brand-deep also paints the hero band,
     where the dark theme wants it LIGHTER than the brand - and a hover that
     goes lighter under white text is a label you cannot read. Light theme:
     the same colour it always was. */
  --brand-hover: #0A4894;
  --brand-ink: #063166;
  --brand-soft: #E8F1FA;
  --brand-line: #BFD9F0;
  --accent: #F58220;
  --accent-soft: #FFF1E2;
  --accent-ink: #8A4A0C;
  --accent-line: #F8CFA4;

  /* Neutrals carrying a trace of the brand hue, so the greys look chosen rather
     than borrowed. The page sits a step below white on purpose: with a light rail
     and white cards, a near-white page leaves nothing to lift off. */
  --bg: #F1F4F8;
  --surface: #FFFFFF;
  --surface-2: #F8FAFC;
  --sunken: #E9EEF5;
  --line: #DAE1EB;
  --line-soft: #EAEFF6;
  --ink: #111A24;
  --ink-2: #3E4C5E;
  --ink-3: #647486;
  --ink-4: #93A1B2;

  /* status */
  --good: #1E8E5A;
  --good-soft: #E4F4EC;
  --warn: #B4700E;
  --warn-soft: #FDF2DF;
  /* The ink that sits ON the soft surface. It used to be written into the
     banner rule as a hex, which meant the light theme's dark brown stayed put
     when the surface under it flipped to the dark theme's dark brown, and the
     sentence disappeared. */
  --warn-ink: #6B4508;
  --bad: #C0392F;
  --bad-soft: #FBEAE8;
  --bad-ink: #7A241C;

  /* the five index sub-scores keep one colour each, everywhere they appear */
  --sub-conversation: #1560AC;
  --sub-followthrough: #F58220;
  --sub-goal: #1E8E5A;
  --sub-capability: #7A4FBF;
  --sub-relationship: #0E8C9B;

  --focus: color-mix(in srgb, var(--brand) 32%, transparent);

  /* Generous corners. The first version used 12px everywhere and read as stiff
     next to the reference design: at this scale the corner radius is most of what
     separates an interface that feels considered from one that feels drawn with a
     rectangle tool. */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Shadows tinted with the brand hue rather than neutral black, and spread wider
     and softer, so a card looks lit rather than outlined. */
  --shadow-sm: 0 1px 2px rgba(17, 45, 88, .05), 0 2px 6px rgba(17, 45, 88, .04);
  --shadow: 0 2px 6px rgba(17, 45, 88, .05), 0 8px 20px rgba(17, 45, 88, .06);
  --shadow-lg: 0 18px 44px rgba(17, 45, 88, .16);
  --shadow-brand: 0 10px 28px color-mix(in srgb, var(--brand) 24%, transparent);

  --rail: 232px;
  --topbar: 60px;
  --page-max: 1180px;

  /* Thai needs a face that actually has Thai glyphs. These are all present on the
     machines this runs on, so nothing is fetched over the network. */
  --font: "Segoe UI", "Leelawadee UI", "Noto Sans Thai", "IBM Plex Sans Thai", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-num: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #4C97DF;
    --brand-deep: #7BB5EB;
    /* Darker than --brand rather than lighter: white on #7BB5EB is 2.18:1,
       which the UX gate caught on the pre-call start button. */
    --brand-hover: #2E7CC4;
    --brand-ink: #A9CEF2;
    --brand-soft: #14293E;
    --brand-line: #24405C;
    --accent: #FF9B45;
    --accent-soft: #3A2716;
    --accent-ink: #FFC08A;
    --accent-line: #5C3D1E;

    /* A blue-black rather than a neutral slate, so the dark theme belongs to the
       same brand as the light one instead of looking like a different product. */
    --bg: #0A0F16;
    --surface: #131B25;
    --surface-2: #18212C;
    --sunken: #0E151D;
    --line: #27333F;
    --line-soft: #1E2833;
    --ink: #E7EEF6;
    --ink-2: #B2C0D0;
    --ink-3: #8394A6;
    --ink-4: #637284;

    --good: #4FBE8A;
    --good-soft: #14291F;
    --warn: #E0A340;
    --warn-soft: #2E2312;
    --warn-ink: #F0C270;
    --bad: #E8756A;
    --bad-soft: #2E1817;
    --bad-ink: #F09C92;

    --sub-conversation: #4C97DF;
    --sub-followthrough: #FF9B45;
    --sub-goal: #4FBE8A;
    --sub-capability: #A98AE0;
    --sub-relationship: #3FB5C4;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 2px 10px rgba(0, 0, 0, .45);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #4C97DF;
  --brand-deep: #7BB5EB;
  --brand-hover: #2E7CC4;
  --brand-ink: #A9CEF2;
  --brand-soft: #14293E;
  --brand-line: #24405C;
  --accent: #FF9B45;
  --accent-soft: #3A2716;
  --accent-ink: #FFC08A;
  --accent-line: #5C3D1E;

  /* Kept in step with the media-query block above. */
  --bg: #0A0F16;
  --surface: #131B25;
  --surface-2: #18212C;
  --sunken: #0E151D;
  --line: #27333F;
  --line-soft: #1E2833;
  --ink: #E7EEF6;
  --ink-2: #B2C0D0;
  --ink-3: #8394A6;
  --ink-4: #637284;

  --good: #4FBE8A;
  --good-soft: #14291F;
  --warn: #E0A340;
  --warn-soft: #2E2312;
  --warn-ink: #F0C270;
  --bad: #E8756A;
  --bad-soft: #2E1817;
  --bad-ink: #F09C92;

  --sub-conversation: #4C97DF;
  --sub-followthrough: #FF9B45;
  --sub-goal: #4FBE8A;
  --sub-capability: #A98AE0;
  --sub-relationship: #3FB5C4;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 2px 10px rgba(0, 0, 0, .45);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }

img, svg { max-width: 100%; }

h1, h2, h3, h4 { margin: 0; font-weight: 640; line-height: 1.25; letter-spacing: -.01em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--brand-soft); color: var(--brand-ink); }

/* ------------------------------------------------------------------ shell */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100dvh;
}

/* The rail is light because the logo is. The wordmark is deep blue and orange on
   a transparent field, drawn for a white page: on a dark blue rail the "AU" simply
   disappears. Recolouring supplied artwork to suit a layout is the wrong way round,
   so the layout gives way. */
.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  background: var(--surface);
  border-right: 1px solid var(--line);
  color: var(--ink);
  overflow-y: auto;
}

/* Scoped to the rail. An unscoped `.brand` also matched `class="tag brand"`,
   which stretched every brand-coloured tag to the full width of its row. */
.rail .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 14px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
/* The supplied lockup, not type set to look like it. */
.rail .brand img { height: 30px; width: auto; object-fit: contain; flex: none; }
.brand-sub {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--ink-3);
}

/* Dark mode gets the other cut of the same artwork rather than a white plate
   propped behind the light one: white figure, white "AU", orange "MENTOR". Both
   files come from the supplied logo; neither is type set to imitate it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail .brand img { content: url("/assets/lockup-light.png"); }
}
:root[data-theme="dark"] .rail .brand img { content: url("/assets/lockup-light.png"); }

.rail-group {
  margin: 14px 10px 5px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 640;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  text-align: left;
  transition: background .12s ease, color .12s ease;
}
.nav-link svg { width: 18px; height: 18px; flex: none; color: var(--ink-4); transition: color .12s ease; }
.nav-link:hover { background: var(--sunken); color: var(--ink); }
.nav-link:hover svg { color: var(--ink-2); }
/* Where you are is a solid block of brand blue. A tint would be quieter, but on a
   rail this long the eye should find the current place without looking for it. */
.nav-link.active {
  background: var(--brand);
  color: #fff;
  font-weight: 620;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 32%, transparent);
}
.nav-link.active svg { color: #fff; }
.nav-link.active:hover { background: var(--brand-hover); color: #fff; }
.nav-link.active .pip { background: #fff; color: var(--brand-ink); }
.nav-link .pip {
  margin-left: auto;
  min-width: 19px;
  height: 19px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: #33190A;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
/* Long labels wrap, as they always have. They must not push the chevron of a
   parent row off the rail, which is what min-width:0 is for. */
.nav-link .nav-label { min-width: 0; overflow-wrap: anywhere; }

/* A rail entry that is both a screen and a group. Two buttons, one row: the
   label goes to the screen, the chevron opens what is under it. */
/* Stretched rather than centred, so the chevron is as tall as the row it sits
   in. On a phone a 30px square is a target you miss. */
.nav-row { display: flex; align-items: stretch; gap: 2px; }
.nav-row > .nav-link { flex: 1; min-width: 0; }
.nav-twist {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-4);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.nav-twist svg { width: 16px; height: 16px; }
.nav-twist:hover:not(:disabled) { background: var(--sunken); color: var(--ink-2); }
.nav-twist:disabled { cursor: default; opacity: .45; }

/* [hidden] alone loses to a display rule, so the closed state is spelled out. */
.nav-sub { display: grid; gap: 2px; margin: 2px 0 2px 19px; padding-left: 9px; border-left: 1px solid var(--line); }
.nav-sub[hidden] { display: none; }
.nav-link.is-sub { font-size: 13px; padding: 7px 10px; gap: 9px; }
.nav-link.is-sub svg { width: 16px; height: 16px; }

.rail-foot { margin-top: auto; padding-top: 12px; }
.rail-version { padding: 8px 12px 2px; font-size: 11px; color: var(--ink-4); letter-spacing: .04em; }

.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.crumb { font-weight: 640; font-size: 15px; }
.crumb-sub { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.page {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px 24px 72px;
}

.page-head {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.page-head .lede { color: var(--ink-3); margin-top: 3px; max-width: 62ch; }
.page-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* The brand band. One per screen at most, at the top, where the reference design
   puts it. Orange is still reserved for attention, so a call to action inside the
   band is white on blue rather than orange on blue. */
.hero {
  position: relative;
  overflow: hidden;
  padding: 22px 24px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 62%, color-mix(in srgb, var(--brand) 84%, #2E86D8) 100%);
  color: #fff;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--brand) 26%, transparent);
}
.hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 65%);
  pointer-events: none;
}
.hero h1, .hero h2 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .86); max-width: 62ch; }
/* The primary action on the band is orange, which is what the supplied design
   does and is consistent with the rest: orange marks the one thing that wants a
   person, and on this screen that is starting the session. The `.btn.primary`
   rule is declared later in this file, so these have to name both classes to win. */
.hero .btn, .hero .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #2A1608;
  font-weight: 660;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
}
.hero .btn:hover, .hero .btn.primary:hover { background: #FF9330; border-color: #FF9330; }
.hero .btn svg { color: #2A1608; }
/* A second, quieter action on the band, when there is one. */
.hero .btn.ghost, .hero .btn.ghost:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .28);
  color: #fff;
  box-shadow: none;
}
.hero .btn.ghost svg { color: #fff; }
/* The band, built on the supplied artwork.
   The picture already carries its own blue panel with a diagonal edge, so the
   copy sits on that panel and the same blue continues behind the card as a
   background colour. That way the panel never runs out on a wide screen and
   there is no seam where the image stops. */
.hero.banner {
  padding: 0;
  background-color: #025CBA;
  background-image: url("/assets/art/banner-1600.webp");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
  min-height: 268px;
  display: flex;
  align-items: center;
}
.hero.banner::after { display: none; }
.hero.banner .hero-body {
  /* Kept inside the narrowest part of the diagonal, which is about 39% of the
     artwork at its bottom edge. Anything wider runs over the photograph. */
  width: min(37%, 460px);
  padding: 26px 0 26px 30px;
}
@media (max-width: 1080px) {
  .hero.banner .hero-body { width: min(46%, 430px); }
}
@media (max-width: 860px) {
  /* The diagonal cannot do its job at this width, so the band stacks: a taller
     crop centred on the person above, the copy on the panel blue below. */
  .hero.banner {
    display: block;
    min-height: 0;
    background-image: url("/assets/art/banner-tall-900.webp");
    background-position: center top;
    background-size: 100% auto;
    padding-top: 58%;
  }
  .hero.banner .hero-body {
    width: auto;
    padding: 20px 22px 24px;
    background: linear-gradient(180deg, rgba(2, 92, 186, .86), #025CBA 22%);
  }
}

/* The copy on the band, arranged the way the reference does it: a small line
   above, the thing itself, one line of explanation, then a single action. */
.hero-eyebrow {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 8px;
}
.hero-title { font-size: 26px; line-height: 1.2; margin: 0 0 6px; }
@media (max-width: 860px) { .hero-title { font-size: 22px; } }
.hero-lede { font-size: 14px; margin-bottom: 16px; }
/* The action on the band is white, not brand blue. Blue on the blue panel is the
   one place in the product where the primary button has almost no edge against
   what it sits on, and it is also the most important button on the screen. */
.hero .btn.on-band {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.hero .btn.on-band svg { color: var(--brand); }
.hero .btn.on-band:hover { background: #F2F7FC; border-color: #F2F7FC; }

/* The arrow sits a little away from the label and leans into it on hover, which
   is the whole animation this button needs. */
.btn-arrow { display: inline-flex; margin-left: 2px; transition: transform .15s ease; }
.btn:hover .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .btn:hover .btn-arrow { transform: none; } }

/* The journey. Circular nodes on a single connecting line, which is how a
   sequence of stages reads at a glance; a row of equal boxes does not. */
.stepper { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }
.step {
  position: relative;
  flex: 1;
  min-width: 0;
  text-align: center;
  padding: 0 6px;
}
.step::before {
  content: "";
  position: absolute;
  top: 23px;
  left: calc(-50% + 23px);
  right: calc(50% + 23px);
  height: 2px;
  background: var(--line);
}
.step:first-child::before { display: none; }
.step.done::before, .step.current::before { background: var(--brand-line); }
.step-node {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 9px;
  border-radius: 50%;
  background: var(--sunken);
  color: var(--ink-4);
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--line);
  font-family: var(--font-num);
  font-weight: 700;
  font-size: 15px;
}
.step-node svg { width: 20px; height: 20px; }
.step.done .step-node { background: var(--good-soft); color: var(--good); box-shadow: 0 0 0 1px color-mix(in srgb, var(--good) 34%, transparent); }
.step.current .step-node { background: var(--brand); color: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.step-label { display: block; font-size: 13px; font-weight: 620; color: var(--ink); }
.step.locked .step-label { color: var(--ink-3); }
.step-sub { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.step .tag { margin-top: 7px; }
@media (max-width: 720px) {
  .stepper { flex-wrap: wrap; gap: 14px 0; }
  .step { flex: 0 0 33.333%; }
  .step::before { display: none; }
}

/* A single number, drawn as a ring rather than printed in a box. */
.donut {
  --pct: 0;
  --donut-size: 112px;
  --donut-colour: var(--brand);
  position: relative;
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* place-items centres each row inside its own track; it does not centre the
     tracks themselves. With a value and a caption the two rows are auto-sized and
     align-content falls back to start, so the number sat in the top half of the
     ring instead of the middle of it. */
  align-content: center;
  flex: none;
  background: conic-gradient(var(--donut-colour) calc(var(--pct) * 1%), var(--sunken) 0);
  transition: background .5s cubic-bezier(.2, .8, .3, 1);
}
.donut::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--surface);
}
.donut-value {
  position: relative;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.donut-sub { position: relative; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
/* Nothing measured is a dashed ring, never a ring at zero. */
.donut.is-missing { background: none; border: 2px dashed var(--line); }
.donut.is-missing::before { inset: 0; background: none; }
.donut.is-missing .donut-value { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 0 12px; text-align: center; }

.hero-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hero-row .spacer { margin-left: auto; }

/* Text and chrome inherited from the light surfaces have to be re-pointed, or
   they arrive on the band as grey on blue and disappear. */
.hero .muted, .hero .small.muted { color: rgba(255, 255, 255, .72); }
.hero .card-head h2, .hero .card-head h3 { color: rgba(255, 255, 255, .88); }
.hero .card-head svg { color: rgba(255, 255, 255, .7); }
.hero .tag {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
}
.hero .tag.accent { background: var(--accent); color: #2A1608; border-color: var(--accent); }
.hero .home-meta-item .k { color: rgba(255, 255, 255, .64); }
.hero .home-meta-item .v { color: #fff; }
.hero a { color: #fff; text-decoration: underline; }

.view { display: none; }
.view.active { display: block; }

/* ---------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 560;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--surface-2); border-color: var(--ink-4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

.btn.accent { background: var(--accent); border-color: var(--accent); color: #2A1608; }
.btn.accent:hover { filter: brightness(.95); }

.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--sunken); border-color: transparent; }

.btn.danger { color: var(--bad); border-color: var(--line); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }

.btn.sm { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.btn.lg { min-height: 46px; padding: 0 24px; font-size: 15px; }
.btn.icon { padding: 0; width: 36px; }
.btn.icon.sm { width: 30px; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-weight: 600; font-size: 13px; }
.field .help { color: var(--ink-3); font-size: 12.5px; }
.field .err { color: var(--bad); font-size: 12.5px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-4); }
select { appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 16px; }

.check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; padding: 5px 0; }

/* The repair rules: "what it heard" on the left, "what was said" on the right,
   and on a phone the arrow turns and the pair stacks rather than shrinking to
   two unusable boxes. */
.rule-list { display: grid; gap: 8px; margin-bottom: 8px; }
.rule-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 8px; align-items: center; }
.rule-row input { min-width: 0; }
@media (max-width: 560px) {
  .rule-row { grid-template-columns: 1fr auto; }
  .rule-row > span { justify-self: center; transform: rotate(90deg); }
}
.check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brand); flex: none; }
.check .check-body { display: flex; flex-direction: column; gap: 2px; }
.check .check-body small { color: var(--ink-3); }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }

/* ------------------------------------------------------------------- cards */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-head svg { color: var(--ink-4); }
.card-head h2, .card-head h3 { margin: 0; }
.card-head .spacer { margin-left: auto; }

.cards { display: grid; gap: 16px; }
.cards.two { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.cards.three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* A tag is often a direct child of a flex row, where it would otherwise be
     handed the leftover space and stretch across the whole line. */
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.tag.brand { background: var(--brand-soft); color: var(--brand-ink); }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--warn-soft); color: var(--warn); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.tag.accent { background: var(--accent-soft); color: var(--accent-ink); }

.muted { color: var(--ink-3); }
.small { font-size: 12.5px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 640;
  padding: 0 10px 8px;
  white-space: nowrap;
}
.table td { padding: 10px; border-top: 1px solid var(--line-soft); vertical-align: middle; }
.table tr:hover td { background: var(--surface-2); }
.table-wrap { overflow-x: auto; }

/* --------------------------------------------------- the measurement widgets */

/* A sub-score bar. When the value is null the track is hatched, which is the
   visual difference between "we have not measured this" and "this scored zero".
   Every dashboard that blurs those two eventually gets somebody judged unfairly. */
.meter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; margin-bottom: 9px; }
.meter-label { font-size: 12.5px; color: var(--ink-2); }
.meter-value { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 680; font-size: 13.5px; }
.meter-track {
  grid-column: 1 / -1;
  height: 7px;
  border-radius: 4px;
  background: var(--sunken);
  overflow: hidden;
}
.meter-fill { height: 100%; border-radius: 4px; background: var(--brand); transition: width .35s cubic-bezier(.2, .8, .3, 1); }
.meter.is-missing .meter-track {
  background-image: repeating-linear-gradient(135deg, var(--line) 0 5px, transparent 5px 10px);
  background-color: transparent;
  border: 1px dashed var(--line);
  height: 7px;
}
.meter.is-missing .meter-value { color: var(--ink-4); font-weight: 560; font-size: 12px; }

.meter[data-sub="conversationQuality"] .meter-fill { background: var(--sub-conversation); }
.meter[data-sub="followThrough"] .meter-fill { background: var(--sub-followthrough); }
.meter[data-sub="goalProgress"] .meter-fill { background: var(--sub-goal); }
.meter[data-sub="capabilityGrowth"] .meter-fill { background: var(--sub-capability); }
.meter[data-sub="relationshipHealth"] .meter-fill { background: var(--sub-relationship); }

/* The index score itself. Large, plain, and honest when it cannot be computed. */
.score {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.score-num { font-family: var(--font-num); font-size: 38px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.score-of { color: var(--ink-4); font-size: 14px; }
.score.is-missing .score-num { font-size: 17px; font-weight: 620; color: var(--ink-3); }

.band { display: inline-flex; align-items: center; gap: 6px; font-weight: 640; font-size: 12.5px; }
.band::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: currentColor; }
.band[data-band="thriving"] { color: var(--good); }
.band[data-band="onTrack"] { color: var(--brand); }
.band[data-band="uneven"] { color: var(--warn); }
.band[data-band="slipping"] { color: var(--accent); }
.band[data-band="stalled"] { color: var(--bad); }

/* The protocol stage rail. This is the one piece of the interface that is
   unusual, and it earns its place: it is the only way to see, live, that the
   conversation is actually progressing through the method rather than circling. */
.stages { display: flex; align-items: stretch; gap: 3px; margin: 0; padding: 0; list-style: none; }
.stage {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--sunken);
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.stage-name { font-size: 12px; font-weight: 640; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-hint { font-size: 11px; color: var(--ink-4); display: none; }
.stage.done { background: var(--good-soft); }
.stage.done .stage-name { color: var(--good); }
.stage.current { background: var(--brand-soft); border-color: var(--brand-line); }
.stage.current .stage-name { color: var(--brand-ink); }
.stage.current .stage-hint { display: block; color: var(--brand); }

/* A sparkline of session-over-session movement, drawn as inline SVG. */
.spark { display: block; width: 100%; height: 42px; overflow: visible; }
.spark path.line { fill: none; stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark path.area { fill: color-mix(in srgb, var(--brand) 12%, transparent); stroke: none; }
/* The end-of-line marker. Drawn as a zero-length round-capped stroke so it stays
   a circle even though the sparkline box is stretched horizontally. */
.spark line.dot { stroke: var(--brand); stroke-width: 6; stroke-linecap: round; }
.spark circle { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }

/* --------------------------------------------------------------- the session */

.session {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  height: calc(100dvh - var(--topbar) - 44px);
}

.transcript {
  overflow-y: auto;
  padding: 4px 2px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-behavior: smooth;
}

.turn { display: flex; gap: 10px; max-width: 760px; }
.turn.mentee { margin-left: auto; flex-direction: row-reverse; }
.turn-avatar {
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  font-size: 12px; font-weight: 700;
  overflow: hidden;
}
.turn.mentee .turn-avatar { background: var(--sunken); color: var(--ink-2); }
.turn-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.turn-body {
  padding: 10px 13px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--line);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.turn.mentee .turn-body { background: var(--brand); border-color: var(--brand); color: #fff; }
.turn.pending .turn-body { color: var(--ink-3); }

.typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-4); animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .18s; }
.typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.composer textarea { border: 0; min-height: 40px; max-height: 160px; padding: 6px 4px; resize: none; }
.composer textarea:focus { outline: none; }

/* The round picture control: used by the persona editor and by a person's own
   profile, so it lives here rather than in either screen's stylesheet. */
/* The crop dialog. The circle is an overlay rather than a clip on the picture,
   so the part being cut away stays visible while it is being positioned. */
.crop { display: grid; justify-items: center; gap: 12px; }
.crop-frame {
  position: relative; width: 264px; height: 264px; overflow: hidden;
  border-radius: 14px; background: var(--ink-1); touch-action: none; cursor: grab;
}
.crop-frame.dragging { cursor: grabbing; }
.crop-frame .crop-img { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; max-width: none; }
.crop-frame .crop-ring {
  position: absolute; inset: 0; pointer-events: none; border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.45) inset;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 128px, #000 129px);
  mask: radial-gradient(circle at 50% 50%, transparent 0 128px, #000 129px);
}
.crop-controls { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 264px; }
.crop-controls .crop-zoom { flex: 1; }

.persona-face-row { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.persona-face {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%;
  overflow: hidden; background: var(--sunken); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.persona-face-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.persona-face-empty { display: flex; color: var(--ink-4); }
.persona-face-empty svg { display: block; }

.me-face {
  width: 22px; height: 22px; border-radius: 50%; overflow: hidden; flex: none;
  display: block; background: var(--sunken);
}
.me-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acc-person { display: flex; align-items: center; gap: 8px; }
.team-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }

/* One row of the reset queue on the accounts screen: who is locked out, when
   they said so, and the two things that can be done about it. */
.acc-reset-row {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
.acc-reset-row:last-child { border-bottom: 0; }

/* ------------------------------------------------------------------- states */

.empty {
  display: grid;
  place-items: center;
  gap: 10px;
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.empty svg { width: 30px; height: 30px; color: var(--ink-4); }
.empty h3 { color: var(--ink-2); }

.skeleton {
  background: linear-gradient(90deg, var(--sunken) 25%, var(--line-soft) 37%, var(--sunken) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton.line { height: 12px; margin-bottom: 9px; }
.skeleton.card { height: 120px; }

.banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 14px;
}
.banner svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.banner.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn-ink); }
.banner.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad-ink); }
.banner.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand-ink); }
.banner .spacer { margin-left: auto; }
/* On a phone the action and the sentence were fighting over one line, and the
   sentence lost: it came out as a column six words wide beside a button that
   kept its full width. */
@media (max-width: 560px) {
  /* .hero is a banner too and has its own layout, so it is left alone. */
  .banner:not(.hero) { flex-wrap: wrap; }
  .banner:not(.hero) > span { flex: none; }
  .banner:not(.hero) > div:not(.spacer) { flex: 1 1 0; min-width: 0; }
  /* The action drops to its own line, indented past the icon so it reads as
     belonging to the sentence above it. */
  .banner:not(.hero) .spacer { flex: 1 1 100%; margin: 4px 0 0 28px; }
  .banner:not(.hero) .spacer .btn { width: 100%; }
}

/* -------------------------------------------------------------------- modal */

.modal-back {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(10, 20, 32, .45);
  backdrop-filter: blur(2px);
}
.modal {
  width: min(680px, 100%);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 20px;
}
.modal.wide { width: min(940px, 100%); }
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.modal-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* -------------------------------------------------------------------- toast */

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: 13.5px;
  max-width: 340px;
  animation: rise .18s ease;
}
.toast.bad { background: var(--bad); }
.toast.good { background: var(--good); }
@keyframes rise { from { transform: translateY(6px); opacity: 0; } }

/* ------------------------------------------------------------------- dials */

.dial { margin-bottom: 16px; }
.dial-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.dial-head label { font-weight: 600; font-size: 13px; }
.dial-head .val { margin-left: auto; font-size: 12.5px; color: var(--brand); font-weight: 640; }
.dial input[type="range"] { width: 100%; accent-color: var(--brand); }
.dial .desc {
  margin-top: 5px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ segment */

.segment { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--sunken); gap: 2px; }
.segment button {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 580;
  padding: 5px 11px; border-radius: 8px; cursor: pointer; color: var(--ink-3);
}
.segment button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ------------------------------------------------------------------ mobile */

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow-lg);
  }
  body.rail-open .rail { transform: none; }
  body.rail-open::after {
    content: "";
    position: fixed; inset: 0; z-index: 40;
    background: rgba(10, 20, 32, .4);
  }
  .page { padding: 16px 14px 56px; }
  .topbar { padding: 0 14px; }
  .stages { flex-wrap: wrap; }
  .stage { flex: 1 1 100px; }
  .turn { max-width: 100%; }
  .session { height: auto; min-height: calc(100dvh - var(--topbar) - 32px); }
}

@media (min-width: 901px) { .only-mobile { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .transcript { scroll-behavior: auto; }
}

/* ------------------------------------------------------- rhythm on a screen
   Added after the first pass over the screens. The complaint was not that any
   one card was wrong, it was that twelve of them in a column read as a wall.
   These give a screen a few landmarks and let a number be a number rather than
   a row in a list. Nothing above this line changed. */

/* A short heading over a group of cards. */
.section { margin-top: 26px; }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 2px 11px; }
.section-head h2 { font-size: 15px; }
.section-head .note { color: var(--ink-3); font-size: 12.5px; }
.section-head .spacer { margin-left: auto; }

/* Stat tiles. The same four numbers as a definition list read as a form; on
   tiles they read as a summary you can take in without reading. */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
.stat {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
}
.stat b { display: block; font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 700; line-height: 1.25; }
.stat span { display: block; font-size: 12px; color: var(--ink-3); }
.stat.is-accent { background: var(--accent-soft); border-color: var(--accent-line); }
.stat.is-accent b { color: var(--accent-ink); }
.stat.is-quiet b { font-size: 13.5px; font-weight: 600; }

/* A row of people is not a spreadsheet. */
.table.roomy th { padding: 0 12px 10px; }
.table.roomy td { padding: 15px 12px; }

/* The ring, and the sentences that say what it does and does not mean. */
.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-row .donut-copy { flex: 1 1 220px; min-width: 0; }
.donut-row .donut-copy p { margin-bottom: 6px; }

/* A stepper showing a method nobody has walked yet: no stage is done and none
   is locked, it is simply the shape of a session. */
.stepper.is-preview .step-node { background: var(--brand-soft); color: var(--brand-ink); box-shadow: 0 0 0 1px var(--brand-line); }
.stepper.is-preview .step::before { background: var(--brand-line); }
.stepper.is-preview .step-label { color: var(--ink); }

/* An empty state somebody will sit in front of for more than a moment. Small
   inline empties keep the icon; a picture on every empty list is worse than
   none. */
.empty.has-photo { padding: 34px 20px 38px; }
.empty-photo {
  width: min(248px, 68%);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 2px;
}
@media (max-width: 480px) { .empty-photo { width: min(196px, 74%); } }

/* A long name in the top bar pushed the whole page sideways at 390px, which
   showed up the moment a screen was opened from an account whose name is longer
   than the test administrator's. The bar is shell, not a screen, so it is
   constrained here rather than rebuilt. */
@media (max-width: 900px) {
  .topbar > div { min-width: 0; }
  .topbar .crumb, .topbar .crumb-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions { min-width: 0; }
  .topbar-actions .segment { flex: none; }
  .topbar-actions #meButton { min-width: 0; flex: 0 1 auto; max-width: 28vw; }
  .topbar-actions #meButton span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* The squeeze has to land on the BREADCRUMB, which is the one thing here that
     can lose a word and still be understood.
     `.btn.icon` sets width: 36px, which in a flex row is a starting size and not
     a floor, so with min-width relaxed above the buttons were what gave way
     instead: measured at 390px the appearance toggle came out 18px wide and the
     menu button 24px, half a thumb on the one width where a thumb is the only
     thing available. Pinning them alone then pushed the bar 15px past the edge
     at 320px in Thai, because the breadcrumb was shrinking proportionally and
     stopping at 97px rather than absorbing what was left - `flex: 1 1 0` is what
     makes it claim no intrinsic width and take the whole shortfall. Both halves
     are needed; either on its own trades one fault for the other. */
  .topbar > div:not(.topbar-actions) { flex: 1 1 0; }
  .topbar .btn.icon { flex: none; }
}

/* A button on the band is a button, not a link with a rule under it. */
.hero a.btn, .hero a.btn:hover { text-decoration: none; }

/* The manager's band.
   The supplied banner artwork carries the campaign line and belongs to the
   mentee's welcome screen. On a working board about named people it is the
   wrong register, and an administrator sees both screens, so it would be the
   same photograph twice in one session. Team gets its own picture in the same
   shape as the house band: the person on the right, the copy on solid brand
   blue on the left, and no seam where one becomes the other.
   The blue is written out rather than taken from --brand-deep because the band
   stays dark in both themes, exactly as .hero.banner does. */
.hero.team-band {
  padding: 0;
  background: #0A4894;
  min-height: 250px;
  display: flex;
  align-items: center;
}
.hero.team-band::after { display: none; }
.hero.team-band .hero-body {
  position: relative;
  z-index: 1;
  width: min(45%, 480px);
  padding: 26px 0 26px 30px;
}
.team-band-photo { position: absolute; inset: 0 0 0 auto; width: 62%; }
.team-band-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 54% 24%; }
.team-band-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0A4894 0%, color-mix(in srgb, #0A4894 76%, transparent) 28%, transparent 64%);
}
@media (max-width: 860px) {
  /* Same reasoning as the banner: the diagonal cannot do its job this narrow,
     so the picture goes on top and the copy sits on the panel blue below. */
  .hero.team-band { display: block; min-height: 0; }
  .team-band-photo { position: relative; width: auto; height: 180px; }
  .team-band-photo img { object-position: 54% 10%; }
  .team-band-photo::after {
    background: linear-gradient(180deg, transparent 32%, color-mix(in srgb, #0A4894 68%, transparent) 76%, #0A4894 100%);
  }
  .hero.team-band .hero-body { width: auto; padding: 16px 22px 24px; }
}

/* Five sub-score bars across a full-width card are five very long thin lines
   with a number stranded at the far end. In two columns they read as a group
   and the eye can pair the label with its value. */
.subs-2 > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 0 30px; }