:root {
  --paper: #f4efd9;
  --ink: #fffaf0;
  --ink-dark: #22243e;
  --navy: #3d405f;
  --coral: #f46f56;
  --sage: #78b89f;
  --gold: #f79c10;
  --periwinkle: #8aa8f5;
  --blue-line: #13a7e8;
  --button-glass-bg: color-mix(in srgb, currentColor 8%, transparent);
  --button-glass-bg-hover: color-mix(in srgb, currentColor 15%, transparent);
  --button-glass-border: color-mix(in srgb, currentColor 42%, transparent);
  --button-glass-highlight: color-mix(in srgb, var(--ink) 22%, transparent);
  --focus-ring: color-mix(in srgb, var(--ink) 80%, transparent);
  --rail-width: 280px;
  --rail-pad: 38px;
  --section-gap: 34px;
  --panel-radius: 9px;
  --rail-tile-width: 210px;
  --rail-tile-height: 108px;
  --rail-active-scale: 1.1;
  --container-gap: 34px;
  --content-gap: 34px;
  --hero-copy-gap: clamp(22px, 2.1vw, 34px);
  --hero-stack-gap: clamp(38px, 3.5vw, 58px);
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Instrument Sans", Arial, sans-serif;
  --type-h1: clamp(40px, 3.35vw, 64px);
  --type-h2: clamp(30px, 2.6vw, 48px);
  --type-h3: clamp(24px, 2vw, 36px);
  --type-body: clamp(16px, 1.08vw, 18px);
  --type-article: clamp(18px, 1.15vw, 21px);
  --type-subscript: clamp(10px, 0.82vw, 13px);
  --type-button: clamp(18px, 1.55vw, 25px);
  --leading-display: 1.08;
  --leading-body: 1.5;
  --leading-compact: 1.32;
  --measure-body: 62ch;
  --measure-wide: 74ch;
  --measure-article: 66ch;
  --article-sidebar: clamp(180px, 17vw, 270px);
}

/* Type system:
   h1/display = Instrument Serif var(--type-h1)
   h2/section titles = Instrument Serif var(--type-h2)
   h3/content headings = Instrument Serif var(--type-h3)
   body = Instrument Sans var(--type-body), long-form articles use var(--type-article)
   subscript/kicker = Instrument Sans var(--type-subscript)
   buttons = Instrument Serif var(--type-button)
*/

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
}

a {
  color: inherit;
}

.section-label {
  display: none !important;
}

.skip-link {
  background: var(--navy);
  color: var(--ink);
  left: 16px;
  padding: 10px 12px;
  position: fixed;
  top: 16px;
  transform: translateY(-160%);
  z-index: 30;
}

.skip-link:focus {
  transform: translateY(0);
}

.rail {
  background: var(--paper);
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 38px;
  left: 0;
  padding: var(--rail-pad);
  position: fixed;
  top: 0;
  width: var(--rail-width);
  z-index: 20;
}

.rail-menu {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.brand-mark,
.rail-link {
  border-radius: var(--panel-radius);
  flex: 0 0 auto;
  text-decoration: none;
  transform-origin: left center;
  transition: box-shadow 160ms ease, transform 160ms ease;
  width: var(--rail-tile-width);
}

.brand-mark {
  align-items: center;
  background: var(--coral);
  color: var(--ink-dark);
  display: flex;
  min-height: var(--rail-tile-height);
  justify-content: center;
  padding: 16px 12px;
}

.brand-mark img {
  display: block;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  width: 100%;
}

.rail-link {
  background: var(--navy);
  color: var(--ink);
  display: grid;
  font-family: var(--font-serif);
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.03;
  min-height: var(--rail-tile-height);
  padding: 24px 18px 16px;
}

.rail-link span {
  font-family: var(--font-sans);
  font-size: var(--type-subscript);
  line-height: 1;
}

.rail-link-offerings {
  background: var(--navy);
}

.rail-link-use-cases {
  background: var(--sage);
  color: var(--ink-dark);
}

.rail-link-education {
  background: var(--gold);
  color: var(--ink-dark);
}

.rail-link-about {
  background: var(--periwinkle);
  color: var(--ink-dark);
}

.mobile-nav-toggle {
  display: none;
}

.brand-mark:hover,
.brand-mark:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.brand-mark.is-active,
.rail-link.is-active {
  transform: scale(var(--rail-active-scale));
  z-index: 2;
}

.brand-mark.is-active,
.rail-link.is-active,
.rail-link:hover,
.rail-link:focus-visible {
  box-shadow: 0 0 0 5px var(--focus-ring);
}

main {
  padding-left: var(--rail-width);
  padding-bottom: var(--rail-pad);
  padding-top: var(--rail-pad);
}

.page {
  background: var(--paper);
  padding: 0 var(--rail-pad) 0 0;
  position: relative;
}

.page + .page {
  margin-top: var(--section-gap);
}

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

h1,
h2,
h3,
.button,
.back-link,
.question-list h3,
.question-list span {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0;
}

h1 {
  font-size: var(--type-h1);
  line-height: var(--leading-display);
  margin-bottom: 24px;
  max-width: 720px;
}

h1 span {
  display: block;
}

h2 {
  font-size: var(--type-h2);
  line-height: var(--leading-display);
}

h3 {
  font-size: var(--type-h3);
  line-height: var(--leading-display);
}

p {
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
}

.hero-panel {
  align-content: center;
  align-items: center;
  background: var(--coral);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  display: grid;
  gap: var(--hero-stack-gap);
  grid-template-columns: 1fr;
  min-height: clamp(590px, 54vw, 795px);
  padding: clamp(42px, 5vw, 72px) clamp(36px, 4.6vw, 64px);
  text-align: center;
}

.eyebrow {
  display: none;
}

.hero-copy {
  display: grid;
  gap: var(--hero-copy-gap);
  justify-items: center;
  justify-self: center;
  max-width: 980px;
  padding-top: 0;
  text-align: center;
  width: 100%;
}

.hero-copy h1 {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.hero-copy h1 span {
  text-align: center;
}

.hero-copy p {
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 720px;
}

.hero-action {
  display: grid;
  gap: var(--hero-stack-gap);
  justify-items: center;
  justify-self: center;
  max-width: 520px;
  position: relative;
  text-align: center;
  width: 100%;
}

.hero-action p {
  font-size: var(--type-body);
  line-height: var(--leading-compact);
  margin-bottom: 0;
  max-width: 500px;
}

.hero-cta-wrap {
  display: inline-flex;
  position: relative;
}

.button,
.question-list span {
  align-items: center;
  background: var(--button-glass-bg);
  border: 1px solid var(--button-glass-border);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 var(--button-glass-highlight);
  backdrop-filter: blur(4px);
}

.button {
  display: inline-flex;
  font-size: var(--type-button);
  justify-content: center;
  min-height: 46px;
  padding: 9px 16px;
  text-decoration: none;
}

.hero-action .button {
  font-size: clamp(24px, 2vw, 34px);
  min-height: 58px;
  padding: 13px 24px;
}

.button:hover,
.button:focus-visible,
.question-list a:hover span,
.question-list a:focus-visible span {
  background: var(--button-glass-bg-hover);
}

.pin {
  display: inline-block;
  filter: saturate(1.2);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: clamp(41px, 4vw, 59px);
  line-height: 1;
  pointer-events: none;
  position: absolute;
  text-shadow: 0 4px 8px rgba(61, 64, 95, 0.2);
  transform: rotate(-21deg) scaleX(-1);
  z-index: 30;
}

.pin-hero {
  left: -42px;
  top: -25px;
}

.stacked-cards {
  align-content: start;
  display: grid;
  gap: var(--container-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}

.offering-card {
  background: var(--navy);
  border-radius: var(--panel-radius);
  padding: clamp(23px, 2.55vw, 34px);
}

.intro-card {
  grid-column: 1 / -1;
  max-width: none;
  min-height: 86px;
  padding-block: 24px;
  width: 100%;
}

.offering-card h2,
.offering-card h3 {
  margin-bottom: 12px;
}

.offering-card p {
  max-width: var(--measure-wide);
}

.offering-card em {
  font-style: italic;
}

.offering-card ul {
  display: grid;
  gap: 10px;
  font-size: var(--type-body);
  line-height: var(--leading-body);
  list-style: none;
  margin: 0 0 22px;
  max-width: var(--measure-body);
  padding: 0;
}

.offering-card li::before {
  content: "";
}

.format-line {
  margin-bottom: 0;
}

.note-card {
  background: var(--navy);
  border-radius: var(--panel-radius);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  margin-left: 0;
  margin-top: var(--container-gap);
  max-width: none;
  padding: clamp(23px, 2.55vw, 34px);
  position: relative;
  width: 100%;
}

.pin-note {
  left: -42px;
  top: -25px;
}

.use-case-panel {
  background: var(--sage);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  padding: clamp(34px, 4.4vw, 66px);
  width: 100%;
}

.use-case-panel h2 {
  margin-bottom: clamp(34px, 5vw, 58px);
}

.kicker {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 16px;
  opacity: 0.9;
}

.use-case-grid {
  display: grid;
  gap: clamp(34px, 4vw, 58px) clamp(38px, 5vw, 72px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.use-case-item {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.use-case-item h3 {
  margin-bottom: 18px;
}

.use-case-item p:not(.kicker) {
  margin: 0;
}

.quote-card {
  align-items: center;
  background: var(--sage);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: var(--container-gap);
  max-width: none;
  padding: 28px 34px;
  position: relative;
  width: 100%;
}

.quote-card p {
  margin-bottom: 0;
  max-width: var(--measure-wide);
}

.quote-card .button {
  justify-self: end;
}

.pin-quote {
  left: -42px;
  top: -25px;
}

.proof-strip {
  background: var(--navy);
  border-radius: var(--panel-radius);
  color: var(--ink);
  display: grid;
  gap: clamp(24px, 3vw, 38px);
  margin-top: var(--container-gap);
  padding: clamp(30px, 3.8vw, 56px);
  width: 100%;
}

.proof-heading {
  max-width: 760px;
}

.proof-heading h2 {
  margin-bottom: 0;
}

.proof-heading p {
  margin: 0;
  max-width: 48ch;
}

.proof-grid {
  display: grid;
  align-items: start;
  gap: clamp(14px, 1.4vw, 20px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.proof-card {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 24%, transparent);
  border-radius: var(--panel-radius);
  display: grid;
  grid-template-rows: clamp(150px, 12vw, 190px) auto;
  margin: 0;
  overflow: hidden;
}

.proof-card img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  width: 100%;
}

.proof-card figcaption {
  align-content: start;
  display: grid;
  gap: 8px;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.38;
  padding: clamp(16px, 1.45vw, 20px);
}

.proof-card figcaption span {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
}

.education-panel,
.article-panel {
  background: var(--gold);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  padding: clamp(30px, 3.8vw, 52px);
}

.education-panel {
  align-content: start;
  display: grid;
  min-height: clamp(560px, 48vw, 720px);
  width: 100%;
}

.education-panel h2 {
  margin-bottom: clamp(54px, 6vw, 78px);
  max-width: none;
  white-space: nowrap;
}

.question-list {
  display: grid;
  column-gap: clamp(34px, 5vw, 70px);
  row-gap: clamp(30px, 4vw, 48px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.question-list a {
  align-items: start;
  background: color-mix(in srgb, currentColor 6%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--panel-radius);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
  display: grid;
  column-gap: clamp(22px, 3vw, 34px);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: clamp(188px, 15vw, 230px);
  padding: clamp(20px, 2.3vw, 32px);
  row-gap: clamp(18px, 2vw, 26px);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.question-list span {
  font-size: var(--type-button);
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  line-height: 1;
  min-width: 132px;
  padding: 12px 16px;
  text-align: center;
}

.question-list a:hover,
.question-list a:focus-visible {
  background: color-mix(in srgb, currentColor 11%, transparent);
  border-color: color-mix(in srgb, currentColor 36%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ink) 28%, transparent), 0 12px 28px color-mix(in srgb, var(--ink-dark) 12%, transparent);
  transform: translateY(-2px);
}

.question-list h3 {
  display: block;
  grid-column: 1;
  line-height: var(--leading-display);
  margin-top: -2px;
}

.question-list p {
  grid-column: 1;
  margin: 0;
  max-width: 43ch;
}

.about-wrap {
  display: grid;
  align-items: stretch;
  gap: var(--container-gap);
  grid-template-columns: minmax(0, 1fr) minmax(285px, 31%);
}

.about-grid {
  align-items: center;
  background: var(--periwinkle);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  display: grid;
  gap: clamp(24px, 3vw, 42px);
  grid-template-columns: minmax(0, 1fr) minmax(220px, 32%);
  min-height: clamp(470px, 42vw, 560px);
  padding: clamp(26px, 3.2vw, 44px);
  width: 100%;
}

.about-copy h2 {
  margin-bottom: clamp(26px, 4vw, 44px);
}

.about-copy p {
  line-height: 1.42;
  margin-bottom: clamp(26px, 3.5vw, 42px);
  max-width: var(--measure-body);
}

.about-copy p:last-child {
  margin-bottom: 0;
}

.serif-emphasis {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 1.55em;
  line-height: 0.82;
  margin: 0.08em 0;
  vertical-align: -0.06em;
}

.portrait-card {
  margin: 0;
}

.portrait-card img {
  border-radius: var(--panel-radius);
  display: block;
  width: 100%;
}

.cta-band {
  align-items: start;
  background: var(--periwinkle);
  border-radius: var(--panel-radius);
  color: var(--ink-dark);
  display: grid;
  gap: clamp(38px, 5vw, 70px);
  grid-template-rows: auto minmax(0, 1fr);
  min-height: clamp(470px, 42vw, 560px);
  padding: clamp(36px, 3.6vw, 50px) clamp(28px, 3.2vw, 40px);
  position: relative;
  width: 100%;
}

.pin-cta {
  left: -42px;
  top: -25px;
}

.cta-band h2 {
  margin-bottom: 28px;
}

.cta-band p {
  margin-bottom: 0;
}

.cta-actions {
  display: grid;
  align-self: end;
  gap: 22px;
  justify-items: start;
  text-align: left;
}

.cta-actions > a:not(.button) {
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.2;
  max-width: 300px;
  text-decoration: none;
}

main.article-page {
  background: var(--paper);
  min-height: 100vh;
  padding: var(--rail-pad) var(--rail-pad) var(--rail-pad) var(--rail-width);
}

.article-panel {
  min-height: calc(100vh - (var(--rail-pad) * 2));
  padding: clamp(44px, 4vw, 70px) clamp(42px, 5vw, 70px);
}

.article-panel h1 {
  font-size: clamp(40px, 3vw, 58px);
  margin-bottom: clamp(36px, 4vw, 62px);
  max-width: 18ch;
}

.article-panel p {
  font-size: var(--type-article);
  line-height: 1.56;
  margin-bottom: clamp(20px, 2vw, 30px);
  max-width: var(--measure-article);
}

.article-panel p:last-child {
  margin-bottom: 0;
}

.article-panel ul {
  font-size: var(--type-article);
  line-height: 1.5;
  margin: -8px 0 clamp(24px, 2vw, 34px);
  max-width: var(--measure-article);
  padding-left: 1.15em;
}

.article-panel li {
  margin: 0 0 8px;
  padding-left: 0.15em;
}

.article-pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(29px, 2.1vw, 40px) !important;
  line-height: 1.18 !important;
  margin-bottom: clamp(28px, 3vw, 46px) !important;
  margin-top: clamp(14px, 1.8vw, 24px);
  max-width: 18ch;
}

.article-section {
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  display: grid;
  column-gap: clamp(34px, 5vw, 76px);
  grid-template-columns: var(--article-sidebar) minmax(0, var(--measure-article));
  margin-top: clamp(34px, 4vw, 58px);
  padding-top: clamp(26px, 3vw, 42px);
}

.article-section h2 {
  font-size: clamp(29px, 2.1vw, 40px);
  line-height: 1.12;
  margin-bottom: 0;
  max-width: 11ch;
}

.article-section:first-of-type {
  margin-top: 0;
}

.article-section > p,
.article-section > ul,
.article-section > .article-note {
  grid-column: 2;
}

.article-section > p:first-of-type,
.article-section > .article-note:first-child {
  margin-top: -0.1em;
}

.article-note {
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: var(--panel-radius);
  margin: clamp(30px, 3vw, 44px) 0;
  max-width: var(--measure-article);
  padding: clamp(18px, 2vw, 26px);
}

.article-note p {
  margin-bottom: 14px;
}

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

.article-note ul {
  margin: 0;
}

.article-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap);
  margin-left: calc(var(--article-sidebar) + clamp(34px, 5vw, 76px));
}

.article-cta p {
  margin: 0;
  max-width: 42ch;
}

.back-link {
  display: inline-block;
  font-size: var(--type-body);
  margin-bottom: 20px;
  text-decoration: none;
}

@media (max-width: 1050px) {
  :root {
    --rail-width: 214px;
    --rail-pad: 28px;
    --rail-tile-width: 146px;
    --rail-tile-height: 84px;
    --rail-active-scale: 1.12;
  }

  .brand-mark,
  .rail-link {
    width: var(--rail-tile-width);
  }

  .rail {
    gap: 24px;
  }

  .rail-menu {
    gap: 24px;
  }

  .article-section {
    grid-template-columns: minmax(0, 1fr);
  }

  .article-section h2,
  .article-section > p,
  .article-section > ul,
  .article-section > .article-note {
    grid-column: 1;
  }

  .article-section h2 {
    margin-bottom: clamp(18px, 2vw, 26px);
    max-width: var(--measure-article);
  }

  .article-section > p:first-of-type,
  .article-section > .article-note:first-child {
    margin-top: 0;
  }

  .article-cta {
    margin-left: 0;
  }

  .hero-panel {
    grid-template-columns: 1fr;
  }

  .stacked-cards {
    grid-template-columns: 1fr;
  }

  .education-panel {
    margin-left: 0;
  }

  .education-panel h2 {
    white-space: normal;
  }

  .use-case-panel,
  .quote-card {
    margin-left: 0;
  }

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

  .proof-heading {
    max-width: none;
  }

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

  .question-list {
    column-gap: 44px;
  }
}

@media (max-width: 1300px) {
  .about-grid {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .portrait-card {
    justify-self: center;
    max-width: min(420px, 100%);
  }
}

@media (max-width: 820px) {
  .rail {
    bottom: auto;
    flex-direction: row;
    gap: 8px;
    overflow: visible;
    padding: 10px;
    right: 0;
    width: auto;
  }

  .brand-mark,
  .rail-link {
    flex: 0 0 auto;
    height: 58px;
    min-height: 58px;
    width: 92px;
  }

  .brand-mark {
    padding: 8px;
  }

  .mobile-nav-toggle {
    align-items: center;
    background: var(--navy);
    border: 0;
    border-radius: var(--panel-radius);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    flex: 1 1 auto;
    font-family: var(--font-serif);
    font-size: 22px;
    gap: 10px;
    height: 58px;
    justify-content: space-between;
    min-width: 0;
    padding: 12px 16px;
  }

  .rail:has(.brand-mark.is-active) .mobile-nav-toggle {
    background: var(--coral);
    color: var(--ink-dark);
  }

  .rail.theme-home .mobile-nav-toggle {
    background: var(--coral);
    color: var(--ink-dark);
  }

  .rail:has(.rail-link-offerings.is-active) .mobile-nav-toggle {
    background: var(--navy);
    color: var(--ink);
  }

  .rail.theme-offerings .mobile-nav-toggle {
    background: var(--navy);
    color: var(--ink);
  }

  .rail:has(.rail-link-use-cases.is-active) .mobile-nav-toggle {
    background: var(--sage);
    color: var(--ink-dark);
  }

  .rail.theme-use-cases .mobile-nav-toggle {
    background: var(--sage);
    color: var(--ink-dark);
  }

  .rail:has(.rail-link-education.is-active) .mobile-nav-toggle {
    background: var(--gold);
    color: var(--ink-dark);
  }

  .rail.theme-education .mobile-nav-toggle {
    background: var(--gold);
    color: var(--ink-dark);
  }

  .rail:has(.rail-link-about.is-active) .mobile-nav-toggle {
    background: var(--periwinkle);
    color: var(--ink-dark);
  }

  .rail.theme-about .mobile-nav-toggle {
    background: var(--periwinkle);
    color: var(--ink-dark);
  }

  .rail-menu {
    background: var(--paper);
    border-radius: var(--panel-radius);
    box-shadow: 0 16px 34px rgba(61, 64, 95, 0.22);
    display: none;
    gap: 8px;
    left: 10px;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: calc(100% + 6px);
  }

  .rail.is-open .rail-menu {
    display: grid;
  }

  .rail-link {
    font-size: 15px;
    height: auto;
    min-height: 58px;
    padding: 11px 10px;
    transform-origin: center;
    width: 100%;
  }

  .brand-mark.is-active,
  .rail-link.is-active {
    transform: none;
  }

  .rail-link span {
    font-size: 11px;
  }

  main,
  main.article-page {
    padding: 78px 12px 12px;
  }

  .page {
    min-height: auto;
    padding: 0;
    scroll-margin-top: 84px;
  }

  .about-wrap {
    grid-template-columns: 1fr;
  }

  .hero-panel,
  .about-grid,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .about-grid,
  .cta-band {
    min-height: auto;
  }

  .cta-actions {
    justify-self: start;
    text-align: left;
  }

  .stacked-cards {
    padding-right: 0;
  }

  .note-card {
    margin-top: var(--container-gap);
  }

  .pin-hero,
  .pin-note,
  .pin-quote,
  .pin-cta {
    left: 12px;
    top: -23px;
  }

  .question-list a {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  .question-list {
    grid-template-columns: 1fr;
  }

  .question-list span {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }

  .question-list h3 {
    grid-column: 1;
    line-height: 1.04;
  }

  .question-list p {
    grid-column: 1;
    max-width: none;
    padding-top: 0;
  }

  .question-list a span {
    order: 3;
  }

  .portrait-card {
    aspect-ratio: 4 / 5;
    border-radius: var(--panel-radius);
    overflow: hidden;
  }

  .portrait-card img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
  }

  .cta-band {
    grid-template-rows: auto minmax(90px, 1fr);
  }

  .cta-actions {
    align-self: end;
    margin-top: 0;
  }
}

@media (max-width: 620px) {
  :root {
    --type-h1: 38px;
    --type-h2: 31px;
    --type-h3: 27px;
    --type-body: 16px;
    --type-article: 17px;
    --type-button: 22px;
  }

  .hero-panel,
  .use-case-panel,
  .education-panel,
  .about-grid,
  .cta-band,
  .article-panel {
    padding: 28px 22px;
  }

  .use-case-grid {
    grid-template-columns: 1fr;
  }

  .use-case-item h3 {
    margin-bottom: 12px;
  }

  .quote-card {
    grid-template-columns: 1fr;
  }

  .quote-card .button {
    justify-self: start;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-card {
    grid-template-rows: minmax(0, 220px) auto;
  }

  .article-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}