@font-face {
  font-family: "AIRC Oswald";
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url("/brand/fonts/oswald-variable.ttf") format("truetype");
}

@font-face {
  font-family: "AIRC Work Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/brand/fonts/work-sans-variable.ttf") format("truetype");
}

:root {
  color-scheme: light;
  --yellow: #efc63c;
  --cream: #f2efe8;
  --paper: #f2efe8;
  --paper-strong: #f2efe8;
  --ink: #141210;
  --ink-soft: #141210;
  --ink-faint: #141210;
  --line: #e8e0ce;
  --line-strong: #141210;
  --red: #d02020;
  --red-dark: #d02020;
  --red-soft: #e8e0ce;
  --blue: #1040c0;
  --blue-soft: #e8e0ce;
  --green: #1040c0;
  --green-soft: #e8e0ce;
  --amber: #141210;
  --amber-soft: #efc63c;
  --kraft: #e8e0ce;
  --sand: #d9c9a3;
  --shadow: none;
  --shadow-hover: none;
  --radius: 0;
  --radius-small: 0;
  --content: 1160px;
  --portal-page-title-size: clamp(2.65rem, 5vw, 4rem);
  --portal-page-lede-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-family: "AIRC Work Sans", Arial, sans-serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--cream);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background-color: var(--cream);
  background-image:
    linear-gradient(rgb(242 239 232 / 90%), rgb(242 239 232 / 90%)),
    url("/brand/textures/airc-paper.jpg");
  background-attachment: fixed;
  background-size:
    auto,
    1200px auto;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
.button,
.nav-item,
.avatar {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3,
.portal-brand strong,
.button,
.event-date-tile,
.status-pill,
.attention-pill {
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
}

h1,
h2,
h3 {
  line-height: 1.04;
  letter-spacing: -0.025em;
}

h1 {
  max-width: 17ch;
  margin-bottom: 16px;
  font-size: clamp(2.8rem, 6.2vw, 5.2rem);
  font-weight: 700;
}

h2 {
  margin-bottom: 12px;
  font-size: clamp(1.45rem, 2.6vw, 2.15rem);
  font-weight: 700;
}

h3 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 700;
}

.portal-app {
  min-height: 100vh;
}

/* One paper canvas for the portal and the separate guardian handoff. */
.portal-app-signed-in,
body:has(> main.signing-reader) {
  position: relative;
  isolation: isolate;
  background-color: var(--kraft);
}

.portal-app-signed-in::before,
body:has(> main.signing-reader)::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: url("/brand/textures/airc-paper.jpg") center top / 1200px auto;
  content: "";
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

body:has(> main.signing-reader) {
  display: flow-root;
  min-height: 100vh;
  background-image: none;
}

.preview-bar {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 7px 20px;
  border-bottom: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.78rem;
}

.preview-bar > span {
  color: var(--ink-soft);
}

.preview-bar nav {
  display: flex;
  gap: 4px;
}

.preview-bar a {
  padding: 3px 8px;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  text-decoration: none;
}

.preview-bar a:hover,
.preview-bar a.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.portal-topbar {
  position: sticky;
  z-index: 20;
  top: 0;
  display: grid;
  min-height: 88px;
  grid-template-columns: minmax(210px, 1fr) auto minmax(210px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 12px max(24px, calc((100vw - var(--content)) / 2));
  border-bottom: 4px solid var(--yellow);
  background: rgb(20 18 16 / 98%);
}

.portal-brand {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 18px;
  text-decoration: none;
}

.portal-brand img {
  display: block;
  width: 148px;
  height: auto;
}

.portal-product-label {
  padding-left: 18px;
  border-left: 1px solid rgb(242 239 232 / 40%);
  color: var(--cream);
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.portal-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  color: var(--cream);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.nav-item::after {
  position: absolute;
  right: 12px;
  bottom: 3px;
  left: 12px;
  height: 2px;
  background: var(--yellow);
  content: "";
  opacity: 0;
  transform: scaleX(0.5);
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.nav-item:hover,
.nav-item.is-active {
  color: var(--yellow);
}

.nav-item-locked,
.nav-item-locked:hover {
  color: rgb(242 239 232 / 42%);
  cursor: not-allowed;
}

.nav-item-locked::after {
  content: none;
}

.nav-lock {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-width: 1.6;
}

.nav-item:hover::after,
.nav-item.is-active::after {
  opacity: 1;
  transform: scaleX(1);
}

.portal-account {
  display: flex;
  justify-content: flex-end;
}

.avatar {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 0;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 800;
  text-decoration: none;
}

.main-content {
  min-height: calc(100vh - 168px);
  padding: clamp(44px, 7vw, 92px) 24px 90px;
}

.content-shell {
  width: min(100%, var(--content));
  margin: 0 auto;
}

.portal-page-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  width: 100%;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.portal-page-intro-title {
  max-width: 760px;
}

.portal-page-intro h1 {
  max-width: none;
  margin: 0;
  font-size: var(--portal-page-title-size);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  text-transform: none;
  text-wrap: balance;
}

/* A readable measure, not a caption: 44ch broke "Training, live support,
   event guides, and funding tools in one place" into a line and an orphan.
   Still well short of the rule beneath (Jacob, 2026-09-21). */
.portal-page-intro-title > h1 + p {
  max-width: 64ch;
  margin: 14px 0 0;
  font-size: var(--portal-page-lede-size);
  line-height: 1.5;
  text-wrap: pretty;
}

.portal-page-intro-aside {
  justify-self: end;
}

.narrow-shell {
  width: min(100%, 760px);
}

@media (max-width: 720px) {
  .portal-page-intro {
    flex-direction: column;
    gap: 18px;
  }

  .portal-page-intro-aside {
    justify-self: start;
  }
}

.journey-dashboard {
  width: min(100%, 980px);
}

.journey-timeline {
  display: grid;
}

.journey-step {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 28px;
  min-height: 178px;
  padding: 0 0 34px;
}

.journey-step:not(:last-child)::before {
  position: absolute;
  top: 54px;
  bottom: 0;
  left: 26px;
  width: 1px;
  background: var(--line-strong);
  content: "";
}

.journey-step-marker {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper);
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
}

.journey-step-complete .journey-step-marker {
  background: var(--yellow);
}

.journey-step-locked {
  color: #6b675f;
}

.journey-step-state {
  margin: 0 0 10px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.journey-step h2 {
  max-width: 720px;
  margin: 0 0 10px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
}

.journey-step-copy > p:not(.journey-step-state) {
  max-width: 64ch;
  margin: 0 0 18px;
  color: inherit;
}

.journey-step-link {
  display: inline-flex;
  gap: 10px;
  color: inherit;
  font-weight: 800;
  /* Every action on a step is the same size. The primary used to pin 1rem
     while a secondary link inherited the card's larger body text, so
     "Add a co-host" rendered bigger than "Open your event". */
  font-size: 1rem;
}

.journey-step-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
}

.journey-step-primary-action {
  font-size: 1rem;
}

.journey-step-access {
  margin: 14px 0 0;
  font-size: 0.9rem;
}

.journey-step-access code {
  padding: 3px 7px;
  /* A faint wash of the brand yellow, so the password reads as the one thing
     on the card to copy (Jacob, 2026-09-21). */
  background: rgb(239 198 60 / 28%);
  font-family: inherit;
  font-weight: 700;
}

.journey-step-complete {
  min-height: 116px;
  padding-bottom: 24px;
}

.journey-step-complete .journey-step-marker {
  width: 44px;
  height: 44px;
  margin: 5px;
}

.journey-step-complete:not(:last-child)::before {
  top: 54px;
}

.journey-step-complete .journey-step-copy {
  display: block;
}

.journey-step-complete h2 {
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.journey-step-complete .journey-step-copy > p:not(.journey-step-state) {
  display: none;
}

.journey-step-complete .journey-step-actions {
  margin-top: 14px;
}

@media (max-width: 620px) {
  .journey-step {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
  }

  .journey-step-marker {
    width: 42px;
    height: 42px;
  }

  .journey-step:not(:last-child)::before {
    top: 42px;
    left: 20px;
  }

  .journey-step-complete {
    min-height: 132px;
  }

  .journey-step-complete .journey-step-marker {
    width: 36px;
    height: 36px;
    margin: 3px;
  }

  .journey-step-complete .journey-step-actions {
    margin-top: 14px;
  }
}

.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin-bottom: clamp(32px, 5vw, 62px);
  padding-top: 20px;
}

.page-header > div:first-child {
  max-width: 860px;
}

.brand-tick {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.12em;
  background: currentColor;
  mask: url("/brand/tick/airc-tick-only-ink.svg") center / contain no-repeat;
}
.page-meta,
.portal-page-intro-title > .page-meta {
  margin: 12px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 600;
}
.page-subtitle {
  max-width: 710px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  line-height: 1.55;
}

.page-subtitle + .page-subtitle {
  margin-top: 12px;
}

.eyebrow {
  width: fit-content;
  margin-bottom: 14px;
  padding: 4px 7px 3px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.card {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
}

.funding-support {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  align-items: start;
  gap: 32px;
  margin-top: 32px;
  padding: clamp(24px, 4vw, 40px);
  border-width: 2px;
}

.funding-support-copy > p:last-child,
.funding-request-form > *:last-child,
.funding-request-actions > form:last-child {
  margin-bottom: 0;
}

.funding-request-actions,
.funding-request-form {
  display: grid;
  gap: 16px;
}

.funding-request-actions > form:last-child .button {
  width: 100%;
}

.funding-purpose {
  padding-top: 16px;
  border-top: 1px solid var(--ink);
  font-weight: 700;
}

.funding-receipt-note {
  padding: 16px;
  background: var(--kraft);
}

.three-grid,
.two-grid {
  display: grid;
  gap: 18px;
}

.three-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.two-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.action-card,
.summary-card,
.step-card,
.prose-card,
.detail-aside {
  padding: clamp(24px, 3vw, 34px);
}

.action-card,
.summary-card,
.step-card {
  min-height: 220px;
}

.action-card {
  display: flex;
  flex-direction: column;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.action-card:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.action-card p,
.summary-card p,
.step-card p {
  color: var(--ink-soft);
}

.action-card a,
.summary-card a {
  margin-top: auto;
  color: var(--blue);
  font-weight: 800;
}

.three-grid > .action-card:nth-child(3n + 1) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.three-grid > .action-card:nth-child(3n + 1) p {
  color: var(--sand);
}

.three-grid > .action-card:nth-child(3n + 1) .eyebrow {
  color: var(--ink);
}

.three-grid > .action-card:nth-child(3n + 1) a {
  color: var(--yellow);
}

.section-block {
  margin-top: clamp(52px, 8vw, 92px);
}

.section-heading {
  margin-bottom: 22px;
}

.section-heading h2 {
  margin-bottom: 6px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.portal-app-public {
  font-size: 19px;
}

.portal-app-public .portal-topbar,
.portal-app-signed-in .portal-topbar {
  position: static;
  min-height: 72px;
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
}

.portal-app-signed-in .portal-topbar {
  position: sticky;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.portal-app-public .portal-product-label,
.portal-app-public .nav-item,
.portal-app-signed-in .portal-product-label,
.portal-app-signed-in .nav-item {
  color: var(--ink);
}

.portal-app-public .portal-product-label,
.portal-app-signed-in .portal-product-label {
  border-left-color: rgb(20 18 16 / 35%);
}

.portal-app-public .nav-item::after,
.portal-app-signed-in .nav-item::after {
  background: var(--ink);
}

.portal-app-public .nav-item:hover,
.portal-app-public .nav-item.is-active,
.portal-app-signed-in .nav-item:hover,
.portal-app-signed-in .nav-item.is-active {
  color: var(--ink);
}

.portal-app-signed-in .nav-item-locked,
.portal-app-signed-in .nav-item-locked:hover {
  color: var(--ink);
  opacity: 0.65;
}

.portal-account form {
  margin: 0;
}

.portal-topbar .portal-sign-out {
  min-height: 44px;
  padding: 10px 16px;
  border-color: var(--ink);
  color: var(--ink);
  font-size: 0.8rem;
  white-space: nowrap;
}

.portal-app-signed-in .portal-topbar :focus-visible {
  outline-color: var(--ink);
}

.main-content-public-home {
  min-height: 0;
  padding: 0;
}

.content-shell-public-home {
  width: 100%;
  max-width: none;
}

.public-home {
  background: var(--cream);
}

.public-wrap {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: clamp(32px, 8.4vw, 138px);
}

.public-paper-surface {
  position: relative;
  isolation: isolate;
}

.public-paper-surface::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("/brand/textures/airc-paper.jpg");
  background-position: 0 0;
  background-size: 1100px 733px;
  background-repeat: repeat;
  mix-blend-mode: multiply;
  content: "";
  opacity: 0.1;
  pointer-events: none;
}

.public-home h1,
.public-home h2 {
  margin-inline-start: -0.06em;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
}

.public-home h2 {
  max-width: none;
  margin-bottom: 24px;
  font-size: clamp(2.15rem, 4.4vw, 2.75rem);
  line-height: 1.06;
}

.public-home-hero {
  overflow-x: clip;
  padding-block: 96px 64px;
  background: var(--ink);
  color: var(--cream);
}

.public-home-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: start;
  gap: 48px;
}

.public-home-lockup {
  display: block;
  width: min(100%, 360px);
  height: auto;
  margin-bottom: 24px;
}

.public-home-band {
  display: inline-block;
  max-width: none;
  margin: 0 0 24px;
  padding: 8px 24px 10px;
  background: var(--yellow);
  color: var(--ink);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 500;
  line-height: 1.08;
}

.public-home-hero .public-home-lede {
  max-width: 50ch;
  margin-bottom: 18px;
  color: var(--cream);
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  line-height: 1.55;
}

.public-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.public-home-mount {
  position: relative;
  padding: 4%;
}

.public-home-photo {
  margin: 0;
}

.public-home-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  filter: grayscale(1) contrast(1.04);
  object-fit: cover;
}

.public-home-frame {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.public-home-sticky-nav {
  position: fixed;
  z-index: 50;
  top: 0;
  right: 0;
  left: 0;
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.public-home-sticky-nav.is-hidden {
  transform: translateY(-100%);
}

.public-home-sticky-nav-inner {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 12px;
}

.public-home-sticky-brand {
  display: block;
  flex: 0 0 auto;
  text-decoration: none;
}

.public-home-sticky-brand img {
  display: block;
  width: 190px;
  height: auto;
}

.public-home-sticky-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.public-home-sticky-actions .button {
  min-height: 48px;
  padding: 11px 24px;
  font-size: 0.82rem;
}

.public-home-sticky-sign-in,
.public-home-sticky-sign-in:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

.public-home-sticky-sign-up,
.public-home-sticky-sign-up:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.public-home-sticky-sign-up-short {
  display: none;
}

.public-home-promise {
  padding-block: 80px 96px;
  background: var(--yellow);
  color: var(--ink);
}

.public-home-promise-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: start;
  gap: 72px;
}

.public-home-promise h2,
.public-home-promise p {
  margin-bottom: 0;
}

.public-home-promise .public-home-lede {
  max-width: 54ch;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5;
}

.public-home-expect,
.public-live-training,
.public-home-close {
  padding-block: 80px 96px;
}

.public-section-lede {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  line-height: 1.5;
}

.public-expect-list {
  max-width: 980px;
  margin-top: 48px;
}

.public-expect-list article {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 32px;
  padding-block: 32px;
  border-bottom: 2px solid var(--ink);
}

.public-expect-list article:last-child {
  border-bottom: 0;
}

.public-step-number {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.7rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  line-height: 1;
}

.public-step-red {
  color: #fff;
  background: var(--red);
}

.public-step-yellow {
  color: var(--ink);
  background: var(--yellow);
}

.public-step-blue {
  color: #fff;
  background: var(--blue);
}

.public-step-ink {
  color: var(--cream);
  background: var(--ink);
}

.public-expect-list h3 {
  margin-bottom: 8px;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1.45rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.public-training-details .public-training-title {
  margin-bottom: 10px;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-transform: uppercase;
}

.public-expect-list p,
.public-training-details p {
  max-width: 60ch;
  margin-bottom: 0;
}

.public-live-training {
  scroll-margin-top: 72px;
  background: var(--kraft);
}

.public-training-list {
  margin-top: 48px;
  border-top: 2px solid var(--ink);
}

.public-training-row {
  display: grid;
  grid-template-areas: "date timing details";
  grid-template-columns: 76px minmax(240px, 0.65fr) minmax(420px, 1.35fr);
  align-items: start;
  column-gap: 36px;
  padding-block: 36px;
  border-bottom: 2px solid var(--ink);
}

.public-training-date-tile {
  grid-area: date;
  width: 76px;
  border: 2px solid var(--ink);
  background: var(--ink);
  text-align: center;
}

.public-training-date-tile span {
  display: block;
  padding: 7px 4px 6px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.public-training-date-tile strong {
  display: block;
  padding: 7px 4px 10px;
  color: var(--cream);
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1;
}

.public-training-date-copy {
  display: grid;
  grid-area: timing;
  gap: 8px;
}

.public-training-date-copy span,
.public-training-status {
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.public-training-date-copy strong {
  font-size: 1rem;
  line-height: 1.4;
}

.public-training-details .public-training-location {
  margin-bottom: 12px;
  font-weight: 700;
}

.public-training-details {
  grid-area: details;
}

.public-training-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.public-training-status,
.public-training-meta-separator {
  color: var(--blue);
}

.public-training-status-full {
  color: var(--red);
}

.public-training-meta-separator {
  font-size: 0.85rem;
  line-height: 1;
}

.public-training-reserve-link {
  color: var(--ink);
  font-weight: 600;
  text-decoration-thickness: 1.5px;
}

.public-training-empty {
  max-width: 760px;
  margin-top: 48px;
  padding: 32px;
  border: 2px solid var(--ink);
}

.public-home-close {
  background: var(--ink);
  color: var(--cream);
}

.public-home-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 64px;
}

.public-home-close h2 {
  color: var(--cream);
}

.public-home-close p {
  max-width: 62ch;
  margin-bottom: 0;
  color: var(--cream);
}

.portal-app-public .public-site-footer {
  display: grid;
  grid-template-columns: 225px minmax(280px, 1fr) auto;
  align-items: end;
  gap: 48px;
  margin: 0;
  padding-block: 52px;
  border-top: 0;
  font-size: 0.76rem;
}

.portal-app-public .public-site-footer img {
  display: block;
  width: 225px;
  height: auto;
}

.portal-app-public .public-site-footer p {
  max-width: 54ch;
  margin: 0;
  color: var(--sand);
}

.portal-app-public .public-site-footer a {
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
}

.portal-app-public a:focus-visible,
.portal-app-public button:focus-visible,
.portal-app-public input:focus-visible {
  outline-color: var(--ink);
}

.public-home-hero a:focus-visible,
.public-home-close a:focus-visible,
.public-site-footer a:focus-visible {
  outline-color: var(--yellow);
}

.public-sign-in-pending h2 {
  margin-bottom: 14px;
}

.portal-app-public .page-header {
  padding-top: 0;
  border-top: 0;
}

.public-sign-in-pending > p {
  max-width: 58ch;
  color: var(--ink-soft);
}

.public-sign-in-page {
  min-height: 100vh;
  background: var(--cream);
}

.public-sign-in-layout {
  display: grid;
  min-height: 100vh;
  grid-template-columns: minmax(360px, 0.72fr) minmax(560px, 1.28fr);
  gap: 28px;
  padding: 28px;
}

.public-sign-in-panel {
  display: grid;
  min-height: calc(100vh - 56px);
  grid-template-rows: auto 1fr;
  padding: clamp(28px, 4.6vw, 68px);
}

.public-sign-in-brand {
  display: block;
  width: fit-content;
}

.public-sign-in-brand img {
  display: block;
  width: 190px;
  height: auto;
}

.public-sign-in-content {
  width: min(100%, 440px);
  align-self: center;
  padding-block: 56px;
}

.public-sign-in-kicker {
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.public-sign-in-content h1 {
  margin-bottom: 18px;
  font-size: clamp(2.9rem, 5vw, 4.5rem);
  line-height: 1;
  text-transform: uppercase;
}

.public-sign-in-intro {
  max-width: 39ch;
  margin-bottom: 36px;
  color: var(--ink-soft);
  font-size: 1.06rem;
  line-height: 1.55;
}

.public-sign-in-form {
  display: grid;
  gap: 18px;
}

.public-sign-in-form [hidden] {
  display: none;
}

.public-sign-in-error {
  margin: 0;
  font-size: 0.86rem;
}

.public-sign-in-form input {
  min-height: 56px;
  padding-inline: 16px;
  border: 2px solid var(--ink);
  background: transparent;
  font-size: 1rem;
}

.public-sign-in-form .field-help {
  margin: -6px 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.public-sign-in-confirmation {
  display: flex;
  align-items: center;
  min-height: 56px;
  margin: 0;
  color: rgb(20 18 16 / 72%);
  font-size: 0.86rem;
  font-weight: 400;
  line-height: 1.55;
}

/* Focus announces this non-interactive status without turning it into a boxed control. */
.public-sign-in-confirmation:focus {
  outline: none;
}

.public-sign-in-retry {
  justify-self: center;
  color: var(--ink-soft);
  font-size: 0.86rem;
  text-underline-offset: 4px;
}

.sign-in-wand {
  flex: 0 0 20px;
}

.public-sign-in-form .button,
.public-sign-in-pending .button {
  width: 100%;
  justify-content: center;
}

.public-sign-in-pending {
  display: grid;
  gap: 18px;
}

.public-sign-in-apply {
  margin: 24px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.public-sign-in-apply a {
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 4px;
}

.public-sign-in-map-panel {
  position: relative;
  display: flex;
  min-height: calc(100vh - 56px);
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(36px, 5.4vw, 78px);
  background: var(--ink);
  color: var(--cream);
}

.public-sign-in-map-figure {
  display: grid;
  width: min(100%, 880px);
  grid-template-rows: auto 3.1rem;
  gap: clamp(28px, 4vh, 44px);
  margin: 0;
}

.public-sign-in-map {
  display: block;
  width: 100%;
}

.public-sign-in-map-caption {
  display: flex;
  height: 3.1rem;
  align-items: flex-start;
  justify-content: center;
  color: var(--sand);
  text-align: center;
}

.public-sign-in-map-message {
  max-width: 43ch;
  font-size: 1rem;
  line-height: 1.55;
}

.public-sign-in-map-figure.has-sequenced-copy .public-sign-in-map-message {
  opacity: 0;
  transition: opacity var(--sign-in-map-copy-fade-duration, 700ms) ease-out;
}

.public-sign-in-map-figure.has-sequenced-copy .public-sign-in-map-message.is-visible {
  opacity: 1;
}

.public-sign-in-page a:focus-visible,
.public-sign-in-page button:focus-visible,
.public-sign-in-page input:focus-visible {
  outline-color: var(--ink);
}

.public-sign-in-map-panel a:focus-visible {
  outline-color: var(--yellow);
}

@media (prefers-reduced-motion: reduce) {
  .public-sign-in-map-figure.has-sequenced-copy .public-sign-in-map-message {
    opacity: 1;
    transition: none;
  }
}

@media (max-width: 920px) {
  .public-sign-in-layout {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .public-sign-in-panel,
  .public-sign-in-map-panel {
    min-height: auto;
  }

  .public-sign-in-panel {
    padding: 32px 28px 48px;
  }

  .public-sign-in-content {
    width: min(100%, 560px);
    padding-block: 72px;
  }

  .public-sign-in-map-panel {
    min-height: 620px;
    padding: 56px 28px;
  }

  .public-sign-in-map-figure {
    width: min(100%, 760px);
  }
}

@media (max-width: 560px) {
  .public-sign-in-brand img {
    width: 150px;
  }

  .public-sign-in-content {
    padding-block: 56px;
  }

  .public-sign-in-map-panel {
    min-height: 520px;
  }

  .public-sign-in-map-figure {
    grid-template-rows: auto 4.65rem;
    gap: 24px;
  }

  .public-sign-in-map-caption {
    display: flex;
    height: 4.65rem;
  }
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.filter-row,
.card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.filter-row {
  margin-bottom: 18px;
}

.search-field {
  width: min(100%, 520px);
}

.card-heading {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.card-heading h2 {
  margin-bottom: 0;
  font-size: 1.3rem;
}

.card-heading > span {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  max-width: 100%;
  padding: 16px 32px;
  border: 2px solid currentColor;
  border-radius: 0;
  font-family: "AIRC Work Sans", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: transform 140ms ease;
}
.button:hover {
  transform: translateY(-1px);
}
.button:active {
  transform: scale(0.995);
}
.button-primary,
.button-primary:hover {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--ink);
}
.button-secondary,
.button-secondary:hover {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.public-home-hero .button-secondary,
.public-home-hero .button-secondary:hover {
  border-color: var(--cream);
  color: var(--cream);
}
:is(.journey-hero, .journey-focus-primary, .closeout-card:first-child) .button-secondary {
  color: var(--cream);
}
.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover,
  .button:active {
    transform: none;
  }
}

.text-link,
button.text-link {
  border: 0;
  background: transparent;
  color: var(--blue);
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.attention-banner,
.privacy-note,
.notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 22px 24px;
  border-radius: 0;
}

.attention-banner {
  border: 1px solid var(--ink);
  background: var(--yellow);
}

.attention-banner h2 {
  margin: 7px 0 4px;
  font-size: 1.35rem;
}

.attention-banner p,
.privacy-note p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.attention-pill,
.status-pill {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 8px 4px;
  border-radius: 0;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-transform: none;
}

.attention-pill {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--yellow);
}

.status-draft,
.status-pending_approval,
.status-changes_requested {
  background: var(--yellow);
  color: var(--ink);
}

.status-published,
.status-completed {
  background: var(--blue);
  color: var(--cream);
}

.notice {
  margin-bottom: 26px;
  border: 1px solid var(--line);
}

.notice-success {
  justify-content: flex-start;
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--ink);
}

.notice-success::before {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  /* The ink tick on a yellow square: ink on blue is too faint to read. */
  background:
    url("/brand/tick/airc-tick-only-ink.svg") center / 78% no-repeat,
    var(--yellow);
  content: "";
}

.notice-error {
  border-color: var(--red);
  background: var(--red-soft);
  color: var(--red-dark);
}

.event-list-card {
  overflow: hidden;
}

.event-list-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 21px 24px;
  border-bottom: 1px solid var(--line);
}

.event-list-row:last-child {
  border-bottom: 0;
}

.event-list-row:hover {
  background: var(--kraft);
}

.event-date-tile {
  display: flex;
  width: 58px;
  height: 62px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--yellow);
  line-height: 1;
}

.event-date-tile span {
  color: var(--ink);
  font-size: 0.63rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.event-date-tile strong {
  margin-top: 5px;
  font-size: 1.5rem;
}

.event-list-main h3 {
  margin-bottom: 7px;
  font-size: 1.15rem;
  letter-spacing: -0.018em;
}

.event-list-main h3 a {
  text-decoration: none;
}

/* Ink, like every other text link; the underline is the hover cue. */
.event-list-main h3 a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 14px;
  color: var(--ink-soft);
  font-size: 0.83rem;
}

.event-list-count {
  display: flex;
  min-width: 62px;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
}

.event-list-count strong {
  font-size: 1.25rem;
}

.event-list-count span {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.empty-workflow {
  padding: 40px;
  border: 1px dashed var(--line-strong);
  border-radius: 0;
  color: var(--ink-soft);
}

.empty-workflow strong {
  color: var(--ink);
  font-size: 1.15rem;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 20px;
}

.prose-card p,
.prose-card li {
  color: var(--ink-soft);
}

.prose-card ul {
  padding-left: 20px;
}

.detail-aside {
  display: grid;
  gap: 20px;
}

.detail-aside > div {
  display: grid;
  gap: 3px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.detail-aside small {
  color: var(--ink-faint);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.form-card,
.agreement-card {
  max-width: 900px;
  padding: clamp(24px, 4vw, 42px);
}

.wide-form,
.event-form {
  max-width: none;
}

.field {
  display: grid;
  align-content: start;
  gap: 7px;
}

.field > span,
fieldset legend {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
}

.field-span {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  min-height: 47px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  background: var(--paper-strong);
  color: var(--ink);
}

textarea {
  min-height: 112px;
  resize: vertical;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--ink);
}

fieldset {
  margin: 0 0 36px;
  padding: 0;
  border: 0;
}

fieldset legend {
  width: 100%;
  margin-bottom: 18px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}

.check-row {
  display: grid;
  grid-template-columns: 21px 1fr;
  gap: 11px;
  align-items: start;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--paper);
  cursor: pointer;
}

.check-row input {
  width: 18px;
  min-height: 18px;
  margin: 3px 0 0;
}

.agreement-card section {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.document-summary,
.draft-copy-note,
.privacy-note {
  padding: 18px;
  border-radius: 0;
  background: var(--blue-soft);
}

.document-summary {
  margin: 26px 0;
}

.document-summary h2 {
  font-size: 1.2rem;
}

.document-summary p:last-child,
.draft-copy-note {
  margin-bottom: 0;
}

.draft-copy-note {
  border: 1px solid var(--blue);
  color: var(--ink);
  font-size: 0.88rem;
}

.privacy-note {
  margin-bottom: 18px;
  border: 1px solid var(--blue);
}

.privacy-note strong {
  flex: 0 0 auto;
}

.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
}

.tabs a {
  flex: 0 0 auto;
  padding: 11px 13px;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.tabs a:hover,
.tabs a.is-active {
  box-shadow: inset 0 -4px var(--yellow);
  color: var(--ink);
}

.journey-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 24px 32px;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.journey-hero h1 {
  max-width: none;
  margin-bottom: 8px;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.journey-hero-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
  flex: 1;
}

.journey-hero .page-subtitle {
  max-width: 60ch;
  margin: 0;
  color: var(--sand);
  font-size: 19px;
}

.journey-next-action {
  flex: 0 1 auto;
  max-width: 320px;
}

.journey-next-action .button:focus-visible {
  outline-color: var(--yellow);
}

.journey-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.journey-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 430px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--ink);
  background: var(--paper);
  opacity: 1;
  transform: none;
  transition:
    opacity 320ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.has-journey-motion .journey-hero-copy,
.has-journey-motion .journey-card {
  opacity: 0;
  transform: translateY(14px);
}

.has-journey-motion .journey-hero-copy.is-mounted,
.has-journey-motion .journey-card.is-mounted {
  opacity: 1;
  transform: none;
}

.journey-hero-copy {
  transition:
    opacity 300ms ease,
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.journey-card-locked {
  border-color: #a9a49a;
  background: var(--paper);
  color: #6b675f;
  cursor: not-allowed;
}

.journey-card-locked .eyebrow {
  background: #c9c2b3;
  color: #5d5952;
}

.journey-card-heading,
.closeout-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
}

.journey-number {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border: 2px solid currentcolor;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.journey-state {
  padding: 5px 7px 4px;
  border: 1px solid currentcolor;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.journey-state-current {
  background: var(--yellow);
  color: var(--ink);
}

.journey-state-complete {
  background: var(--blue);
  color: var(--cream);
}

.journey-state-locked {
  background: transparent;
  color: #6b675f;
}

.journey-card > p:not(.eyebrow) {
  color: inherit;
}

.journey-card-clickable {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

.journey-card-clickable:hover {
  border-color: var(--blue);
  background: var(--paper-strong);
  transform: translateY(-3px);
}

.journey-card-clickable:active {
  transform: translateY(-1px) scale(0.995);
}

.journey-card-clickable:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.journey-card-cue {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid currentcolor;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.journey-card-cue span {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.journey-card-clickable:hover .journey-card-cue span,
.journey-card-clickable:focus-visible .journey-card-cue span {
  transform: translateX(4px);
}

.journey-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, 0.55fr);
  gap: 16px;
}

.journey-focus-primary {
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--ink);
  background: var(--ink);
}

.journey-focus-primary > .eyebrow {
  margin-bottom: 12px;
}

.journey-focus-primary .journey-card {
  min-height: 410px;
  opacity: 0;
  transform: translateY(18px);
}

.journey-focus-primary .journey-card.is-mounted {
  opacity: 1;
  transform: translateY(0);
}

.journey-focus-rail {
  display: grid;
  align-content: start;
  gap: 28px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
}

.journey-focus-rail h2 {
  margin: 6px 0 10px;
}

.journey-focus-rail p:last-child {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.journey-focus-rail ol {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-focus-step {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  border-top: 1px solid rgb(20 18 16 / 42%);
}

.journey-focus-step:last-child {
  border-bottom: 1px solid rgb(20 18 16 / 42%);
}

.journey-focus-step > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 2px solid currentcolor;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-weight: 800;
}

.journey-focus-step div {
  display: grid;
  gap: 1px;
}

.journey-focus-step strong {
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.08rem;
  text-transform: uppercase;
}

.journey-focus-step small {
  font-size: 0.7rem;
}

.journey-focus-step-current {
  background: var(--cream);
  box-shadow:
    -14px 0 var(--cream),
    14px 0 var(--cream);
}

.journey-focus-step-complete > span {
  background: var(--blue);
  color: var(--cream);
}

.journey-focus-step-locked {
  color: rgb(20 18 16 / 48%);
}

.agreement-terms {
  max-width: 900px;
  margin-top: 26px;
  padding: clamp(24px, 4vw, 36px);
}

.agreement-terms h2 {
  margin-bottom: 12px;
}

.agreement-terms ul {
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  padding-left: 22px;
}

.journey-profile-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--kraft);
}

.journey-profile-note h2 {
  margin: 5px 0;
}

.journey-profile-note p:last-child {
  margin-bottom: 0;
}

.closeout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.closeout-card {
  display: flex;
  min-height: 360px;
  flex-direction: column;
  padding: clamp(24px, 4vw, 40px);
}

.closeout-card:first-child {
  background: var(--ink);
  color: var(--cream);
}

.closeout-card:first-child > p:not(.eyebrow) {
  color: var(--sand);
}

.closeout-card .button {
  width: fit-content;
  margin-top: auto;
}

.attendance-form {
  overflow: hidden;
}

.attendance-form-heading,
.attendance-finalize {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.attendance-form-heading {
  border-bottom: 1px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
}

.attendance-form-heading h2,
.attendance-form-heading p {
  margin-bottom: 0;
}

.attendance-form-heading > p {
  color: var(--sand);
  font-size: 0.84rem;
}

.attendance-rows {
  display: grid;
}

.attendance-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 280px);
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.attendance-row > span {
  display: grid;
}

.attendance-row small {
  color: var(--ink-faint);
}

.attendance-row select {
  min-height: 42px;
}

.attendance-finalize {
  align-items: flex-end;
  background: var(--kraft);
}

.attendance-finalize .check-row {
  max-width: 660px;
}

.quiet-note {
  color: var(--ink-faint);
  font-size: 0.84rem;
}

.agreement-terms .quiet-note {
  margin-bottom: 0;
}

.photo-upload-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
  align-items: start;
  gap: 18px;
}

.photo-upload-card,
.photo-guidance {
  display: grid;
  gap: 22px;
  padding: clamp(24px, 4vw, 40px);
}

.photo-drop-field {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 28px;
  border: 2px dashed var(--ink);
  background: var(--kraft);
  cursor: pointer;
  text-align: center;
}

.photo-drop-field:hover,
.photo-drop-field.is-dragging {
  border-style: solid;
  background: var(--yellow);
}

.photo-drop-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.photo-drop-mark {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--yellow);
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 2.4rem;
  line-height: 1;
}

.photo-drop-field strong {
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.45rem;
}

.photo-drop-field small {
  color: var(--ink-soft);
}

.photo-guidance {
  background: var(--ink);
  color: var(--cream);
}

.photo-guidance ul {
  margin: 0;
  padding-left: 20px;
}

.photo-guidance li {
  margin-bottom: 10px;
  color: var(--sand);
}

.photo-guidance .quiet-note {
  color: var(--yellow);
}

.guest-table-card {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--ink-faint);
  font-size: 0.69rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

tbody tr:last-child td {
  border-bottom: 0;
}

td input[type="checkbox"] {
  width: 17px;
  min-height: 17px;
  vertical-align: -3px;
}

.resource-list,
.link-list {
  overflow: hidden;
}

.resource-row,
.link-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

.resource-row:last-child,
.link-list > a:last-child {
  border-bottom: 0;
}

.resource-row > div,
.link-list > a {
  min-width: 0;
}

.resource-row strong,
.resource-row span,
.link-list strong,
.link-list span {
  display: block;
}

.resource-row div > span,
.link-list span {
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.link-list > a:hover {
  background: var(--kraft);
}

.lesson-number {
  display: block;
  margin-bottom: 24px;
  color: var(--blue);
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 2.2rem;
  font-weight: 800;
}

/* A text link like every other: ink, the label underlined, and only the
   arrow moves. It used to go blue on hover, alone in the portal (Jacob,
   2026-09-21). */
.back-link {
  display: inline-flex;
  gap: 0.35em;
  margin-bottom: 28px;
  color: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.back-link > span:not([aria-hidden="true"]) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-actions form {
  margin: 0;
}

.agreement-acknowledgement,
.cohost-invite-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 24px;
  padding: 24px 26px;
}

.agreement-acknowledgement h2,
.cohost-invite-card h2 {
  margin: 3px 0 6px;
}

.agreement-acknowledgement p,
.cohost-invite-card p {
  max-width: 680px;
  margin: 0;
  color: var(--ink-soft);
}

.cohost-invite-card form {
  display: flex;
  min-width: min(390px, 44%);
  align-items: end;
  gap: 10px;
}

.cohost-invite-card .field {
  min-width: 210px;
  flex: 1;
}

.detail-aside > form {
  display: grid;
  gap: 10px;
}

.invitation-account-warning {
  padding: 14px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--yellow);
}

.invitation-account-warning p {
  margin: 4px 0 9px;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.invitation-account-warning form {
  margin: 0;
}

.portal-footer {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 30px max(24px, calc((100vw - var(--content)) / 2));
  background: var(--ink);
  color: var(--sand);
  font-size: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto;
    transition-duration: 0.01ms;
  }

  .journey-card {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1080px) {
  .portal-app-public .portal-topbar {
    grid-template-columns: 1fr auto;
  }

  .portal-app-public:not(.portal-app-signed-in) .portal-nav {
    display: none;
  }
}

@media (max-width: 980px) {
  .public-home-hero-grid {
    grid-template-columns: 1fr;
  }

  .public-home-mount {
    width: min(100%, 640px);
  }

  .public-training-row {
    grid-template-columns: 76px minmax(190px, 0.75fr) minmax(280px, 1.25fr);
  }
}

@media (max-width: 920px) {
  .funding-support {
    grid-template-columns: 1fr;
  }

  .portal-topbar {
    grid-template-columns: 1fr auto;
  }

  .portal-nav {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0;
    padding-bottom: env(safe-area-inset-bottom);
    background: rgb(20 18 16 / 98%);
  }

  .portal-app-public:not(.portal-app-signed-in) .portal-nav {
    display: none;
  }

  .portal-app-public .portal-footer {
    margin-bottom: 0;
  }

  .portal-app-public .main-content {
    padding-bottom: 72px;
  }

  .portal-app-public .main-content-public-home {
    padding: 0;
  }

  .nav-item {
    gap: 2px;
    padding: 14px 1px 13px;
    font-size: 0.7rem;
    text-align: center;
    white-space: nowrap;
  }

  .nav-lock {
    width: 10px;
    height: 10px;
    flex-basis: 10px;
  }

  .nav-item::after {
    top: 0;
    right: 22%;
    bottom: auto;
    left: 22%;
  }

  .main-content {
    padding-bottom: 110px;
  }

  .portal-footer {
    margin-bottom: 60px;
  }

  .three-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .journey-focus {
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  }

  .three-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .public-home-promise-grid,
  .public-home-close-grid,
  .portal-app-public .public-site-footer {
    grid-template-columns: 1fr;
  }

  .public-home-promise-grid {
    gap: 24px;
  }

  .public-home-sticky-nav-inner {
    min-height: 76px;
    gap: 16px;
    padding-block: 10px;
  }

  .public-home-sticky-brand img {
    width: 150px;
  }

  .public-home-sticky-actions .button {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.72rem;
  }

  .public-training-row {
    grid-template-areas:
      "date timing"
      "details details";
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 16px;
    row-gap: 20px;
  }

  .public-home-close-grid,
  .portal-app-public .public-site-footer {
    align-items: start;
    gap: 32px;
  }
}

@media (max-width: 680px) {
  .preview-bar {
    flex-wrap: wrap;
    gap: 5px 10px;
    padding: 8px 12px;
  }

  .preview-bar > span {
    display: none;
  }

  .journey-concept-picker {
    grid-template-columns: 1fr;
    margin-top: -20px;
  }

  .journey-concept-picker > div {
    display: none;
  }

  .journey-concept-picker a {
    min-height: 52px;
    padding: 8px;
    text-align: center;
  }

  .journey-concept-picker a span {
    display: none;
  }

  .portal-topbar {
    min-height: 66px;
    padding: 8px 16px;
  }

  .portal-brand img {
    width: 124px;
  }

  .portal-product-label {
    display: none;
  }

  .main-content {
    padding: 38px 16px 96px;
  }

  .portal-app-public .main-content-public-home {
    padding: 0;
  }

  .page-header,
  .section-heading-row,
  .filter-row,
  .attention-banner,
  .privacy-note,
  .agreement-acknowledgement,
  .cohost-invite-card,
  .portal-footer,
  .journey-hero,
  .journey-profile-note,
  .attendance-form-heading,
  .attendance-finalize {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-header {
    gap: 20px;
  }

  .public-header-sign-in {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 0.78rem;
  }

  .public-wrap {
    padding-inline: 28px;
  }

  .public-home-sticky-nav-inner {
    gap: 12px;
    padding-inline: 16px;
  }

  .public-home-sticky-brand img {
    width: 110px;
  }

  .public-home-sticky-actions {
    gap: 6px;
  }

  .public-home-sticky-actions .button {
    padding: 8px 10px;
    font-size: 0.68rem;
  }

  .public-home-sticky-sign-up-full {
    display: none;
  }

  .public-home-sticky-sign-up-short {
    display: inline;
  }

  .public-home-hero {
    padding-block: 64px 56px;
  }

  .public-home-lockup {
    width: min(100%, 290px);
  }

  .public-home-band {
    font-size: 2rem;
  }

  .public-home-promise,
  .public-home-expect,
  .public-live-training,
  .public-home-close {
    padding-block: 56px 64px;
  }

  .public-expect-list {
    margin-top: 32px;
  }

  .public-expect-list article {
    grid-template-columns: 52px 1fr;
    gap: 16px;
  }

  .public-step-number {
    width: 52px;
    height: 52px;
    font-size: 1.5rem;
  }

  .public-training-list {
    margin-top: 32px;
  }

  .public-training-date-tile {
    width: 64px;
  }

  .public-training-date-tile strong {
    font-size: 1.9rem;
  }

  .portal-app-public .public-site-footer {
    padding-block: 44px;
  }

  .public-home-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-home-actions .button,
  .public-home-close .button {
    width: 100%;
  }

  h1 {
    font-size: clamp(2.35rem, 13vw, 3.5rem);
  }

  .three-grid,
  .two-grid,
  .three-field-grid,
  .detail-grid,
  .journey-track,
  .closeout-grid,
  .photo-upload-layout {
    grid-template-columns: 1fr;
  }

  .journey-card {
    min-height: 0;
  }

  .journey-focus {
    grid-template-columns: 1fr;
  }

  .journey-focus-primary {
    padding: 18px;
  }

  .journey-focus-primary .journey-card {
    min-height: 0;
  }

  .journey-focus-rail {
    padding: 22px;
  }

  .journey-hero {
    padding: 24px;
  }

  .journey-next-action,
  .journey-next-action .button {
    width: 100%;
    max-width: none;
  }

  .attendance-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .three-grid > :last-child:nth-child(odd),
  .field-span {
    grid-column: auto;
  }

  .action-card,
  .summary-card,
  .step-card {
    min-height: 0;
  }

  .event-list-row {
    grid-template-columns: 54px 1fr;
    gap: 14px;
    padding: 17px;
  }

  .event-list-count {
    display: none;
  }

  .event-date-tile {
    width: 52px;
    height: 58px;
  }

  .event-meta {
    display: grid;
    gap: 3px;
  }

  .resource-row,
  .link-list > a {
    align-items: flex-start;
    flex-direction: column;
  }

  .form-card,
  .agreement-card {
    padding: 22px 18px;
  }

  .button-row .button,
  .form-card > .button,
  .detail-aside .button,
  .agreement-acknowledgement .button,
  .cohost-invite-card form {
    width: 100%;
  }

  .cohost-invite-card form {
    min-width: 0;
    align-items: stretch;
    flex-direction: column;
  }

  .portal-footer {
    padding: 24px 16px;
  }
}

/* Keep signed-in navigation with the sticky header on tablets and phones. */
@media (max-width: 1180px) {
  .portal-app-signed-in .portal-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 16px;
  }

  .portal-app-signed-in .portal-account {
    grid-column: 2;
    grid-row: 1;
  }

  .portal-app-signed-in .portal-nav {
    position: static;
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .portal-app-signed-in .nav-item {
    min-height: 44px;
    padding: 10px 4px;
    font-size: 0.85rem;
  }

  .portal-app-signed-in .nav-item::after {
    top: auto;
    right: 12px;
    bottom: 3px;
    left: 12px;
  }

  .portal-app-signed-in .portal-footer {
    margin-bottom: 0;
  }
}

@media (max-width: 540px) {
  .portal-app-signed-in .portal-nav {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .portal-app-signed-in .nav-item {
    grid-column: span 2;
  }

  .portal-app-signed-in .nav-item:nth-child(n + 4) {
    grid-column: span 3;
  }
}

/* Native agreements: one reading column and one consistent action pattern. */
.main-content:has(.signing-reader) {
  padding-top: 28px;
}
.signing-reader {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 12px 32px;
  overflow-wrap: anywhere;
}
main.signing-reader {
  margin: 40px auto;
  padding: 24px;
}
.signing-reader h1 {
  font-family: "AIRC Oswald", sans-serif;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 16px;
}
.signing-heading {
  margin: 0 0 36px;
}
.signing-heading > p:last-child {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
  color: #514c43;
}
.signing-reader .signing-eyebrow {
  font:
    600 0.75rem / 1.4 "AIRC Work Sans",
    sans-serif;
  text-transform: none;
  margin: 0 0 12px;
  color: #625b4f;
  font-weight: 700;
}
.signing-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  padding: 0 0 24px;
  margin: 0 0 36px;
  border-bottom: 1px solid #d7d0c3;
}
.signing-progress li {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: #716a5d;
  overflow-wrap: normal;
}
.signing-progress li[aria-current="step"] {
  color: var(--ink);
  font-weight: 600;
}
.signing-step-number {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink);
  font-size: 0.75rem;
}
.signing-progress li[aria-current="step"] .signing-step-number {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.signing-progress li[data-complete="true"] .signing-step-number {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--yellow);
}
.signing-copy {
  font-size: 1rem;
  line-height: 1.7;
}
.signing-copy p {
  margin: 0 0 18px;
}
.signing-copy p > strong {
  font-weight: 700;
}
.signing-reader .signing-copy h2 {
  font:
    750 1.05rem / 1.4 "AIRC Work Sans",
    sans-serif;
  margin: 32px 0 10px;
}
.signing-reader .signing-copy h2.signing-section-heading {
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: none;
  padding-top: 8px;
  margin-top: 32px;
}
.signing-reader form {
  margin: 32px 0 24px;
  border-top: 1px solid #c8c0b2;
  padding-top: 24px;
}
.signing-reader label {
  display: block;
  font-size: 1rem;
  margin: 16px 0;
}
.signing-reader input:not([type="checkbox"]):not([type="radio"]),
.signing-reader select {
  display: block;
  width: 100%;
  font: inherit;
  padding: 12px;
  margin-top: 8px;
  background: #f2efe8;
  border: 1px solid #a59b89;
  border-radius: 4px;
}
.signing-action {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.media-permission {
  margin-block: 32px 40px;
  padding-block: 24px;
  border-block: 1px solid var(--ink);
  scroll-margin-top: 120px;
}
.media-permission-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.media-permission-heading h2 {
  margin: 0;
  font-size: 1.4rem;
}
.media-permission-heading > span,
.signing-reader .media-permission-note {
  font-size: 0.85rem;
  color: #514c43;
}
.signing-reader .media-permission form {
  border: 0;
  margin: 20px 0 0;
  padding: 0;
}
.media-permission-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-block: 24px 16px;
}
.media-permission-skip {
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.signing-reader .media-permission-actions :focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.media-profile {
  margin-top: 32px;
}
.signing-reader .signing-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  line-height: 1.55;
  cursor: pointer;
  min-height: 44px;
}
.signing-reader .signing-check input[type="checkbox"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  padding: 0;
  margin: 3px 0 0;
  accent-color: var(--ink);
}
.signing-action > .button {
  justify-self: start;
  max-width: 100%;
  margin: 0;
}
.signing-action .signing-intent,
.signing-action .signing-next {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #514c43;
}
.signing-reader details {
  margin: 20px 0;
}
.signing-reader summary {
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.9rem;
}
.signing-reader .signing-preview {
  margin: 0 0 24px;
  color: #625b4f;
}
.signing-preview summary {
  font-size: 0.75rem;
  padding: 8px 0;
}
.signing-preview p {
  font-size: 0.875rem;
}
.signing-record {
  border-bottom: 1px solid #d7d0c3;
}
.signing-record > summary {
  font-weight: 600;
}
.signing-history {
  border-top: 1px solid #d7d0c3;
}
.signing-finish {
  display: inline-block;
  font-size: 0.875rem;
  padding: 8px 0;
  color: #514c43;
}
.signing-age {
  padding-top: 24px;
}
.signing-age .signing-heading > p:last-child {
  font-size: 19px;
}
.signing-age form {
  border: 0;
  padding: 0;
}
.signing-age fieldset {
  min-width: 0;
  padding: 0;
  margin: 0 0 24px;
  border: 0;
}
.signing-age .signing-age-choice {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  margin: 0 0 12px;
  padding: 16px;
  border: 2px solid var(--ink);
  font-size: 19px;
  line-height: 1.5;
  cursor: pointer;
}
.signing-age-choice:has(input:checked) {
  background: var(--kraft);
}
.signing-age-choice input[type="radio"] {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}
.signing-age-next,
.signing-age-preview {
  font-size: 14px;
  line-height: 1.6;
  color: #514c43;
}
.signing-age-next {
  margin: 12px 0 0;
}
.signing-age-preview {
  margin: 0 0 24px;
}
.signing-reader .notice {
  display: block;
  border: 2px solid var(--ink);
  padding: 12px 16px;
  font-size: 0.875rem;
  background: var(--kraft);
  margin-bottom: 24px;
}
.signing-reader .notice a {
  white-space: nowrap;
}
@media (max-width: 480px) {
  .main-content:has(.signing-reader) {
    padding: 20px 20px 80px;
  }
  .signing-reader {
    padding: 0 0 24px;
  }
  main.signing-reader {
    margin: 16px auto;
    padding: 20px;
  }
  .signing-reader h1 {
    font-size: 2rem;
  }
  .signing-progress {
    gap: 12px;
    margin-bottom: 28px;
  }
  .signing-progress li {
    font-size: 0.75rem;
    gap: 6px;
    align-items: flex-start;
  }
  .signing-step-number {
    flex-basis: 22px;
    width: 22px;
    height: 22px;
  }
  .signing-heading {
    margin-bottom: 28px;
  }
}

/* Agreement library: status overview, with the full document one disclosure away. */
.agreements-preview,
.agreements-progress,
.agreement-card-meta {
  font-size: 0.875rem;
  color: #646159;
}
.agreements-preview {
  margin-bottom: 24px;
}
.agreements-progress {
  margin-bottom: 12px;
  font-weight: 600;
}
.agreement-card-list {
  display: grid;
  gap: 16px;
}
.agreement-overview-card {
  padding: 28px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
}
.agreement-card-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 16px;
}
.agreement-card-heading h2 {
  font-family: "AIRC Work Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.agreement-overview-card > p {
  line-height: 1.6;
  margin: 12px 0 20px;
  color: #55544e;
}
.agreement-status {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  max-width: 13ch;
  padding-top: 4px;
  font-family: "AIRC Work Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
  text-align: right;
  text-transform: none;
  color: var(--ink);
}
.agreement-status.is-complete {
  white-space: nowrap;
}
.agreement-status-tick {
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
}
.agreement-card-document {
  margin: 20px 0;
}
.agreement-card-document summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.agreement-card-document[open] summary {
  margin-bottom: 24px;
}
.agreement-card-document .signing-copy {
  border-top: 1px solid #e8e0ce;
  padding-top: 24px;
}
.agreement-overview-card .button {
  margin-top: 4px;
}
@media (max-width: 600px) {
  .agreement-overview-card {
    padding: 20px;
  }
  .agreement-card-heading {
    column-gap: 12px;
  }
}

.journey-card-optional .journey-card-heading {
  min-height: 42px;
  justify-content: flex-end;
}

.journey-independent .journey-step {
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  padding: 28px 0;
  border-top: 1px solid var(--line-strong);
}

.journey-independent .journey-step::before {
  display: none;
}

/* Text CTAs with a trailing arrow (Jacob, 2026-09-18).
   The label span carries the underline; the anchor itself carries none, because
   a text-decoration set on the anchor is painted straight through the arrow no
   matter what the arrow's own display or decoration is. The arrow slides on
   hover. Buttons, the top nav and the brand lockup are excluded: not text links. */
.portal-app
a:not(.button, .nav-item, .portal-brand):has(> span[aria-hidden="true"]):has(
  > span:not([aria-hidden="true"])
) {
  text-decoration: none;
}
.portal-app
  a:not(.button, .nav-item, .portal-brand):has(> span[aria-hidden="true"])
  > span:not([aria-hidden="true"]) {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.portal-app a:not(.button, .nav-item, .portal-brand) > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.15s ease;
}
.portal-app a:not(.button, .nav-item, .portal-brand):hover > span[aria-hidden="true"] {
  transform: translateX(4px);
}
/* The nudge follows the glyph: a cue that points down or out of the page moves
   that way on hover, rather than sliding right like the → it is not. */
.portal-app a:not(.button, .nav-item, .portal-brand):hover > span.cue-down[aria-hidden="true"] {
  transform: translateY(4px);
}
.portal-app a:not(.button, .nav-item, .portal-brand):hover > span.cue-out[aria-hidden="true"] {
  transform: translate(3px, -3px);
}
/* A back cue moves back. */
.portal-app a:not(.button, .nav-item, .portal-brand):hover > span.cue-back[aria-hidden="true"],
.back-link:hover > span.cue-back[aria-hidden="true"] {
  transform: translateX(-4px);
}
.back-link > span[aria-hidden="true"] {
  display: inline-block;
  transition: transform 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .portal-app a:not(.button, .nav-item, .portal-brand) > span[aria-hidden="true"] {
    transition: none;
  }
}

/* What the Ramp card covers — Home's funding request and Resources' card
   section share one component and these rules. Ledger rows separated by
   rules, a small uppercase label per column, no panel. */
.ramp-rules {
  margin: 28px 0 24px;
}
/* Class selector (0,2,0) so Resources' `.ramp-resource-body h3` cannot restyle it. */
.ramp-rules .ramp-rules-title {
  margin: 0 0 14px;
  font-family: "AIRC Oswald", "Arial Narrow", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ramp-rules-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}
.ramp-rules-label {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}
.ramp-rules ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ramp-rules li {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font-size: 15px;
  line-height: 1.5;
}
.ramp-rules-intro {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  .ramp-rules-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
.ramp-tabpanel .ramp-rules {
  margin-top: 4px;
}

/* Home's two-line summary inside a funding checklist row. The row's own
   li rules (padding, border) must not reach these nested items. */
.funding-question .funding-requirements .ramp-summary-list {
  margin: 8px 0 10px;
  padding: 0 0 0 1.1em;
  list-style: disc;
}
.funding-question .funding-requirements .ramp-summary-list li {
  padding: 3px 0;
  border-bottom: 0;
}
.ramp-summary-label {
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

/* Q&A practice (apps/volunteer-interviewer). The cast is the entry point:
   each character card starts a session. Ink callout for what to work on;
   square corners, 2px ink outlines, yellow only for the selected question
   and the hovered card's action. No accent strips. */
.practice-pick {
  display: grid;
  gap: 24px;
}

.practice-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}

.practice-topics {
  min-width: 0;
}

/* The portal's form-group legend rule doesn't suit a one-row selector. */
.practice-topics legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  border-bottom: 0;
  font-weight: 700;
}

.practice-topics label {
  position: relative;
}

.practice-topics input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.practice-topics span {
  display: inline-block;
  padding: 8px 16px;
  border: 2px solid var(--ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.practice-topics input:checked + span {
  background: var(--yellow);
}

.practice-topics input:focus-visible + span {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.practice-cast {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.practice-person {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease;
}

/* The drawn character on kraft paper (packages/shared/src/practice-cast.ts). */
.practice-person-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 2px solid var(--ink);
  background: var(--kraft);
}

.practice-person-art svg {
  display: block;
  width: auto;
  height: 96%;
}

/* Panel card: three of the cast, overlapping like a row of seats. */
.practice-panel-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.practice-panel-art > span {
  width: 38%;
  margin: 0 -5%;
}

.practice-panel-art > span:nth-child(2) {
  position: relative;
  z-index: 1;
}

.practice-panel-art > span > span {
  display: block;
}

.practice-panel-art svg {
  width: 100%;
  height: auto;
}

/* Cast animation hooks: mouth shapes, blink, head tilt. Mirrors CAST_CSS in practice-cast.ts. */
.cast-defs,
.cast-defs svg {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.cast-portrait .mouth > * {
  visibility: hidden;
}

.cast-portrait .mouth[data-shape="0"] .m0,
.cast-portrait .mouth[data-shape="1"] .m1,
.cast-portrait .mouth[data-shape="2"] .m2,
.cast-portrait .mouth[data-shape="3"] .m3,
.cast-portrait .mouth[data-shape="4"] .m4,
.cast-portrait .mouth[data-shape="5"] .m5 {
  visibility: visible;
}

/* Expressions: only the face pieces for the current mood show. Mirrors CAST_CSS. */
.cast-portrait .mood > * {
  display: none;
}

.cast-portrait[data-mood="neutral"] .mood > .mood-neutral,
.cast-portrait[data-mood="skeptical"] .mood > .mood-skeptical,
.cast-portrait[data-mood="frustrated"] .mood > .mood-frustrated,
.cast-portrait[data-mood="curious"] .mood > .mood-curious,
.cast-portrait[data-mood="warm"] .mood > .mood-warm {
  display: inline;
}

.cast-portrait .eyes {
  animation: cast-blink 4.6s infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.cast-portrait .head {
  transform-origin: 100px 140px;
}

.practice-person:nth-child(2) .cast-portrait .eyes,
.practice-stage-cast > :nth-child(2) .cast-portrait .eyes {
  animation-delay: -1.7s;
}

.practice-stage-cast > :nth-child(3) .cast-portrait .eyes {
  animation-delay: -3.1s;
}

/* Signs of life on the call's stage only (each portrait's paper texture is redrawn every
   frame it moves, so the gallery and thumbnails stay still): a slow breath, quick eye glances
   and brow flicks, the last two driven by client/practice.ts. */
.practice-stage-cast .cast-portrait .breath {
  animation: cast-breathe 4.4s ease-in-out infinite;
}

.practice-stage-cast > :nth-child(2) .cast-portrait .breath {
  animation-delay: -1.6s;
}

.practice-stage-cast > :nth-child(3) .cast-portrait .breath {
  animation-delay: -3s;
}

.cast-portrait .pupil {
  transition: transform 90ms ease-out;
}

.cast-portrait .brow-set {
  transition: transform 140ms ease-out;
}

@keyframes cast-breathe {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-0.9px);
  }
}

@keyframes cast-blink {
  0%,
  95% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
  98%,
  100% {
    transform: scaleY(1);
  }
}

.practice-person-body {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  padding: 16px;
}

.practice-person-name {
  font-family: "AIRC Oswald", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.practice-person-meta {
  font-size: 16px;
  font-weight: 600;
}

.practice-person-outlook {
  font-size: 16px;
  line-height: 1.45;
}

.practice-person-footer {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
  font-size: 15px;
}

.practice-person-cta {
  padding: 2px 8px;
  font-weight: 700;
  text-transform: uppercase;
}

.practice-person:hover:not(:disabled) {
  transform: translateY(-2px);
}

.practice-person:hover:not(:disabled) .practice-person-cta,
.practice-person:focus-visible .practice-person-cta {
  background: var(--yellow);
}

.practice-person:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.practice-person:active:not(:disabled) {
  transform: scale(0.995);
}

.practice-person:disabled {
  cursor: progress;
  opacity: 0.6;
}

.practice-card {
  display: grid;
}

/* Group headings get the ink rule used under section headings elsewhere in the portal. */
.practice-group-heading {
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}

.practice-group-heading .section-heading {
  margin-bottom: 0;
}

.practice-points-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 600;
  cursor: pointer;
}

.practice-points-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}

/* During a session: the person's talking points under the conversation, while the switch is on. */
.practice-stage-points {
  border: 2px solid var(--ink);
  background: var(--cream);
}

.practice-stage-points[hidden] {
  display: none;
}

.practice-points-body {
  padding: 16px;
  font-size: 15px;
}

.practice-points-body p {
  margin: 0 0 8px;
}

.practice-points-asks span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.practice-points-body ol {
  margin: 0 0 8px;
  padding-left: 20px;
  line-height: 1.45;
}

.practice-points-body li {
  margin-bottom: 6px;
}

/* One answer at a time, with the same reading order before and during a call. */
.practice-guide {
  display: grid;
  gap: 18px;
  margin-bottom: 12px;
}
.practice-guide h4 {
  margin: 0 0 6px;
  font:
    700 13px / 1.3 "AIRC Work Sans",
    sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.practice-guide p {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}
.practice-guide .practice-guide-question {
  margin-bottom: 12px;
  font-weight: 600;
}
.practice-guide .practice-guide-note {
  margin: 12px 0;
  color: var(--ink-soft);
  font-size: 15px;
}
ul.practice-guide-line {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  font-size: 16px;
  line-height: 1.45;
}
ul.practice-guide-line li::marker {
  color: var(--ink);
}
.practice-guide-callout {
  padding: 12px 14px;
  border: 2px solid var(--yellow);
  background: color-mix(in srgb, var(--yellow) 25%, transparent);
}
.practice-guide-avoid {
  padding: 12px 14px;
  border: 2px solid var(--red);
  background: color-mix(in srgb, var(--red) 6%, transparent);
}
.practice-guide summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  font:
    600 16px / 1.4 "AIRC Work Sans",
    sans-serif;
}
.practice-guide summary::-webkit-details-marker {
  display: none;
}
.practice-guide summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}
.practice-guide details[open] > summary::after {
  content: "−";
}
.practice-guide summary:focus-visible,
.practice-drawer-head button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.practice-guide details[open] > p,
.practice-guide details[open] > ul {
  margin-top: 12px;
}
.practice-guide-option {
  padding: 12px 0;
  border-top: 1px solid var(--sand);
}
.practice-guide-avoid > summary {
  color: var(--red);
}
.practice-stage-points-person[hidden] {
  display: none;
}
.practice-session-points {
  margin: 12px 0 0;
  font-size: 15px;
}

.practice-points-draft {
  font-size: 13px;
  font-style: italic;
}

.practice-room[data-state="live"] .practice-points-draft {
  display: none;
}

.practice-stage-points h3 {
  margin: 16px 16px 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: 20px;
}

/* Practice / Progress / History: the event dashboard's section menu, as real links. */
.practice-tabs {
  display: flex;
  margin: 0 0 40px;
  overflow-x: auto;
  border: 1px solid var(--ink);
  background: var(--cream);
}

.practice-tabs a {
  display: inline-flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 14px 20px;
  border-right: 1px solid var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.practice-tabs a:last-child {
  border-right: 0;
}

.practice-tabs a:hover {
  background: var(--yellow);
}

.practice-tabs a[aria-current="page"] {
  background: var(--ink);
  color: var(--cream);
}

.practice-tabs a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: -6px;
}

.practice-tabs a[aria-current="page"]:focus-visible {
  outline-color: var(--yellow);
}

/* Phones: the four tabs as a two-by-two grid instead of a row that scrolls. */
@media (max-width: 700px) {
  .practice-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .practice-tabs a {
    min-height: 48px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--ink);
    font-size: 14px;
    text-align: center;
    white-space: normal;
  }
  .practice-tabs a:nth-child(2n) {
    border-right: 0;
  }
  .practice-tabs a:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* Carousel: a strip of faces in two groups, then one person at a time, large. */
.practice-carousel {
  display: grid;
  gap: 24px;
}

/* The face strip sits centered above the slide: pick a person, then see them large. */
.practice-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: center;
}

.practice-picker-label {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practice-picker-row {
  display: flex;
  gap: 8px;
}

.practice-thumb {
  display: grid;
  grid-template-rows: 58px auto;
  gap: 4px;
  justify-items: center;
  align-items: center;
  width: 76px;
  padding: 4px 4px 5px;
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.practice-thumb-art {
  display: grid;
  place-items: center;
  width: 52px;
  height: 58px;
}

.practice-thumb-art > span {
  width: 100%;
}

.practice-thumb-name {
  white-space: nowrap;
}

.practice-thumb-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.practice-thumb .practice-panel-art {
  display: flex;
  align-items: center;
  width: 100%;
}

.practice-thumb .practice-panel-art > span {
  width: 46%;
  margin: 0 -8%;
}

.practice-thumb:hover {
  border-bottom-color: var(--yellow);
}

/* The selected face: an ink bar under it, the way the current tab is marked. */
.practice-thumb[aria-selected="true"] {
  border-bottom-color: var(--ink);
}

.practice-thumb:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.practice-slides {
  position: relative;
}

.practice-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border: 2px solid var(--ink);
  background: var(--cream);
}

.practice-slide[hidden] {
  display: none;
}

.practice-slide-art {
  display: grid;
  place-items: center;
  padding: 20px;
  border-right: 2px solid var(--ink);
  background: var(--kraft);
}

.practice-slide-art > span {
  display: block;
  /* Never taller than the screen leaves room for: the card is about 1.2x as tall as wide. */
  width: min(100%, 300px, calc((100vh - 330px) * 0.82));
}

.practice-slide-art .practice-panel-art {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.practice-slide-art .practice-panel-art > span {
  width: 38%;
  margin: 0 -3%;
}

.practice-slide-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.practice-slide-body {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: clamp(20px, 3vw, 36px);
}

.practice-slide-body h3 {
  margin: 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: clamp(34px, 3.6vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
}

.practice-slide-meta {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

/* The slide body is three blocks: who (name, role), the question, what to do. More space
   between blocks than within them. */
.practice-slide-hero {
  max-width: 24ch;
  margin: 10px 0 0;
  padding: 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.practice-slide-hero span {
  display: block;
  margin-bottom: 4px;
  font-family: "Work Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.practice-slide-outlook {
  max-width: 48ch;
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.practice-slide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  margin-top: 14px;
}

.practice-slide-count {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

/* The mic note, once, under the carousel. */
.practice-carousel-note {
  max-width: 70ch;
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* A redo in place of the description: the moment, what was said, the better line. */
.practice-slide-redo {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.practice-slide-redo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.practice-slide-status:empty {
  display: none;
}

/* Feedback after the session: on by default, off for a judgment-free session. */
.practice-feedback-toggle {
  display: flex;
  gap: 8px;
  align-items: center;
  width: fit-content;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.practice-feedback-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--ink);
}

.practice-feedback-toggle input:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* The "Pick someone" link lands on the face strip, clear of the sticky header. */
#practice-pick {
  scroll-margin-top: 88px;
}

/* How it works, between the intro and the tabs: tucked under the intro, bullets the page's width. */
.page-header:has(+ .practice-how) {
  margin-bottom: 24px;
}

.practice-how {
  margin: 0 0 40px;
}

.practice-how h2 {
  margin: 0 0 8px;
  font-size: 24px;
}

.practice-how ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.2em;
  line-height: 1.55;
}

/* Previous and next sit on the slide's edges, centered on the portrait. */
.practice-carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(-50%);
}

.practice-carousel-prev {
  left: -22px;
}

.practice-carousel-next {
  right: -22px;
}

.practice-carousel-arrow:hover {
  background: var(--yellow);
}

.practice-carousel-arrow:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.practice-session {
  scroll-margin-top: 140px;
  display: grid;
  gap: 16px;
  max-width: 880px;
}

/* Mounted frame, as on the training photos: ink mount at 7% of its own width,
   the frozen frame drawn over it. Full color, because this is a live person. */
.practice-stage-mount {
  position: relative;
  padding: 7%;
  background: var(--ink);
}

.practice-stage-mount::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/brand/photo/airc-photo-frame-mounted.svg") center / 100% 100%;
  pointer-events: none;
}

.practice-stage-cast {
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9;
  background: var(--kraft);
}

.practice-stage-cast > span {
  display: block;
  height: 92%;
}

.practice-stage-cast svg {
  display: block;
  width: auto;
  height: 100%;
}

/* Panel: three people in a row; whoever isn't speaking sits back a little. */
.practice-stage-cast[data-count="3"] > span {
  height: 76%;
  margin: 0 -1%;
  transition: transform 0.25s ease;
}

.practice-stage-cast[data-count="3"] > [data-speaking] {
  transform: translateY(-3%) scale(1.06);
}

/* The call: hidden on the practice page until Start, then it fills the screen with the
   person, a control bar along the bottom, and a right column for talking points. */

.practice-room-stage {
  display: grid;
  place-items: center;
}

.practice-room-bar {
  view-transition-name: practice-bar;
}

.practice-room .practice-stage-cast {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: clamp(260px, 48vh, 440px);
  padding-top: 20px;
  overflow: hidden;
  background: none;
}

.practice-room .practice-stage-cast > span {
  display: block;
  height: 100%;
}

.practice-room .practice-stage-cast svg {
  display: block;
  width: auto;
  height: 100%;
}

.practice-room .practice-stage-cast[data-count="3"] > span {
  height: 72%;
  margin: 0 -1%;
}

.practice-room-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
}

.practice-room-controls[hidden],
.practice-room-bar[hidden] {
  display: none;
}

/* Before a call, only the Hints drawer and its tab are on the page; the call itself waits. */
.practice-room[data-state="idle"] .practice-room-call {
  display: none;
}

/* The drawer's width, shared with the tab that rides on its edge. */
.practice-room {
  --practice-drawer-width: min(420px, 92vw);
}

/* Live: the call takes over the whole screen. */
.practice-room[data-state="live"] {
  --practice-drawer-width: min(420px, 38vw);
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--cream);
}

.practice-room[data-state="live"] .practice-room-call {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  height: 100vh;
  margin: 0;
}

.practice-room[data-state="live"] .practice-room-stage {
  height: 100%;
}

.practice-room[data-state="live"] .practice-stage-cast {
  height: 100%;
  padding-top: 4vh;
}

.practice-room[data-state="live"] .practice-stage-cast[data-count="3"] > span {
  height: 64%;
}

.practice-room-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 16px 24px;
  align-items: center;
  padding: 16px clamp(16px, 3vw, 32px);
  border-top: 2px solid var(--ink);
  background: var(--cream);
}

.practice-room-bar-name {
  margin: 0;
}

.practice-room-bar-name strong {
  font-family: "AIRC Oswald", sans-serif;
  font-size: 26px;
  font-weight: 600;
}

.practice-room-bar-name span {
  display: block;
  color: var(--ink-soft);
}

/* Close: top left of the call, back to the carousel. Only while the call fills the screen. */
.practice-room-close {
  display: none;
}

.practice-room[data-state="live"] .practice-room-close {
  position: fixed;
  z-index: 55;
  top: 16px;
  left: 16px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.practice-room-close:hover {
  background: var(--yellow);
}

.practice-room-close:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────────────────
 * ENTERING THE CALL (view transition, started in client/practice.ts)
 *
 *    0ms   the card lifts off the slide and glides to center stage, growing
 *    0ms   the page fades out under the call
 *  120ms   control bar rises from the bottom edge
 *  520ms   settled
 *
 * Closing plays it backwards: the bar drops, the card lands on its slide.
 * The cards are named practice-card-0…2 by the script (three for a panel).
 * ───────────────────────────────────────────────────────── */
::view-transition-group(practice-card-0),
::view-transition-group(practice-card-1),
::view-transition-group(practice-card-2) {
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The same drawing at both ends: carry one copy and scale it, rather than cross-fading two. */
::view-transition-old(practice-card-0),
::view-transition-old(practice-card-1),
::view-transition-old(practice-card-2) {
  display: none;
}

::view-transition-new(practice-card-0),
::view-transition-new(practice-card-1),
::view-transition-new(practice-card-2) {
  height: 100%;
  animation: none;
}

::view-transition-new(practice-bar) {
  animation: practice-bar-in 380ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

::view-transition-old(practice-bar) {
  animation: practice-bar-out 220ms ease-in both;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
}

@keyframes practice-bar-in {
  from {
    transform: translateY(100%);
  }
}

@keyframes practice-bar-out {
  to {
    transform: translateY(100%);
  }
}

/* The page under the call doesn't scroll while it's open. */
html[data-practice-live] {
  overflow: hidden;
}

/* The help chat stays out of the way while the call fills the screen. */
body:has(.practice-room[data-state="live"]) .portal-help {
  display: none;
}

/* The tab on the right edge of the screen that opens the talking points. */
.practice-points-tab {
  position: fixed;
  z-index: 65;
  top: 50%;
  right: 0;
  padding: 18px 10px;
  /* Rotated 180° to read bottom-up, so the open (screen-edge) side is the element's left. */
  border: 2px solid var(--ink);
  border-left: 0;
  background: var(--yellow);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  writing-mode: vertical-rl;
  transform: translateY(-50%) rotate(180deg);
  cursor: pointer;
  transition: right 0.25s ease;
}

.practice-points-tab:hover {
  background: var(--cream);
}

.practice-points-tab:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Open: the tab rides on the drawer's left edge, so pressing it again closes the drawer. */
.practice-points-tab[aria-expanded="true"] {
  right: var(--practice-drawer-width);
  background: var(--cream);
}

/* The drawer: slides over the page before a session; a column of the call during one. */
.practice-drawer {
  position: fixed;
  z-index: 60;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--practice-drawer-width);
  overflow-y: auto;
  padding: 0 28px 32px;
  border-left: 2px solid var(--ink);
  background: var(--cream);
  transform: translateX(100%);
  transition: transform 0.25s ease;
}

.practice-drawer[data-open="true"] {
  transform: none;
  box-shadow: -12px 0 0 rgb(20 18 16 / 0.08);
}

.practice-room[data-state="live"] .practice-drawer {
  position: static;
  width: 0;
  height: 100vh;
  padding: 0;
  overflow: hidden;
  border-left: 0;
  transform: none;
  box-shadow: none;
  transition: width 0.25s ease;
}

/* Switching between ready and live re-lays out the drawer; don't animate that. */
.practice-room[data-switching] .practice-drawer {
  transition: none;
}

.practice-room[data-state="live"] .practice-drawer[data-open="true"] {
  width: var(--practice-drawer-width);
  padding: 0 28px 32px;
  overflow-y: auto;
  border-left: 2px solid var(--ink);
}

.practice-drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -28px;
  padding: 20px 28px 12px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--ink);
}

.practice-drawer-head p {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.practice-drawer-head h2 {
  margin: 0;
  font-size: 28px;
}

.practice-drawer-head button {
  width: 40px;
  height: 40px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.practice-drawer-head button:hover {
  background: var(--yellow);
}

.practice-drawer .practice-points-body {
  padding: 16px 0 0;
  font-size: 16px;
}

.practice-points-asks[hidden] {
  display: none;
}

@media (max-width: 860px) {
  .practice-room-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .practice-room[data-state="live"] {
    --practice-drawer-width: min(420px, 86vw);
  }
  .practice-room[data-state="live"] .practice-drawer[data-open="true"] {
    position: fixed;
  }
}

@media (prefers-reduced-motion: reduce) {
  .practice-drawer,
  .practice-room[data-state="live"] .practice-drawer,
  .practice-points-tab {
    transition: none;
  }
}

.practice-room-status {
  min-height: 1.55em;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.practice-who {
  margin: 16px 0 0;
  font-weight: 700;
}

.practice-conversation {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.practice-status {
  min-height: 1.55em;
  margin: 0;
  font-weight: 600;
}

.practice-transcript-record p {
  max-width: 64ch;
  margin: 0 0 12px;
}

.practice-pick[hidden],
.practice-session[hidden] {
  display: none;
}

.practice-focus {
  margin: 48px 0 32px;
  padding: 24px;
  background: var(--ink);
  color: var(--cream);
}

.practice-focus h2 {
  margin: 0 0 12px;
  color: var(--cream);
}

.practice-focus p {
  max-width: 64ch;
  margin: 0 0 8px;
}

.practice-focus-skill strong {
  color: var(--yellow);
}

.practice-feedback {
  display: grid;
  gap: 8px;
  padding: 24px;
}

.practice-feedback p {
  max-width: 64ch;
  margin: 0;
}

.practice-feedback blockquote {
  max-width: 64ch;
  margin: 0 0 12px;
  font-style: italic;
}

.practice-list .resource-row > div {
  display: grid;
  gap: 4px;
}

.practice-skill {
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}

.practice-skill:last-child {
  border-bottom: 0;
}

.practice-skill h3 {
  margin: 0 0 8px;
}

.practice-check p {
  max-width: 64ch;
  margin: 0 0 4px;
}

.practice-evidence {
  font-size: 16px;
}

.practice-transcript-record {
  padding: 16px 24px;
}

.practice-transcript-record summary,
.practice-delete summary {
  cursor: pointer;
  font-weight: 700;
}

.practice-delete form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.practice-delete .button {
  justify-self: start;
}

/* Resources: Practice Q&A as its own section, with three of the cast beside the description. */
.practice-entry {
  padding-top: 48px;
}

.practice-entry-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: center;
}

.practice-entry-art {
  display: flex;
  justify-content: center;
  align-items: center;
}

.practice-entry-art {
  gap: 12px;
}

/* Outlined cards side by side, not overlapping, so each outline reads as one clean card. */
.practice-entry-art > span {
  width: 31%;
}

.practice-entry-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.practice-entry-body p {
  max-width: 60ch;
  margin: 0 0 20px;
  font-size: 18px;
}

.practice-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
}

/* A page header whose title and subtitle use the full width. */
.page-header-wide > div:first-child,
.page-header-wide .page-subtitle {
  max-width: none;
}

/* "Why AI avatars?": a short disclosure under the page intro, styled like a portal text link. */
.practice-why {
  max-width: 72ch;
  margin: -16px 0 32px;
}

.practice-why summary {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
  list-style: none;
}

.practice-why summary::-webkit-details-marker {
  display: none;
}

.practice-why summary::after {
  content: "↓";
  transition: transform 0.15s ease;
}

.practice-why[open] summary::after {
  transform: rotate(180deg);
}

.practice-why summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.practice-why p {
  margin: 12px 0 0;
}

/* Capped only where it stands alone; in the Resources grid it matches its neighbors. */
/* One card on its own: half the width, like a card in the Resources grid, with no divider. */
.practice-partner-grid .practice-partner-card {
  padding-right: 0;
  border-right: 0;
}

/* Practice progress: one series per chart, ink on a kraft track, square ends. */
.practice-progress {
  margin: 48px 0 32px;
}

.practice-progress > h2 {
  margin: 0 0 12px;
}

/* Three plain numbers under the focus, divided by rules. */
.progress-stats {
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  margin: 24px 0 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.progress-stats > div {
  padding: 16px 20px;
}

.progress-stats > div + div {
  border-left: 1px solid var(--ink);
}

.progress-stats dt {
  font-size: 14px;
  font-weight: 700;
}

.progress-stats dd {
  margin: 4px 0 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.progress-stats dd span {
  display: block;
  margin-top: 6px;
  color: var(--ink-soft);
  font-family: "AIRC Work Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
}

/* Session feedback: what went well beside the line said better, then each skill's checks. */
.practice-session-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 40px;
}

.practice-session-pair h2 {
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 28px;
}

.practice-session-quote {
  margin-bottom: 16px;
}

.practice-session-quote p {
  margin: 0 0 4px;
  font-weight: 700;
}

.practice-session-quote blockquote {
  margin: 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
}

.practice-session-quote blockquote.is-better {
  padding: 2px 6px;
  background: var(--yellow);
  width: fit-content;
}

.practice-retry-button {
  margin-top: 8px;
}

.practice-skill-result {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  margin: 0;
  padding: 4px 10px;
  border: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.practice-skill-result.is-pass {
  background: var(--ink);
  color: var(--cream);
}

.practice-skill-result.is-na {
  border-color: var(--sand);
  color: var(--ink-soft);
}

.practice-check-list {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.practice-check-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  max-width: 80ch;
  font-size: 15px;
}

.practice-check-mark {
  font-weight: 700;
}

.practice-check-list li.is-na {
  color: var(--ink-soft);
}

.practice-check-list .practice-evidence {
  display: block;
  margin-top: 2px;
  color: var(--ink-soft);
  font-style: italic;
}

@media (max-width: 760px) {
  .practice-session-pair {
    grid-template-columns: minmax(0, 1fr);
  }
  .practice-skill-result {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* History: each session opens in place to a condensed version of its feedback. */
.practice-history {
  border-top: 2px solid var(--ink);
}

.practice-history-row {
  border-bottom: 1px solid var(--ink);
}

.practice-history-row > summary {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 18px 56px 18px 0;
  list-style: none;
  cursor: pointer;
}

.practice-history-row > summary::-webkit-details-marker {
  display: none;
}

.practice-history-row > summary:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.practice-history-title {
  font-size: 19px;
  font-weight: 700;
}

.practice-history-row > summary:hover .practice-history-title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.practice-history-meta,
.practice-history-score {
  color: var(--ink-soft);
}

/* A plus that turns into a minus when the row is open. */
.practice-history-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 36px;
  height: 36px;
  border: 2px solid var(--ink);
  transform: translateY(-50%);
}

.practice-history-toggle::before,
.practice-history-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: var(--ink);
  transform: translate(-50%, -50%);
}

.practice-history-toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.practice-history-row[open] .practice-history-toggle::after {
  display: none;
}

.practice-history-body {
  display: grid;
  gap: 20px;
  padding: 0 0 28px;
}

.practice-history-body .progress-stats {
  margin: 0;
}

.practice-history-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.practice-history-grid .practice-focus {
  margin: 0;
  font-size: 18px;
}

.practice-history-grid h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.practice-history-grid .practice-session-quote blockquote {
  margin-bottom: 10px;
}

.practice-history-skills {
  margin: 0;
}

.practice-history-body > a {
  width: fit-content;
  font-weight: 700;
}

@media (max-width: 760px) {
  .practice-history-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* How you're scored: each skill with what it means, its record, and the checks behind it. */
.progress-criteria {
  margin-top: 48px;
}

.progress-criteria > h3 {
  margin: 0 0 8px;
  font-size: 34px;
}

.progress-criteria-intro {
  max-width: 64ch;
  margin: 0 0 16px;
}

.progress-criteria-list {
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--ink);
  list-style: none;
}

.progress-criteria-list > li {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 6px 32px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--ink);
}

.progress-criteria-name {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.progress-criteria-name h4 {
  margin: 0;
  font-family: "AIRC Oswald", sans-serif;
  font-size: 22px;
  font-weight: 600;
}

.progress-criteria-name span {
  padding: 2px 8px;
  background: var(--yellow);
  font-size: 13px;
  font-weight: 700;
}

.progress-criteria-means {
  grid-column: 1;
  margin: 0;
}

.progress-criteria-score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-column: 2;
  grid-row: 1 / span 2;
  gap: 12px;
  align-items: center;
}

.progress-criteria-list details {
  grid-column: 1 / -1;
}

.progress-criteria-list summary {
  width: fit-content;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.progress-criteria-list details ul {
  max-width: 72ch;
  margin: 8px 0 0;
  padding-left: 20px;
  font-size: 15px;
}

@media (max-width: 760px) {
  .progress-stats {
    grid-auto-flow: row;
  }
  .progress-stats > div + div {
    border-top: 1px solid var(--ink);
    border-left: 0;
  }
  .progress-criteria-list > li {
    grid-template-columns: minmax(0, 1fr);
  }
  .progress-criteria-score {
    grid-column: 1;
    grid-row: auto;
  }
}

.practice-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.progress-column {
  display: grid;
  gap: 16px;
  align-content: start;
}

.progress-endpoint {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.practice-progress-more {
  margin: 16px 0 0;
}

.progress-figure {
  padding: 20px;
  border: 2px solid var(--ink);
}

.progress-figure h3 {
  margin: 0 0 16px;
  font-size: 22px;
}

.progress-note {
  margin: 0 0 16px;
  font-size: 15px;
}

.progress-rows {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.progress-rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
}

.progress-label {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: 600;
}

.progress-bar {
  display: block;
  width: 100%;
  height: 10px;
}

.progress-track {
  fill: var(--kraft);
}

.progress-fill {
  fill: var(--ink);
}

.progress-value {
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.progress-count {
  font-weight: 400;
}

.progress-empty {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 15px;
}

.progress-line {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
}

.progress-band {
  fill: var(--sand);
}

.progress-axis {
  stroke: var(--sand);
  stroke-width: 1;
}

.progress-tick {
  fill: var(--ink);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.progress-path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2;
}

.progress-dot {
  fill: var(--ink);
  stroke: var(--cream);
  stroke-width: 2;
}

.progress-hit {
  fill: transparent;
}

.progress-table {
  margin-top: 16px;
}

.progress-table summary {
  cursor: pointer;
  font-weight: 700;
}

.progress-table table {
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.progress-table th,
.progress-table td {
  padding: 6px 16px 6px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.practice-progress .practice-focus {
  margin: 0;
}

.practice-progress .practice-focus h3 {
  margin: 0 0 12px;
  color: var(--cream);
  font-size: 26px;
}

@media (max-width: 1000px) {
  .practice-cast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .practice-progress-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .practice-entry-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .practice-slide {
    grid-template-columns: minmax(0, 1fr);
  }
  .practice-slide-art {
    border-right: 0;
    border-bottom: 2px solid var(--ink);
  }
  .practice-slide-art > span {
    width: min(70%, 260px);
  }
  /* No room beside the slide on phones; the face strip scrolls instead. */
  .practice-carousel-arrow {
    display: none;
  }
  /* A scrolling row must start at the left edge, or centering hides the first faces. */
  .practice-picker {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .practice-cast {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Side-by-side on phones so the whole cast fits in about a screen and a half. */
  .practice-person {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .practice-person-art {
    height: 100%;
    aspect-ratio: auto;
    border-right: 2px solid var(--ink);
    border-bottom: 0;
  }
  .practice-person-art svg {
    width: 100%;
    height: auto;
  }
  .practice-person-body {
    padding: 12px;
  }
  .practice-person-name {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cast-portrait .eyes,
  .practice-stage-cast .cast-portrait .breath,
  .practice-stage-cast[data-count="3"] > span {
    animation: none;
    transition: none;
  }
  .practice-person {
    transition: none;
  }
  .practice-person:hover:not(:disabled),
  .practice-person:active:not(:disabled) {
    transform: none;
  }
}