.check-up-page {
  /* Sits between --fs-sub and --fs-section so panel titles stay clearly
     subordinate to the section heading above them. */
  --fs-panel-title: clamp(26px, 2.6vw, 36px);
  background: var(--bg);
}

.check-up-page [hidden] {
  display: none !important;
}

.check-up-page section[id],
.check-up-page div[id] {
  scroll-margin-top: 126px;
}

/* Hero */
.checkup-hero {
  --hero-title-max: 18ch;
  --hero-intro-max: 58ch;
  max-width: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.checkup-hero .site-hero__content {
  width: min(100%, 860px);
}

.checkup-hero h1 {
  color: var(--blackberry);
}

.checkup-hero__actions {
  margin-bottom: 0;
}

.checkup-hero__meta {
  justify-content: center;
  margin-top: 26px;
  margin-bottom: 0;
  list-style: none;
}

/* In-page navigation */
.checkup-toc {
  position: sticky;
  top: 64px;
  z-index: 80;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.checkup-toc__inner {
  display: flex;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.checkup-toc a {
  display: inline-flex;
  min-height: 44px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 16px;
  border-bottom: 2px solid transparent;
  color: var(--caption);
  font-size: var(--fs-caption);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.checkup-toc a:first-child {
  margin-left: -16px;
}

.checkup-toc a:hover,
.checkup-toc a:focus-visible {
  border-bottom-color: var(--blackberry);
  color: var(--blackberry);
}

.checkup-toc a.active {
  border-bottom-color: var(--blackberry);
  color: var(--blackberry);
  font-weight: 500;
}

/* Shared page headings */
.checkup-section {
  width: 100%;
}

.checkup-heading {
  max-width: 820px;
  margin-bottom: 36px;
}

.checkup-heading h2,
.booking-someone__intro h2 {
  color: var(--text);
  text-wrap: balance;
}

.checkup-heading .section-intro {
  max-width: 720px;
  margin-bottom: 0;
}

/* Reason selector */
.reason-layout {
  display: grid;
  gap: 32px;
}

.reason-tabs {
  display: grid;
  border-top: 1px solid var(--text);
}

.reason-tab {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 64px;
  padding: 16px 8px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  line-height: 1.45;
  text-align: left;
  transition: color 0.18s ease, background 0.18s ease, padding 0.18s ease;
}

.reason-tab:hover,
.reason-tab.is-active {
  color: var(--blackberry);
  background: var(--blackberry-tint);
}

.reason-tab.is-active {
  padding-left: 16px;
  box-shadow: inset 3px 0 0 var(--blackberry);
}

.reason-tab__number {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 600;
}

.reason-panels {
  min-width: 0;
}

.reason-panel {
  min-width: 0;
}

.reason-panel + .reason-panel {
  margin-top: 24px;
}

.reason-panel h3 {
  max-width: 26ch;
  margin: 8px 0 16px;
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: var(--fs-panel-title);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

.reason-panel > p {
  max-width: 680px;
  color: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.reason-panel__changes {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  max-width: 680px;
}

.reason-panel__changes h4 {
  margin-bottom: 9px;
  color: var(--tea-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.reason-panel__changes ul {
  padding-left: 18px;
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.65;
}

.reason-panel__changes li + li {
  margin-top: 6px;
}

/* Light layers accordion */
.approach-layers {
  display: grid;
  gap: 4px;
}

.approach-layer {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  transition: box-shadow 0.22s ease;
}

.approach-layer:hover {
  box-shadow: var(--sh);
}

.approach-heading {
  margin: 0;
  font: inherit;
}

.approach-trigger {
  display: grid;
  width: 100%;
  min-height: 88px;
  grid-template-columns: 48px minmax(0, 1fr) 38px;
  gap: 12px;
  align-items: center;
  padding: 18px 14px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: background 0.18s ease;
}

.approach-trigger:hover {
  background: var(--border-lt);
}

.approach-number {
  display: inline-flex;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--blackberry-tint-border);
  border-radius: 12px;
  background: var(--blackberry-tint);
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: 18px;
}

.approach-number--coral {
  border-color: var(--coral-border);
  background: var(--coral-tint);
  color: var(--coral-text);
}

.approach-number--amber {
  border-color: var(--amber-border);
  background: var(--amber-tint);
  color: var(--amber-text);
}

.approach-number--sage {
  border-color: var(--sage-border);
  background: var(--sage-tint);
  color: var(--sage);
}

.approach-meta {
  display: block;
  min-width: 0;
}

.approach-tag {
  display: block;
  margin-bottom: 3px;
  color: var(--caption);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.approach-title {
  display: block;
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 500;
  line-height: 1.3;
}

.approach-sub {
  display: block;
  margin-top: 4px;
  color: var(--body);
  font-size: var(--fs-ui);
  line-height: 1.5;
}

.approach-item__icon {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.approach-toggle {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--blackberry);
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}

/* The rotation sits on the SVG rather than the circle so the border and
   background stay square to the layout while the mark turns into a cross. */
.approach-toggle svg {
  display: block;
  width: 14px;
  height: 14px;
  transition: transform 0.25s ease;
}

.approach-layer.is-open .approach-toggle {
  background: var(--blackberry);
  color: var(--surface);
}

.approach-layer.is-open .approach-toggle svg {
  transform: rotate(45deg);
}

.approach-panel__inner {
  padding: 16px 18px 26px;
}

.approach-items {
  display: grid;
  gap: 18px;
}

.approach-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.approach-item__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--blackberry-tint);
  font-size: 15px;
}

.approach-item__icon--coral {
  background: var(--coral-tint);
}

.approach-item__icon--amber {
  background: var(--amber-tint);
}

.approach-item__icon--sage {
  background: var(--sage-tint);
}

.approach-item h4 {
  margin-bottom: 3px;
  color: var(--text);
  font-size: var(--fs-body-tight);
  font-weight: 600;
  line-height: 1.4;
}

.approach-item p {
  color: var(--body);
  font-size: var(--fs-ui);
  line-height: 1.65;
}

.approach-note {
  margin-top: 24px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--border-lt);
  color: var(--body);
  font-size: var(--fs-ui);
  line-height: 1.7;
}

.approach-note strong {
  color: var(--text);
  font-weight: 600;
}

/* Outcomes */
.outcome-grid {
  display: grid;
  gap: 12px;
}

.outcome-card {
  padding: 24px 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.outcome-card__number {
  margin-bottom: 12px;
  color: var(--tea-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
}

.outcome-card h3 {
  margin-bottom: 8px;
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.28;
}

.outcome-card p {
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.65;
}

.checkup-callout {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--tea);
  border-radius: 0 10px 10px 0;
  background: var(--tea-tint);
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.7;
}

.checkup-callout strong {
  color: var(--text);
}

/* Anxiety tabs */
.anxiety-layout {
  display: grid;
  gap: 30px;
}

.anxiety-tabs {
  display: grid;
  border-top: 1px solid var(--border);
}

.anxiety-tab {
  display: block;
  min-height: 62px;
  padding: 14px 10px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--body);
  cursor: pointer;
  text-align: left;
  transition: color 0.18s ease, background 0.18s ease, padding 0.18s ease;
}

/* Targeted by class rather than by element: a bare `.anxiety-tab > span` rule
   also matched the chevron span and beat `.selector-chevron` on specificity. */
.anxiety-tab__label {
  display: block;
  font-size: var(--fs-body-tight);
  font-weight: 500;
  line-height: 1.45;
}

.anxiety-tab:hover,
.anxiety-tab.is-active {
  padding-left: 16px;
  background: var(--blackberry-tint);
  color: var(--blackberry);
  box-shadow: inset 3px 0 0 var(--blackberry);
}

.anxiety-panels {
  min-width: 0;
}

.anxiety-panel {
  padding: 26px 22px;
  background: var(--blackberry-tint);
}

.anxiety-panel + .anxiety-panel {
  margin-top: 22px;
}

/* The trigger already states the worry, so the panel leads with the answer and
   gives it the most weight. Restating the worry here made the section amplify
   the anxiety it exists to settle. */
.anxiety-panel h3 {
  max-width: 26ch;
  margin: 14px 0 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--blackberry-tint-border);
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: var(--fs-panel-title);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.anxiety-panel > p {
  color: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.anxiety-panel__footer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--blackberry-tint-border);
  font-size: var(--fs-body-tight) !important;
}

.anxiety-panel__footer strong {
  color: var(--text);
}

/* Accordion mode.
   Below 900px the script moves each panel to sit directly beneath its own
   trigger, so these rules only match there. aria-expanded is set exclusively
   in accordion mode, which makes it a reliable hook without a media query. */
.reason-panels:empty,
.anxiety-panels:empty {
  display: none;
}

.reason-tab[aria-expanded="true"],
.anxiety-tab[aria-expanded="true"] {
  border-bottom-color: transparent;
}

.selector-chevron {
  display: none;
}

.reason-tab[aria-expanded],
.anxiety-tab[aria-expanded] {
  position: relative;
  padding-right: 36px;
}

.reason-tab[aria-expanded] .selector-chevron,
.anxiety-tab[aria-expanded] .selector-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  display: block;
  width: 12px;
  height: 12px;
  color: var(--caption);
  transform: translateY(-50%);
  transition: transform 0.22s ease, color 0.18s ease;
}

.reason-tab[aria-expanded="true"] .selector-chevron,
.anxiety-tab[aria-expanded="true"] .selector-chevron {
  color: var(--blackberry);
  transform: translateY(-50%) rotate(180deg);
}

.selector-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reason-tabs > .reason-panel {
  padding: 2px 8px 26px;
  border-bottom: 1px solid var(--border);
}

.anxiety-tabs > .anxiety-panel {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

/* Booking for someone */
.booking-someone {
  display: grid;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.booking-someone__intro {
  padding: 30px 0;
}

.booking-someone__intro h2 {
  margin-bottom: 16px;
  font-family: var(--serif);
  font-size: var(--fs-section);
  font-weight: 400;
  line-height: 1.12;
}

.booking-someone__intro p {
  color: var(--body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.booking-someone__steps {
  border-top: 1px solid var(--border);
}

.booking-someone__steps article {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}

.booking-someone__steps article > span {
  padding-top: 3px;
  color: var(--tea-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
}

.booking-someone__steps h3 {
  margin-bottom: 7px;
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.35;
}

.booking-someone__steps p {
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.7;
}

.booking-someone__actions {
  display: grid;
  gap: 10px;
  padding: 24px 0;
}

/* Cost */
.cost-layout {
  display: grid;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.cost-base {
  padding: 30px 0;
  border-bottom: 1px solid var(--text);
}

.cost-base__price {
  margin: 8px 0 10px;
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: clamp(52px, 18vw, 78px);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.cost-base > p {
  max-width: 390px;
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.7;
}

.cost-base h3 {
  margin-top: 26px;
  color: var(--tea-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.cost-base ul {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--body);
  font-size: var(--fs-ui);
  list-style: none;
}

.cost-base li::before {
  margin-right: 7px;
  color: var(--blackberry);
  content: "—";
}

.cost-base .cost-base__note {
  max-width: none;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.cost-base__note strong {
  color: var(--text);
}

.cost-extras {
  padding: 28px 0 8px;
}

.cost-extras__heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.cost-extras__heading h3 {
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: var(--fs-card);
  font-weight: 400;
}

.cost-extras__heading span,
.cost-extras article > span {
  color: var(--tea-text);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

.cost-extras article {
  display: grid;
  gap: 9px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.cost-extras article:last-child {
  border-bottom: 0;
}

.cost-extras article h3 {
  margin-bottom: 5px;
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

.cost-extras article p {
  color: var(--body);
  font-size: var(--fs-ui);
  line-height: 1.65;
}

/* Practical */
.practical-grid {
  display: grid;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.practical-grid article {
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}

.practical-grid article:last-child {
  border-bottom: 0;
}

.practical-grid h3 {
  margin-bottom: 9px;
  color: var(--blackberry);
  font-family: var(--serif);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.35;
}

.practical-grid p {
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.7;
}

.practical-grid a {
  color: var(--blackberry);
  font-weight: 500;
  text-underline-offset: 3px;
}

/* FAQ */
.checkup-faq__list {
  max-width: 820px;
}

.checkup-faq__item {
  border-bottom: 1px solid var(--border);
}

.checkup-faq__item:first-child {
  border-top: 1px solid var(--border);
}

.checkup-faq__heading {
  margin: 0;
  font: inherit;
}

.checkup-faq__trigger {
  display: flex;
  width: 100%;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  transition: color 0.18s ease;
}

.checkup-faq__trigger:hover {
  color: var(--blackberry);
}

.checkup-faq__icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--blackberry);
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}

.checkup-faq__icon svg {
  display: block;
  width: 13px;
  height: 13px;
  transition: transform 0.25s ease;
}

.checkup-faq__trigger[aria-expanded="true"] .checkup-faq__icon {
  background: var(--blackberry);
  color: var(--surface);
}

.checkup-faq__trigger[aria-expanded="true"] .checkup-faq__icon svg {
  transform: rotate(45deg);
}

.checkup-faq__answer {
  max-width: 700px;
  padding: 0 48px 22px 0;
}

.checkup-faq__answer p {
  color: var(--body);
  font-size: var(--fs-body-tight);
  line-height: 1.75;
}

/* Closing */
.checkup-closing {
  background: var(--blackberry);
}

.checkup-closing__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--section-y) var(--gutter);
  text-align: center;
}

.checkup-closing h2 {
  max-width: 780px;
  margin: 0 auto 16px;
  color: var(--surface);
  font-family: var(--serif);
  font-size: var(--fs-cta);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.checkup-closing p {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--surface);
  font-size: var(--fs-body);
  line-height: 1.7;
  opacity: 0.72;
}

.checkup-closing__actions {
  display: grid;
  gap: 10px;
}

.checkup-closing .btn--primary {
  border-color: var(--surface);
  background: var(--surface);
  color: var(--blackberry);
}

.checkup-closing .btn--primary:hover {
  border-color: var(--tea-tint);
  background: var(--tea-tint);
  color: var(--blackberry);
}

.checkup-closing .btn--outline {
  border-color: var(--surface);
  color: var(--surface);
}

.checkup-closing .btn--outline:hover {
  background: var(--surface);
  color: var(--blackberry);
}

/* Explicit focus treatment and touch target guarantees */
.reason-tab:focus-visible,
.anxiety-tab:focus-visible,
.approach-trigger:focus-visible,
.checkup-faq__trigger:focus-visible,
.checkup-toc a:focus-visible {
  position: relative;
  z-index: 2;
  outline: 2px solid var(--blackberry);
  outline-offset: 3px;
}

@media (min-width: 560px) {
  .booking-someone__actions,
  .checkup-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }

  .checkup-closing__actions {
    justify-content: center;
  }

  .booking-someone__actions .btn,
  .checkup-closing__actions .btn {
    width: auto;
  }

  .approach-trigger {
    grid-template-columns: 60px minmax(0, 1fr) 40px;
    gap: 18px;
    padding: 22px 22px;
  }

  .approach-number {
    width: 56px;
    height: 56px;
    font-size: 21px;
  }

  .approach-panel__inner {
    padding: 20px 24px 30px 100px;
  }

  .approach-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 36px;
  }

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

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

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

  .cost-extras__heading {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
  }

  .cost-extras article {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
  }

  .cost-extras article > span {
    text-align: right;
    white-space: nowrap;
  }
}

@media (min-width: 760px) {
  .checkup-heading {
    margin-bottom: 44px;
  }

  .anxiety-panel {
    padding: 34px 36px;
  }

  .booking-someone {
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    gap: 44px;
  }

  .booking-someone__intro {
    padding: 38px 0;
  }

  .booking-someone__steps {
    padding-left: 36px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }

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

  .practical-grid article {
    padding: 26px 24px;
  }

  .practical-grid article:nth-child(even) {
    border-left: 1px solid var(--border);
  }

  .practical-grid article:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

@media (min-width: 900px) {
  .reason-layout,
  .anxiety-layout {
    grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
    gap: 48px;
    align-items: start;
  }

  .reason-tabs,
  .anxiety-tabs {
    position: sticky;
    top: 128px;
  }

  .reason-panel,
  .anxiety-panel {
    min-height: 100%;
  }

  .reason-panel {
    padding-left: 44px;
    border-left: 1px solid var(--border);
  }

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

  .cost-base {
    padding: 36px 0 34px;
  }

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

  .cost-extras {
    padding: 30px 0 10px;
  }

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

  .practical-grid article,
  .practical-grid article:nth-child(even) {
    padding: 28px 24px;
    border-bottom: 0;
    border-left: 1px solid var(--border);
  }

  .practical-grid article:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

@media (min-width: 1060px) {
  .approach-items--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .check-up-page *,
  .check-up-page *::before,
  .check-up-page *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}