@font-face {
  font-family: "Mend Logo Sans";
  src: url("/assets/fonts/NunitoSans-VariableItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
}

@font-face {
  font-family: "Mend Nunito";
  src: url("/assets/fonts/NunitoSans-SemiBoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Mend Nunito";
  src: url("/assets/fonts/NunitoSans-BoldItalic.ttf") format("truetype");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-off-white: #FFFFFF;
  --brand-black-stage: #000000;
  --brand-orange: #E19D61;
  --brand-blue-gray: #B3C6D1;
  --brand-warm-gray: #CAB09B;
  --brand-cool-gray: #BCBBBA;
  --brand-blue-deep: #516A76;
  --brand-orange-soft: #F1D4B9;
  --ink: #172026;
  --muted: #5d686e;
  --bg: var(--brand-off-white);
  --paper: #ffffff;
  --line: #d9ddd8;
  --teal: var(--brand-blue-deep);
  --teal-dark: var(--brand-blue-deep);
  --coral: var(--brand-orange);
  --soft: var(--brand-blue-gray);
  --shadow: 0 18px 48px rgba(81, 106, 118, 0.14);
  /* Mend web guardrails: semantic tokens, never replace with page-local hues. */
  --mend-font: "Mend Logo Sans", "Nunito Sans", "NunitoSans", sans-serif;
  --mend-blue-60: #B3C6D1;
  --mend-blue-deep: #516A76;
  --mend-orange-30: #E19D61;
  --mend-gray-10: #FFFFFF;
  --mend-gray-warm: #CAB09B;
  --mend-white: #FFFFFF;
  --mend-black: #000000;
  --mend-ink: #172026;
  --mend-radius: 8px;
  --mend-rule: rgba(81, 106, 118, .32);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mend-font);
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
}

a {
  color: inherit;
}

.page {
  min-height: 100vh;
  padding: 48px 20px;
}

.wrap {
  width: min(960px, 100%);
  margin: 0 auto;
}

.narrow {
  width: min(720px, 100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 44px;
}

.mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: url("/assets/mend-logo.jpg") center / cover no-repeat;
  color: transparent;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-style: italic;
  font-size: 22px;
  box-shadow: 0 10px 28px rgba(81, 106, 118, 0.18);
}

.brand strong {
  display: block;
  font-size: 18px;
  font-weight: 800;
  font-style: italic;
}

.brand span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.brand .mark {
  color: transparent;
}

.hero {
  margin-bottom: 28px;
}

.eyebrow {
  color: var(--teal-dark);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
}

h1 {
  margin: 10px 0 14px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1;
  letter-spacing: 0;
  font-weight: 800;
  font-style: italic;
}

h2 {
  margin: 0 0 12px;
  font-size: 24px;
  letter-spacing: 0;
  font-weight: 800;
  font-style: italic;
}

p {
  color: var(--muted);
  font-size: 17px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 28px 0;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 760;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
}

.button.primary {
  background: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}

.button.primary:hover,
button:hover {
  background: var(--brand-blue-gray);
  border-color: var(--brand-blue-gray);
  color: var(--ink);
}

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

.card,
.notice,
.email-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 22px;
}

.notice {
  box-shadow: none;
  background: linear-gradient(135deg, rgba(226, 156, 95, 0.62), rgba(180, 196, 206, 0.92));
}

.notice strong {
  color: var(--teal-dark);
}

.email-box {
  margin: 28px 0;
}

.email-box form {
  display: grid;
  gap: 10px;
}

label {
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px 14px;
  font: inherit;
  background: #fff;
}

button {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--brand-orange);
  color: #fff;
  font: inherit;
  font-weight: 760;
  cursor: pointer;
}

.brand-band {
  position: relative;
  overflow: hidden;
  min-height: 170px;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin: 28px 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(226, 156, 95, 0.9), transparent 30%),
    radial-gradient(circle at 78% 34%, rgba(180, 196, 206, 0.9), transparent 32%),
    linear-gradient(105deg, #E29C5F 0%, #CAB09B 46%, #B4C4CE 100%);
  box-shadow: var(--shadow);
}

.brand-band video {
  display: none;
}

.brand-band .brand-band-label {
  position: absolute;
  left: 22px;
  bottom: 18px;
  color: #fff;
  font-weight: 800;
  font-style: italic;
  text-shadow: 0 2px 18px rgba(80,88,92,0.34);
}

.fine {
  font-size: 13px;
  color: var(--muted);
}

.footer {
  margin-top: 44px;
  color: var(--muted);
  font-size: 13px;
}

.ad-free-page {
  background:
    radial-gradient(circle at 18% 12%, rgba(226, 156, 95, 0.24), transparent 30%),
    radial-gradient(circle at 88% 22%, rgba(180, 196, 206, 0.34), transparent 32%),
    #ffffff;
}

.ad-free-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 24px;
  align-items: stretch;
  margin-bottom: 28px;
}

.ad-free-copy h1 {
  max-width: 820px;
}

.session-panel {
  display: grid;
  gap: 14px;
  align-content: center;
  border: 1px solid rgba(81, 106, 118, 0.22);
  border-radius: 8px;
  padding: 20px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(180, 196, 206, 0.78)),
    radial-gradient(circle at 70% 26%, rgba(226, 156, 95, 0.58), transparent 32%);
  box-shadow: var(--shadow);
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 4px 12px;
  align-items: start;
  padding: 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(217, 221, 216, 0.8);
}

.flow-step-link {
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.flow-step-link:hover,
.flow-step-link:focus-visible {
  border-color: rgba(27, 67, 86, 0.44);
  box-shadow: 0 10px 22px rgba(27, 67, 86, 0.12);
  transform: translateY(-1px);
  outline: none;
}

.flow-step span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-orange);
  color: #fff;
  font-weight: 800;
}

.flow-step strong {
  font-size: 18px;
}

.flow-step p {
  margin: 0;
  font-size: 14px;
}

.split-notice {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.split-notice p {
  margin-bottom: 0;
}

.video-section {
  margin: 34px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 14px;
}

.session-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #000;
}

.consent-dialog {
  width: min(620px, calc(100% - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--ink);
  background: transparent;
}

.consent-dialog::backdrop {
  background: rgba(23, 32, 38, 0.54);
}

.consent-card {
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid rgba(81, 106, 118, 0.22);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(23, 32, 38, 0.24);
  overflow-y: auto;
}

.consent-card h2,
.consent-card p {
  margin: 0;
}

.consent-check {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.consent-check input {
  width: 18px;
  margin-top: 2px;
}

.consent-email {
  display: grid;
  gap: 11px;
  padding: 18px;
  border: 1px solid rgba(81, 106, 118, 0.22);
  border-radius: 8px;
  background: #fff;
}

.consent-email[hidden] {
  display: none;
}

.consent-email h3 {
  margin: 0;
  font-size: 1.15rem;
}

.consent-email > p,
.consent-marketing span {
  font-size: 0.84rem;
  line-height: 1.5;
}

.consent-email-field {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 800;
}

.consent-email-field input {
  width: 100%;
}

.consent-marketing {
  padding: 12px;
}

.consent-status {
  min-height: 1.3em;
  color: var(--deep);
  font-size: 0.82rem;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.consent-actions button {
  padding: 0 18px;
}

.consent-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

@media (max-width: 720px) {
  .page {
    padding: 28px 16px;
  }

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

  .actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

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

  .split-notice,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .consent-actions {
    display: grid;
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  }

  .consent-dialog {
    width: calc(100% - 24px);
    height: 68vh;
    max-height: 68vh;
    height: 68dvh;
    max-height: 68dvh;
    overflow: hidden;
  }

  .consent-card {
    height: 100%;
    max-height: 100%;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 10px;
    padding: 16px;
    overflow: hidden;
  }

  .consent-email {
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .consent-actions button {
    width: 100%;
    min-width: 0;
    min-height: 48px;
  }
}

/* Mend brand-demo contrast and approved EMDR asset composition */
.brand-demo-page :where(h1, h2, h3, p, a, span, strong, figcaption, code) {
  color: #fff;
  text-shadow: 0 2px 12px rgba(23, 32, 38, .34);
}
.brand-demo-page .site-footer :where(p, a, span, strong, small) { color: #fff; }
.ball-layout {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 7%;
  align-items: end;
}
.ball-layout header { grid-column: 1 / -1; }
.ball-layout figure { margin: 0; }
.ball-layout img { width: 100%; display: block; background: #000; }
.ball-layout figcaption {
  padding: 12px 0;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}
.ball-layout aside { max-width: 34ch; padding-bottom: 44px; }

@media (max-width: 760px) {
  .ball-layout { grid-template-columns: 1fr; }
  .ball-layout aside { padding-bottom: 0; }
}

/* Minimal Mend brand reference */
.brand-reference-page { background: #fff; }
.brand-reference { width: min(1080px, calc(100% - 48px)); margin: 0 auto; padding: 44px 0 110px; }
.brand-reference-header { min-height: 260px; display: flex; align-items: center; gap: 28px; border-bottom: 1px solid rgba(23,32,38,.18); }
.brand-reference-header img { width: 112px; height: 112px; display: block; object-fit: cover; border-radius: 8px; }
.brand-reference-header p { margin: 0 0 5px; color: var(--muted); font-size: .82rem; }
.brand-reference-header h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 6rem); }
.brand-reference-block { padding: 72px 0; border-bottom: 1px solid rgba(23,32,38,.18); }
.reference-label { display: flex; gap: 18px; align-items: baseline; margin-bottom: 30px; }
.reference-label span { color: #E29C5F; font-weight: 700; }.reference-label h2 { margin: 0; font-size: 2rem; }
.reference-logo-card { min-height: 280px; padding: 40px; display: grid; grid-template-columns: 200px 1fr; gap: 44px; align-items: center; background: #B4C4CE; }
.reference-logo-card img { width: 200px; height: 200px; display: block; object-fit: cover; border-radius: 8px; }
.reference-logo-card strong { font-size: 1.5rem; }.reference-logo-card p { max-width: 50ch; color: var(--ink); }
.reference-colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reference-colors article { display: grid; gap: 5px; }.reference-colors i { height: 190px; display: block; border: 1px solid rgba(23,32,38,.08); }.reference-colors strong { margin-top: 8px; }
.reference-note { max-width: 66ch; margin: 28px 0 0; }
.reference-type { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reference-type article { min-height: 260px; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; background: #B4C4CE; }
.reference-type article:nth-child(2) { background: #E29C5F; }.reference-type span { font-size: .78rem; }.reference-type p { margin: auto 0; color: var(--ink); font-size: clamp(2rem, 4vw, 4rem); line-height: .95; }.reference-type article:nth-child(2) p { font-weight: 700; }
.reference-swirl { margin: 0; }.reference-swirl video { width: 100%; aspect-ratio: 16/7; display: block; object-fit: cover; }.reference-swirl figcaption { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 18px; padding: 14px 0; font-size: .82rem; }
.brand-reference code { font-family: var(--mend-font); font-style: italic; color: var(--muted); }
.brand-reference-rules { margin-top: 72px; padding: 28px; display: grid; grid-template-columns: 160px 1fr; gap: 20px; background: #BCBBBA; }.brand-reference-rules p { margin: 0; color: var(--ink); }

@media (max-width: 700px) {
  .brand-reference { width: calc(100% - 32px); padding-top: 24px; }.brand-reference-header { min-height: 210px; }.brand-reference-header img { width: 78px; height: 78px; }.brand-reference-block { padding: 54px 0; }.reference-logo-card { grid-template-columns: 1fr; padding: 24px; }.reference-logo-card img { width: 150px; height: 150px; }.reference-colors, .reference-type { grid-template-columns: 1fr; }.reference-colors i { height: 150px; }.reference-swirl video { aspect-ratio: 4/3; }.reference-swirl figcaption, .brand-reference-rules { grid-template-columns: 1fr; }
}

/* Brand operating manual: composition demonstration */
.brand-demo-page { background: #fff; color: var(--ink); }
.brand-demo-nav { min-height: 72px; padding: 12px max(24px, calc((100% - 1240px)/2)); display: flex; align-items: center; gap: 16px; background: #B4C4CE; border-bottom: 1px solid rgba(23,32,38,.18); }
.brand-demo-nav > a img { width: 46px; height: 46px; display: block; border-radius: 8px; object-fit: cover; }.brand-demo-nav > span { font-weight: 700; }.brand-demo-nav nav { margin-left: auto; display: flex; gap: 24px; }.brand-demo-nav nav a { color: var(--ink); font-size: .82rem; text-decoration: none; }
.brand-demo-hero { min-height: calc(100vh - 72px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: #B4C4CE; }
.brand-demo-hero-copy { z-index: 2; padding: 12vh 6vw 10vh max(24px, calc((100vw - 1240px)/2)); align-self: center; }.demo-index { margin: 0 0 18px; color: var(--ink); font-size: .75rem; font-weight: 700; text-transform: uppercase; }.brand-demo-hero h1 { max-width: 8ch; margin: 0; font-size: clamp(4rem, 8vw, 8rem); line-height: .82; }.brand-demo-hero-copy > p:last-child { max-width: 42ch; margin-top: 32px; color: var(--ink); font-size: 1.15rem; }
.brand-demo-hero-visual { position: relative; min-height: 70vh; margin: 7vh 0 0; overflow: hidden; }.brand-demo-hero-visual video { width: 100%; height: 100%; display: block; object-fit: cover; }.brand-demo-hero-visual figcaption { position: absolute; right: 24px; bottom: 20px; padding: 7px 10px; background: #BCBBBA; color: var(--ink); font-size: .72rem; }
.brand-demo-section { width: min(1240px, calc(100% - 48px)); margin: auto; padding: 130px 0; border-bottom: 1px solid rgba(23,32,38,.18); }.brand-demo-section > header { margin-bottom: 64px; }.brand-demo-section > header h2 { max-width: 13ch; margin: 0; font-size: clamp(3rem, 6vw, 6rem); line-height: .88; }
.identity-layout { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }.identity-layout header { grid-column: 1/7; }.identity-lockup { grid-column: 5/11; min-height: 270px; padding: 38px; display: flex; align-items: center; gap: 26px; background: #B4C4CE; }.identity-lockup img { width: 150px; height: 150px; border-radius: 8px; object-fit: cover; }.identity-lockup div { display: grid; }.identity-lockup strong { font-size: 2rem; }.identity-lockup span { color: var(--muted); }.identity-layout aside { grid-column: 11/13; align-self: end; font-size: .8rem; }.identity-layout code, .color-layout code { font-family: var(--mend-font); font-style: italic; }
.color-layout header { margin-left: 8.333%; }.color-composition { height: 390px; display: grid; grid-template-columns: 6fr 3fr 1fr; }.color-composition > div { padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; }.color-composition > div:nth-child(1) { background: #B4C4CE; }.color-composition > div:nth-child(2) { background: #E29C5F; }.color-composition > div:nth-child(3) { background: #BCBBBA; }.color-composition span { margin-bottom: auto; font-size: clamp(2rem, 4vw, 4rem); font-weight: 700; }.color-composition strong { font-size: 1.2rem; }.color-composition code { font-size: .78rem; }.section-note { max-width: 66ch; margin: 24px 0 0 8.333%; }
.type-layout { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; }.type-layout header { grid-column: 1/-1; }.type-primary, .type-secondary { min-height: 350px; padding: 34px; display: flex; flex-direction: column; justify-content: space-between; }.type-primary { background: #E29C5F; }.type-secondary { background: #B4C4CE; }.type-primary span, .type-secondary span { font-size: .76rem; }.type-primary p { max-width: 13ch; margin: auto 0; color: var(--ink); font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 700; line-height: .9; }.type-secondary p { max-width: 34ch; margin: auto 0 0; color: var(--ink); font-size: 1.25rem; line-height: 1.6; }
.composition-layout > header { margin-left: 16.666%; }.recipe-list { display: grid; gap: 0; }.recipe-list article { min-height: 350px; padding: 50px 0; display: grid; grid-template-columns: 7fr 5fr; gap: 7%; align-items: center; border-top: 1px solid rgba(23,32,38,.18); }.recipe-list article:nth-child(even) { grid-template-columns: 5fr 7fr; }.recipe-list article:nth-child(even) .recipe-diagram { order: 2; }.recipe-list article > div:last-child { max-width: 40ch; }.recipe-list article span { color: #E29C5F; font-weight: 700; }.recipe-list h3 { margin: 8px 0 12px; font-size: 2.2rem; }.recipe-diagram { height: 280px; position: relative; overflow: hidden; background: #B4C4CE; }.recipe-diagram i { position: absolute; display: block; background: #E29C5F; }.reversed-l i:nth-child(1) { left: 8%; top: 12%; width: 32%; height: 14%; }.reversed-l i:nth-child(2) { right: 0; top: 0; width: 52%; height: 76%; background: #BCBBBA; }.reversed-l i:nth-child(3) { left: 8%; bottom: 12%; width: 80%; height: 10%; }.triangle i { width: 15%; aspect-ratio: 1; border-radius: 50%; }.triangle i:nth-child(1) { left: 12%; top: 12%; }.triangle i:nth-child(2) { right: 18%; top: 42%; background: #BCBBBA; }.triangle i:nth-child(3) { left: 22%; bottom: 10%; }.radial i:nth-child(1) { width: 28%; aspect-ratio: 1; left: 36%; top: 18%; border-radius: 50%; }.radial i:nth-child(2) { width: 62%; height: 22%; left: 19%; top: 42%; border: 4px solid #BCBBBA; border-radius: 50%; background: transparent; transform: rotate(-8deg); }.radial i:nth-child(3) { width: 34%; height: 8%; left: 33%; bottom: 12%; background: #BCBBBA; }.modular { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: 12px; padding: 12px; }.modular i { position: static; width: auto; height: auto; }.modular i:nth-child(1) { grid-row: 1/3; background: #E29C5F; }.modular i:nth-child(2) { background: #BCBBBA; }.modular i:nth-child(3) { background: #fff; }
.grammar-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 8%; }.grammar-layout header { position: sticky; top: 30px; align-self: start; }.grammar-layout ol { margin: 0; padding: 0; list-style: none; }.grammar-layout li { padding: 28px 0; display: grid; grid-template-columns: 90px 1fr; border-top: 1px solid rgba(23,32,38,.18); }.grammar-layout li span { color: #E29C5F; font-size: .75rem; font-weight: 700; text-transform: uppercase; }.grammar-layout li strong { font-size: 1.35rem; }.grammar-layout li p { grid-column: 2; margin-bottom: 0; }
.brand-demo-closing { min-height: 65vh; padding: 12vh max(24px, calc((100% - 900px)/2)); display: flex; flex-direction: column; justify-content: center; background: #B4C4CE; }.brand-demo-closing p { max-width: 13ch; margin: 0 0 42px; color: var(--ink); font-size: clamp(3rem, 7vw, 7rem); font-weight: 700; line-height: .9; }.brand-demo-closing a { align-self: flex-start; color: var(--ink); }

@media (max-width: 760px) {
  .brand-demo-nav nav { display: none; }.brand-demo-hero { min-height: auto; grid-template-columns: 1fr; }.brand-demo-hero-copy { padding: 80px 16px; }.brand-demo-hero-visual { min-height: 52vh; margin: 0; }.brand-demo-section { width: calc(100% - 32px); padding: 84px 0; }.brand-demo-section > header, .color-layout header, .composition-layout > header { margin: 0 0 42px; }.identity-layout, .type-layout, .grammar-layout { display: grid; grid-template-columns: 1fr; }.identity-layout > * { grid-column: 1; }.identity-lockup { min-height: 240px; padding: 24px; }.identity-lockup img { width: 108px; height: 108px; }.color-composition { height: auto; grid-template-columns: 1fr; }.color-composition > div { min-height: 160px; }.section-note { margin-left: 0; }.type-primary, .type-secondary { min-height: 300px; }.recipe-list article, .recipe-list article:nth-child(even) { grid-template-columns: 1fr; padding: 38px 0 56px; }.recipe-list article:nth-child(even) .recipe-diagram { order: 0; }.recipe-diagram { height: 230px; }.grammar-layout header { position: static; }.brand-demo-closing { min-height: 520px; padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-demo-hero-visual video { display: none; }
  .brand-demo-hero-visual { background: #B4C4CE; }
}

/* Screenshot-locked Mend identity: white, orange, pale blue, logo-weight italic */
.brand-demo-page { font-family: var(--mend-font); font-weight: 300; background: #B3C6D1; }
.brand-demo-page main { background: #B3C6D1; }
.brand-demo-page :where(h1,h2,h3) { font-family: var(--mend-font); font-style: italic; font-weight: 300; }
.brand-demo-page :where(p,a,span,figcaption) { font-weight: 400; }
.brand-demo-page :where(strong) { font-weight: 600; }
.brand-demo-nav, .brand-demo-hero, .identity-lockup, .type-secondary, .recipe-diagram, .brand-demo-closing { background: #B3C6D1; }
.brand-demo-section:nth-of-type(even) { width: 100%; padding-inline: max(24px, calc((100% - 1240px)/2)); background: #E19D61; }
.color-composition > div:nth-child(1) { background: #B3C6D1; }
.color-composition > div:nth-child(2), .type-primary, .recipe-diagram i, .modular i:nth-child(1) { background: #E19D61; }
.color-composition > div:nth-child(3), .reversed-l i:nth-child(2), .triangle i:nth-child(2), .radial i:nth-child(3), .modular i:nth-child(2), .modular i:nth-child(3) { background: #FFFFFF; }
.color-composition > div:nth-child(3) { border: 1px solid rgba(23,32,38,.12); }
.recipe-list article span, .grammar-layout li span { color: #E19D61; }
.type-primary p { font-weight: 300; }
.type-secondary p { font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .brand-demo-hero-visual { background: #B3C6D1; } }

/* Shared Mend ecosystem: About, advocacy, contact, and global footer */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 12px 16px; background: var(--ink); color: #fff; border-radius: 6px; }
.skip-link:focus { top: 16px; }
.brand-link, .footer-brand-link { color: inherit; text-decoration: none; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin: 34px 0 18px; color: var(--muted); font-size: .9rem; }
.breadcrumb a { color: var(--deep); }
.advocacy-wrap, .about-page { width: min(1240px, calc(100% - 48px)); margin-inline: auto; }
.about-page { padding: 32px 0 88px; }
.about-hero, .advocacy-hero { background: linear-gradient(135deg, var(--soft), rgba(180,196,206,.48)); }
.advocacy-hero { min-height: min(76vh, 720px); padding: 28px 0 64px; display: grid; align-items: center; }
.about-hero { padding: 32px 0 72px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr); gap: 70px; align-items: center; }
.hero-grid h1, .about-hero h1 { max-width: 880px; margin: 12px 0 18px; font-size: clamp(2.7rem, 6vw, 5.8rem); line-height: .98; letter-spacing: -.055em; }
.hero-grid > div:first-child > p, .about-hero > p { max-width: 68ch; font-size: 1.15rem; }
.evidence-label, .eyebrow { color: var(--deep); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pathway-art { position: relative; min-height: 330px; display: grid; grid-template-columns: 1fr 1fr; place-items: center; gap: 46px; }
.pathway-art::before, .pathway-art::after { content: ""; position: absolute; inset: 18% 8%; border: 2px solid rgba(81,106,118,.25); border-radius: 50%; transform: rotate(18deg); }
.pathway-art::after { transform: rotate(-24deg); border-color: rgba(226,156,95,.7); }
.pathway-art span { z-index: 1; display: grid; place-items: center; width: 118px; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 1px solid var(--line); box-shadow: 0 14px 38px rgba(23,32,38,.08); font-weight: 800; }
.pathway-art i { position: absolute; width: 74px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--orange)); box-shadow: 0 0 50px rgba(226,156,95,.55); }
.text-button { background: transparent; color: var(--deep); border-color: transparent; text-decoration: underline; text-underline-offset: 4px; }
.section-nav { position: sticky; top: 0; z-index: 30; background: rgba(245,245,241,.94); border-block: 1px solid var(--line); backdrop-filter: blur(12px); }
.section-nav-inner { width: min(1240px, calc(100% - 48px)); min-height: 58px; margin: auto; display: flex; align-items: center; gap: 22px; overflow-x: auto; scrollbar-width: none; }
.section-nav-inner span { flex: 0 0 auto; font-weight: 800; }
.section-nav-inner a { flex: 0 0 auto; padding: 18px 0 15px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; }
.section-nav-inner a[aria-current] { color: var(--ink); border-color: var(--orange); }
.advocacy-content { padding-block: 22px 96px; }
.advocacy-section, .section-block { padding: 88px 0; border-bottom: 1px solid var(--line); }
.anchor-section { scroll-margin-top: 78px; }
.section-intro { max-width: 760px; margin-bottom: 42px; }
.section-intro h2, .false-binary h2, .is-is-not h2, .choice-section h2 { margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; }
.problem-grid, .comparison-grid, .is-is-not, .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.prose { max-width: 68ch; }
.plain-summary, .method-note { padding: 16px 18px; background: var(--soft); border-left: 4px solid var(--blue); }
.barrier-panel { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.barrier-buttons, .role-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.barrier-buttons button, .segmented-control button, .role-buttons button, .loop-visual button { min-height: 44px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); border-radius: 999px; padding: 9px 15px; }
.barrier-buttons button[aria-pressed="true"], .segmented-control button[aria-pressed="true"], .role-buttons button[aria-pressed="true"], .loop-visual button[aria-pressed="true"] { background: var(--deep); color: #fff; border-color: var(--deep); }
.barrier-output, .loop-output { min-height: 76px; margin: 20px 0 0; padding: 18px; background: rgba(180,196,206,.25); border-radius: 10px; }
.false-binary, .is-is-not { margin: 44px 0; padding: 50px; background: var(--ink); color: #fff; border-radius: 18px; }
.false-binary .eyebrow, .is-is-not .eyebrow { color: var(--orange); }
.comparison-grid > div { padding: 24px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; }
.comparison-grid > div > span { color: var(--orange); font-weight: 800; }
.case-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 54px; align-items: start; }
.case-index { position: sticky; top: 82px; display: grid; border-left: 1px solid var(--line); }
.case-index a { display: grid; grid-template-columns: 36px 1fr; gap: 8px; padding: 12px 16px; color: var(--muted); text-decoration: none; }
.case-index a:hover, .case-index a:focus { color: var(--ink); background: var(--soft); }
.case-index span, .case-meta span { color: var(--orange); font-weight: 900; }
.case-stack { display: grid; gap: 22px; }
.case-card { scroll-margin-top: 88px; padding: 34px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 16px 45px rgba(23,32,38,.05); }
.case-meta { display: flex; justify-content: space-between; gap: 16px; font-size: .88rem; }
.case-card h3 { margin: 12px 0; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.case-proposition { max-width: 68ch; font-size: 1.08rem; }
.case-card dl { display: grid; gap: 12px; }
.case-card dl div { display: grid; grid-template-columns: 140px 1fr; gap: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.case-card dt { font-weight: 800; }
.case-card dd { margin: 0; }
.cost-comparison, .loop-block, .role-output { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.segmented-control { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.table-scroll { overflow-x: auto; }
.cost-comparison table { width: 100%; border-collapse: collapse; }
.cost-comparison th, .cost-comparison td { padding: 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cost-comparison thead { background: var(--soft); }
.loop-block { margin-top: 38px; }
.loop-visual { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 26px; }
.loop-visual button:not(:last-child)::after { content: "→"; position: relative; left: 22px; color: var(--orange); }
.screen-reader-equivalent { max-width: 70ch; }
.diagnostic-distinction, .choice-grid, .principles-grid, .scenario-grid, .about-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.diagnostic-distinction p, .scenario-grid article, .principles-grid article, .about-card { padding: 22px; background: var(--soft); border-radius: 12px; }
.scenario-grid { grid-template-columns: repeat(5, 1fr); }
.scenario-grid span { color: var(--deep); font-weight: 900; }
.access-network { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.access-network div { position: relative; min-height: 160px; padding: 24px 18px; display: flex; flex-direction: column; gap: 18px; justify-content: center; background: var(--soft); border: 1px solid var(--line); border-radius: 50%; text-align: center; }
.access-network div:not(:last-child)::after { content: "↔"; position: absolute; right: -21px; z-index: 2; color: var(--orange); font-size: 1.5rem; }
.access-network span, .choice-grid span { color: var(--orange); font-weight: 900; }
.principles-grid { grid-template-columns: repeat(4, 1fr); }
.is-is-not { display: block; }
.is-is-not ul { padding-left: 20px; }
.choice-section { margin: 44px 0; padding: 72px 50px; background: var(--blue); border-radius: 18px; }
.choice-grid article { padding: 28px; background: rgba(255,255,255,.62); border-radius: 12px; }
.role-buttons { margin-bottom: 22px; }
.role-output { min-height: 160px; }
.evidence-section details { border-top: 1px solid var(--line); }
.evidence-section summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 800; }
.evidence-section details p { max-width: 72ch; padding-bottom: 20px; }
.review-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 28px; color: var(--muted); font-size: .9rem; }
.support-panel { display: grid; grid-template-columns: 1fr 1fr .75fr; gap: 28px; margin-top: 40px; padding: 28px; background: var(--soft); border-radius: 14px; }
.support-panel div:last-child { display: grid; align-content: start; gap: 10px; }
.about-pathways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 42px; }
.about-pathways > div { padding: 26px; background: rgba(255,255,255,.6); border-radius: 14px; }
.about-card { color: inherit; text-decoration: none; border: 1px solid var(--line); transition: transform .2s ease, box-shadow .2s ease; }
.about-card:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(23,32,38,.08); }
.scope-band { padding: 42px; background: var(--ink); color: #fff; border-radius: 16px; }
.contact-grid > article { padding: 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }

/* Long-form customer legal pages */
.legal-page { background: #f7f7f4; }
.legal-document { width: min(820px, calc(100% - 40px)); margin: 0 auto; padding: 42px 0 96px; }
.legal-document .brand { margin-bottom: 58px; }
.legal-header { padding-bottom: 32px; border-bottom: 1px solid rgba(81,106,118,.34); }
.legal-header h1 { max-width: 760px; font-size: clamp(2.55rem, 6vw, 5.2rem); }
.legal-header > p:last-child { max-width: 68ch; }
.legal-meta { margin: 22px 0 0; color: var(--ink); font-size: .8rem; }
.legal-summary { margin: 30px 0; padding: 26px 30px; border: 1px solid rgba(81,106,118,.25); background: var(--brand-blue-gray); }
.legal-summary h2 { font-size: 1.35rem; }
.legal-summary li { margin: 7px 0; }
.legal-toc { margin: 30px 0 54px; padding: 28px 30px; border: 1px solid var(--line); background: #fff; }
.legal-toc > strong { display: block; margin-bottom: 14px; font-size: .82rem; text-transform: uppercase; }
.legal-toc ol { columns: 2; column-gap: 42px; margin: 0; padding-left: 22px; }
.legal-toc li { margin: 0 0 7px; break-inside: avoid; color: var(--muted); font-size: .77rem; }
.legal-toc a { color: var(--ink); text-underline-offset: 3px; }
.legal-section { scroll-margin-top: 24px; padding: 35px 0; border-top: 1px solid rgba(81,106,118,.25); }
.legal-section h2 { margin: 0 0 16px; font-size: 1.35rem; line-height: 1.25; }
.legal-section h3 { margin: 26px 0 8px; font-size: .92rem; }
.legal-section p, .legal-section li, .legal-summary li { font-size: .82rem; line-height: 1.72; }
.legal-section p { margin: 0 0 13px; color: #3f494f; }
.legal-section ul { margin: 14px 0; padding-left: 22px; }
.legal-section li { margin-bottom: 7px; color: #3f494f; }
.legal-callout { margin: 18px -24px; padding: 30px 24px; border: 1px solid rgba(81,106,118,.3); background: rgba(179,198,209,.32); }
.legal-definitions { margin: 18px 0; }
.legal-definitions div { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 13px 0; border-top: 1px solid var(--line); font-size: .8rem; }
.legal-definitions dt { font-weight: 800; }
.legal-definitions dd { margin: 0; color: #3f494f; line-height: 1.65; }
.legal-related { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(81,106,118,.34); }

.site-footer { padding: 58px max(24px, calc((100% - 1240px) / 2)); background: var(--brand-blue-gray); color: var(--ink); }
.site-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer-brand-link { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.footer-logo { width: 44px; height: 44px; border-radius: var(--mend-radius); object-fit: cover; }
.footer-nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 22px; }
.footer-nav a, .site-footer-bottom a { color: var(--ink); }
.social-link { display: flex; align-items: center; gap: 9px; }
.youtube-icon { position: relative; width: 25px; height: 17px; flex: 0 0 auto; border-radius: 5px; background: #ff3b30; }
.youtube-icon::after { content: ""; position: absolute; left: 10px; top: 5px; border-left: 7px solid #fff; border-block: 4px solid transparent; }
.site-footer-bottom { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(81,106,118,.3); font-size: .88rem; }

:where(a, button, summary):focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (max-width: 960px) {
  .hero-grid, .problem-grid, .contact-grid { grid-template-columns: 1fr; }
  .pathway-art { min-height: 250px; }
  .case-layout { grid-template-columns: 1fr; }
  .case-index { position: static; display: flex; overflow-x: auto; border-left: 0; border-bottom: 1px solid var(--line); }
  .case-index a { min-width: 190px; }
  .scenario-grid, .principles-grid { grid-template-columns: repeat(2, 1fr); }
  .access-network { grid-template-columns: 1fr; }
  .access-network div { min-height: auto; border-radius: 14px; }
  .access-network div:not(:last-child)::after { content: "↕"; right: 50%; bottom: -22px; }
  .site-footer-inner { align-items: flex-start; }
}

@media (max-width: 720px) {
  .advocacy-wrap, .about-page, .section-nav-inner { width: min(100% - 32px, 1240px); }
  .advocacy-hero { min-height: auto; padding-bottom: 44px; }
  .hero-grid h1, .about-hero h1 { font-size: clamp(2.45rem, 13vw, 4.2rem); }
  .pathway-art { min-height: 230px; gap: 20px; }
  .pathway-art span { width: 92px; }
  .section-nav-inner { min-height: 52px; gap: 18px; }
  .section-nav-inner a { padding-block: 15px 12px; }
  .advocacy-section, .section-block { padding: 58px 0; }
  .false-binary, .is-is-not, .choice-section { margin-inline: -8px; padding: 32px 24px; }
  .comparison-grid, .is-is-not, .diagnostic-distinction, .choice-grid, .principles-grid, .scenario-grid, .about-card-grid, .about-pathways, .support-panel { grid-template-columns: 1fr; }
  .case-card { padding: 24px 20px; }
  .case-card dl div { grid-template-columns: 1fr; gap: 4px; }
  .cost-comparison, .loop-block, .role-output { padding: 20px; }
  .cost-comparison thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cost-comparison table, .cost-comparison tbody, .cost-comparison tr, .cost-comparison th, .cost-comparison td { display: block; width: 100%; }
  .cost-comparison tr { margin-bottom: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; }
  .cost-comparison tbody th { font-size: 1.2rem; border-bottom: 2px solid var(--blue); }
  .cost-comparison td { padding: 10px 0; }
  .cost-comparison td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .cost-comparison td:nth-child(2)::before { content: "Representative cost"; }
  .cost-comparison td:nth-child(3)::before { content: "Earnings measure"; }
  .cost-comparison td:nth-child(4)::before { content: "Access mechanism"; }
  .cost-comparison td:nth-child(5)::before { content: "Structural barrier"; }
  .cost-comparison td:nth-child(6)::before { content: "Source year"; }
  .loop-visual { display: grid; }
  .loop-visual button { width: 100%; text-align: left; }
  .loop-visual button:not(:last-child)::after { content: "↓"; left: auto; float: right; }
  .site-footer { padding: 44px 20px; }
  .site-footer-inner { align-items: flex-start; flex-direction: column; gap: 28px; }
  .footer-nav { justify-content: flex-start; }
  .legal-document { width: min(100% - 32px, 820px); padding-top: 28px; }
  .legal-document .brand { margin-bottom: 40px; }
  .legal-toc { padding: 24px 22px; }
  .legal-toc ol { columns: 1; }
  .legal-callout { margin-inline: -8px; padding-inline: 18px; }
  .legal-definitions div { grid-template-columns: 1fr; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .mend-swirl-field, .featured-swirl { display: none; }
}

@media print {
  .section-nav, .actions, .role-buttons, .pathway-art, .site-footer { display: none !important; }
  .advocacy-hero { min-height: 0; background: none; }
  .advocacy-section, .case-card, .evidence-section details { break-inside: avoid; }
  .evidence-section details > * { display: block !important; }
}

/* Studies in Access: editorial collection and case-study system */
.editorial-site { --case-accent: var(--mend-blue-deep); background: var(--mend-blue-60); color: var(--mend-ink); font-family: var(--mend-font); font-style: italic; font-weight: 600; }
.editorial-site main { background: var(--mend-white); }
.editorial-site :where(h1,h2,h3,h4,strong,dt,button) { font-family: var(--mend-font); font-style: italic; font-weight: 700; }
.editorial-site :where(p,li,dd,a,span,small,figcaption,blockquote,cite) { font-family: var(--mend-font); font-style: italic; }
.editorial-site h1, .editorial-site h2, .editorial-site blockquote { font-family: inherit; font-weight: 800; }
.editorial-masthead { width: 100%; min-height: 78px; margin: auto; padding-inline: max(24px, calc((100% - 1320px) / 2)); display: flex; justify-content: space-between; align-items: center; background: var(--mend-blue-60); border-bottom: 1px solid var(--mend-rule); }
.publication { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; line-height: 1.1; }
.publication img { width: 44px; height: 44px; border-radius: var(--mend-radius); object-fit: cover; }
.publication > span { display: grid; }
.publication b { font-size: 1.3rem; font-weight: 700; font-style: italic; }
.publication small { margin-top: 4px; color: var(--muted); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
.editorial-masthead nav { display: flex; gap: 28px; }
.editorial-masthead nav a { color: var(--ink); font-size: .86rem; text-decoration: none; }
.editorial-grid { width: min(1240px, calc(100% - 48px)); margin-inline: auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.issue-label { color: var(--deep); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.collection-intro { position: relative; isolation: isolate; overflow: hidden; width: 100%; padding: 110px max(24px, calc((100% - 1240px) / 2)) 130px; background: var(--mend-blue-60); }
.mend-swirl-field { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.collection-intro::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(180,196,206,.14), rgba(81,106,118,.12)); pointer-events: none; }
.collection-intro .issue-label { grid-column: 1 / 4; color: var(--mend-ink); }
.collection-intro h1 { grid-column: 1 / 11; margin: 24px 0 36px; font-size: clamp(3.4rem, 8.2vw, 8.3rem); line-height: .86; letter-spacing: -.065em; }
.collection-deck { grid-column: 2 / 8; font-size: clamp(1.2rem, 2.2vw, 1.7rem); line-height: 1.42; }
.collection-note { grid-column: 10 / 13; align-self: end; color: var(--mend-ink); font-size: .86rem; line-height: 1.55; }
.featured-study { align-items: end; padding-block: 120px 145px; background: var(--mend-white); }
.featured-visual { grid-column: 1 / 9; position: relative; isolation: isolate; min-height: 68vh; overflow: hidden; display: grid; place-items: center; background: var(--mend-blue-60); color: var(--mend-ink); text-decoration: none; }
.featured-swirl { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-visual::after { content: ""; position: absolute; z-index: -1; inset: 0; background: rgba(180,196,206,.2); }
.visual-word { position: absolute; bottom: 18px; left: 24px; font-size: clamp(4rem, 10vw, 9rem); font-weight: 900; line-height: .8; letter-spacing: -.08em; opacity: .14; }
.orb { z-index: 2; width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 25%, var(--mend-white) 0 12%, var(--mend-orange-30) 48% 100%); box-shadow: 0 0 50px rgba(255,255,255,.6); }
.orbit { position: absolute; width: 68%; height: 22%; border: 2px solid rgba(23,32,38,.55); border-radius: 50%; transform: rotate(-12deg); }
.orbit-b { width: 52%; height: 14%; border-color: rgba(255,255,255,.82); transform: rotate(10deg); }
.featured-copy { grid-column: 9 / 13; padding: 0 0 10px 32px; }
.study-number { color: var(--mend-orange-30); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.featured-copy h2 { margin: 14px 0 20px; font-size: clamp(2.1rem, 4vw, 4rem); line-height: .98; }
.featured-copy h2 a { color: inherit; text-decoration: none; }
.study-meta { display: grid; gap: 10px; margin-top: 34px; }
.study-meta div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.study-meta dt { color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.study-meta dd { margin: 0; font-size: .84rem; }
.study-index { width: 100%; margin: auto; padding: 120px max(24px, calc((100% - 1240px) / 2)); background: var(--mend-blue-60); border-top: 1px solid var(--mend-rule); }
.index-heading { display: grid; grid-template-columns: 2fr 4fr 3fr; gap: 30px; align-items: end; margin-bottom: 62px; }
.index-heading h2 { margin: 0; font-size: clamp(2.4rem, 5vw, 5rem); line-height: .95; }
.index-heading > p:last-child { max-width: 44ch; color: var(--muted); }
.editorial-list { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.index-story { grid-column: span 4; min-height: 340px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; color: var(--mend-ink); background: var(--mend-gray-10); border-top: 5px solid var(--case-accent); text-decoration: none; }
.index-story-wide { grid-column: span 8; }
.index-story-tall { min-height: 440px; }
.index-story > span { color: var(--case-accent); font-size: 2rem; font-weight: 900; }
.index-story small { color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.index-story h3 { max-width: 16ch; margin: 12px 0; font-size: clamp(1.7rem, 3vw, 3.2rem); font-weight: 800; line-height: 1; }
.accent-blue { --case-accent: var(--mend-blue-deep); background: var(--mend-white); }
.accent-orange { --case-accent: var(--mend-orange-30); background: var(--mend-orange-30); }
.accent-deep { --case-accent: var(--mend-orange-30); background: var(--mend-blue-deep); color: var(--mend-white); }
.accent-paper { --case-accent: var(--mend-blue-deep); background: var(--mend-gray-10); }
.editorial-interlude { margin: 60px 0 130px; padding: 16vh max(24px, calc((100% - 900px)/2)); background: var(--mend-blue-deep); color: var(--mend-white); }
.editorial-interlude p { margin: 0; font-size: clamp(2.3rem, 5.5vw, 5.7rem); line-height: 1.04; }
.editorial-interlude cite { display: block; margin-top: 28px; color: var(--mend-orange-30); font-family: inherit; font-size: .8rem; font-style: italic; letter-spacing: .08em; text-transform: uppercase; }
.collection-archive { padding-block: 20px 130px; background: var(--mend-white); }
.collection-archive header { grid-column: 1 / 5; }
.collection-archive h2 { font-size: 3rem; }
.archive-rows { grid-column: 6 / 13; }
.archive-rows a { min-height: 76px; display: flex; justify-content: space-between; gap: 20px; align-items: center; color: var(--ink); border-top: 1px solid var(--line); text-decoration: none; }
.archive-rows span { font-size: 1.35rem; font-weight: 700; }
.archive-rows small { color: var(--muted); }
.collection-notes { width: 100%; padding: 80px max(24px, calc((100% - 1240px) / 2)) 130px; background: var(--mend-gray-10); border-top: 1px solid var(--mend-rule); }

.case-page, .case-page main { background: var(--mend-white); }
.collection-notes > div:first-child { grid-column: 1 / 5; }
.collection-notes > div:nth-child(2) { grid-column: 5 / 10; max-width: 65ch; }
.collection-notes aside { grid-column: 11 / 13; font-size: .8rem; }

.case-accent-blue { --case-accent: var(--mend-blue-deep); }.case-accent-orange { --case-accent: var(--mend-orange-30); }.case-accent-deep { --case-accent: var(--mend-blue-deep); }
.case-header { padding-block: 100px 90px; }
.case-header .issue-label { grid-column: 1 / 4; }
.case-header h1 { grid-column: 1 / 12; margin: 20px 0 34px; font-size: clamp(3.2rem, 7vw, 7.2rem); line-height: .9; letter-spacing: -.055em; }
.case-deck { grid-column: 2 / 8; font-size: 1.45rem; line-height: 1.5; }
.case-header .study-meta { grid-column: 10 / 13; margin: 0; }
.opening-artifact { width: min(1440px, 100%); margin: 0 auto 145px; }
.artifact-field { height: 76vh; min-height: 560px; position: relative; overflow: hidden; display: grid; place-items: center; background: var(--case-accent); }
.artifact-field strong { color: rgba(255,255,255,.65); font-size: clamp(8rem, 28vw, 30rem); font-weight: 800; line-height: 1; }
.artifact-gate { position: absolute; z-index: 2; width: 18%; height: 72%; border: 18px solid var(--ink); border-bottom: 0; }
.artifact-path { position: absolute; z-index: 3; width: 68%; height: 2px; background: var(--mend-orange-30); transform: rotate(-7deg); }
.opening-artifact figcaption { width: min(1240px, calc(100% - 48px)); margin: 12px auto 0; display: grid; grid-template-columns: 3fr 7fr 2fr; color: var(--muted); font-size: .8rem; }
.opening-artifact figcaption p { grid-column: 2; margin: 0; }
.case-context, .case-outcome, .case-references { padding-block: 120px; }
.case-context > div:first-child, .case-outcome > div:first-child, .case-references > div:first-child { grid-column: 1 / 5; }
.case-context h2, .case-outcome h2, .case-references h2 { margin-top: 12px; font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; }
.reading-column { grid-column: 5 / 10; max-width: 68ch; font-size: 1.1rem; line-height: 1.72; }
.case-context aside { grid-column: 11 / 13; padding-top: 34px; color: var(--muted); font-size: .8rem; }
.central-question { padding: 120px max(24px, calc((100% - 1000px)/2)); background: var(--mend-blue-deep); color: var(--mend-white); }
.central-question .issue-label { color: var(--mend-orange-30); }
.central-question blockquote { margin: 24px 0 0; font-size: clamp(2.6rem, 5vw, 5.4rem); line-height: 1.05; }
.evidence-split { padding-block: 145px; align-items: center; }
.evidence-split figure { grid-column: 1 / 8; margin: 0; }
.evidence-split > div { grid-column: 9 / 13; }
.evidence-split h2 { font-size: 2.7rem; line-height: 1.05; }
.evidence-diagram { min-height: 430px; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; padding: 40px; background: rgba(180,196,206,.36); }
.evidence-diagram span { text-align: center; font-weight: 900; }
.evidence-diagram i { height: 2px; position: relative; background: var(--ink); }
.evidence-diagram i::after { content: "condition of entry"; position: absolute; left: 50%; top: -80px; width: 110px; height: 150px; display: grid; place-items: center; background: var(--case-accent); color: var(--ink); font-style: normal; text-align: center; transform: translateX(-50%); }
.evidence-split figcaption { margin-top: 10px; color: var(--muted); font-size: .8rem; }
.chapter-divider { width: min(1240px, calc(100% - 48px)); margin: 0 auto 20px; padding-top: 28px; display: flex; justify-content: space-between; border-top: 1px solid var(--ink); text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; }
.analysis-chapter { padding-block: 100px; border-bottom: 1px solid var(--line); }
.chapter-number { grid-column: 1 / 3; color: var(--case-accent); font-size: 4rem; font-weight: 900; }
.analysis-chapter > div { grid-column: 4 / 10; }
.analysis-chapter h2 { margin: 0 0 25px; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .95; }
.analysis-chapter > div p { max-width: 62ch; font-size: 1.15rem; line-height: 1.7; }
.analysis-chapter aside { grid-column: 11 / 13; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.case-pause { margin-top: 120px; }
.case-outcome { align-items: start; }
.takeaways { width: min(980px, calc(100% - 48px)); margin: 20px auto 140px; padding: 56px; background: rgba(226,156,95,.18); }
.takeaways ol { margin: 28px 0 0; padding: 0; counter-reset: lesson; list-style: none; }
.takeaways li { counter-increment: lesson; padding: 20px 0; border-top: 1px solid rgba(23,32,38,.18); font-size: 1.6rem; font-weight: 700; }
.takeaways li::before { content: "0" counter(lesson); display: inline-block; width: 70px; color: var(--mend-blue-deep); font-size: .75rem; font-weight: 700; }
.case-references { border-top: 1px solid var(--line); }
.case-references > div:nth-child(2) { grid-column: 5 / 10; line-height: 1.7; }
.related-study { width: min(1240px, calc(100% - 48px)); min-height: 210px; margin: 0 auto 130px; padding: 36px; display: grid; grid-template-columns: 3fr 7fr 1fr; gap: 30px; align-items: center; color: var(--mend-ink); background: var(--mend-blue-60); text-decoration: none; }
.related-study span { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.related-study strong { font-size: clamp(1.8rem, 3.5vw, 3.6rem); font-weight: 800; line-height: 1; }
.related-study i { font-size: 2.5rem; font-style: normal; text-align: right; }

@media (max-width: 800px) {
  .editorial-masthead { width: 100%; min-height: 68px; padding-inline: 16px; }
  .editorial-masthead nav { gap: 14px; }.editorial-masthead nav a:nth-child(2) { display: none; }
  .editorial-grid { width: calc(100% - 32px); grid-template-columns: 1fr; }
  .editorial-grid > * { grid-column: 1 !important; }
  .collection-intro { padding: 70px 16px 90px; }
  .collection-intro, .collection-notes { width: 100%; }
  .study-index { padding: 90px 16px; }
  .collection-intro h1 { font-size: clamp(3.5rem, 17vw, 6rem); }
  .collection-note { margin-top: 28px; }
  .featured-study { padding-bottom: 90px; }.featured-visual { min-height: 55vh; }.featured-copy { padding: 32px 0 0; }
  .index-heading { grid-template-columns: 1fr; }.editorial-list { grid-template-columns: 1fr; }.index-story, .index-story-wide { grid-column: 1; min-height: 300px; }
  .editorial-interlude { margin-bottom: 90px; padding-block: 90px; }
  .collection-archive header { margin-bottom: 30px; }.collection-notes > * { margin-bottom: 24px; }
  .case-header { padding-block: 70px; }.case-header .study-meta { margin-top: 28px; }
  .artifact-field { height: 58vh; min-height: 430px; }.artifact-gate { width: 34%; border-width: 12px; }
  .opening-artifact { margin-bottom: 80px; }.opening-artifact figcaption { grid-template-columns: 1fr; }.opening-artifact figcaption p { grid-column: 1; }
  .case-context, .case-outcome, .case-references, .evidence-split, .analysis-chapter { padding-block: 76px; }.case-context aside { padding-top: 20px; }
  .evidence-split figure { margin-bottom: 45px; }.evidence-diagram { min-height: 300px; padding: 18px; }.evidence-diagram i::after { width: 86px; height: 110px; top: -54px; font-size: .72rem; }
  .chapter-number { margin-bottom: 28px; }.analysis-chapter aside { margin-top: 24px; }
  .takeaways { padding: 32px 22px; }.related-study { grid-template-columns: 1fr; }.related-study i { text-align: left; }
}

/* Mend visual brand book */
.brand-book-page { background: var(--mend-blue-60); }
.brand-book { width: min(1240px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 110px; }
.brand-book-header { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
.brand-book-header .brand { margin-bottom: auto; }
.brand-kicker { margin: auto 0 10px; color: var(--mend-ink); font-size: .78rem; font-weight: 700; text-transform: uppercase; }
.brand-book-header h1 { max-width: 9ch; margin: 0; font-size: clamp(4rem, 11vw, 10rem); line-height: .82; }
.brand-book-deck { max-width: 52ch; margin: 28px 0 70px; color: var(--mend-ink); font-size: 1.25rem; }
.brand-book-section { padding: 90px 0; border-top: 1px solid var(--mend-rule); }
.brand-book-section > header { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 18px; margin-bottom: 44px; }
.brand-book-section > header > span { color: var(--mend-orange-30); font-size: 2rem; font-weight: 700; }
.brand-book-section > header h2 { margin: 0 0 6px; font-size: clamp(2rem, 4vw, 4rem); }
.brand-book-section > header p { margin: 0; }
.logo-demonstration { display: grid; grid-template-columns: 2fr 1fr; gap: 26px; padding: 42px; background: var(--mend-white); }
.logo-lockup { display: flex; align-items: center; gap: 22px; }
.logo-lockup img { width: 104px; height: 104px; border-radius: var(--mend-radius); object-fit: cover; }
.logo-lockup div { display: grid; }.logo-lockup strong { font-size: clamp(1.6rem, 3vw, 3rem); }.logo-lockup small { color: var(--muted); }
.logo-demonstration aside { padding-left: 26px; border-left: 1px solid var(--mend-rule); }
.logo-demonstration code, .motion-specimen code, .brand-swatches code, .type-lines code { font-family: var(--mend-font); font-style: italic; }
.motion-specimen figure { margin: 0; }.motion-specimen video { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.motion-specimen figcaption { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; }
.brand-swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brand-swatches article { min-height: 230px; padding: 15px; display: flex; flex-direction: column; background: var(--mend-white); }
.brand-swatches i { height: 125px; margin: -15px -15px 16px; display: block; background: var(--swatch); border: 1px solid rgba(23,32,38,.08); }
.brand-swatches strong { font-size: 1.1rem; }.brand-swatches small { margin-top: auto; color: var(--muted); }
.black-swatch { color: var(--mend-ink); }
.color-ratio { height: 74px; margin-top: 24px; display: grid; grid-template-columns: 6fr 3fr 1fr; }
.color-ratio span { display: grid; place-items: center; padding: 8px; text-align: center; font-size: .75rem; font-weight: 700; }
.color-ratio span:nth-child(1) { background: var(--mend-blue-60); border: 1px solid var(--mend-blue-deep); }.color-ratio span:nth-child(2) { background: var(--mend-orange-30); }.color-ratio span:nth-child(3) { background: var(--mend-gray-10); }
.type-lines { padding: 50px; background: var(--mend-white); }.type-display { margin: 0; color: var(--mend-ink); font-size: clamp(3rem, 8vw, 7rem); font-weight: 700; line-height: .9; }.type-title { margin: 42px 0 14px; color: var(--mend-ink); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 700; line-height: 1; }.type-body { max-width: 66ch; color: var(--mend-ink); font-size: 1.1rem; line-height: 1.7; }.type-lines > div { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--mend-rule); }
.brand-component-demo { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; padding: 34px; background: var(--mend-white); }.demo-copy h2 { max-width: 14ch; font-size: clamp(2.2rem, 4vw, 4.3rem); line-height: .95; }.demo-flow { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; padding: 24px; align-content: center; background: var(--mend-blue-60); }.demo-flow > span { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--mend-orange-30); color: var(--mend-white); font-weight: 700; }.demo-flow p { margin: 0 0 22px; }
.exclusions ul { margin: 0; padding: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 30px; background: var(--mend-white); list-style: none; }.exclusions li { min-height: 44px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--mend-rule); }.exclusions i { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; }.bad-green { background: #405b54; }.bad-brown { background: #c77e43; }.bad-cream { background: #f5f0e6; border: 1px solid #cab09b; }

@media (max-width: 720px) {
  .brand-book { width: calc(100% - 32px); }.brand-book-header { min-height: 620px; }.brand-book-section { padding: 64px 0; }.brand-book-section > header { grid-template-columns: 50px 1fr; }.logo-demonstration, .brand-component-demo { grid-template-columns: 1fr; padding: 24px; }.logo-demonstration aside { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--mend-rule); }.brand-swatches { grid-template-columns: repeat(2, 1fr); }.motion-specimen video { aspect-ratio: 4 / 3; }.motion-specimen figcaption { display: grid; }.color-ratio { height: auto; grid-template-columns: 1fr; }.color-ratio span { min-height: 54px; }.type-lines { padding: 28px 20px; }.exclusions ul { grid-template-columns: 1fr; padding: 22px; }
}

.session-content { width: min(960px, 100%); margin: 0 auto; }
.ad-free-page { display: block; }
.session-tools-trigger { display: inline-flex; align-items: center; gap: 8px; margin: -18px 0 28px auto; padding: 11px 15px; border: 1px solid var(--brand-blue-deep); border-radius: 999px; background: rgba(255, 255, 255, .88); color: var(--ink); cursor: pointer; font: inherit; font-size: 14px; font-style: italic; font-weight: 700; box-shadow: 0 8px 20px rgba(81, 106, 118, .12); }
.session-tools-trigger:hover, .session-tools-trigger:focus-visible { background: var(--brand-orange-soft); outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.session-tools-drawer[hidden] { display: none; }
.session-tools-drawer { position: fixed; z-index: 20; inset: 0 0 0 auto; width: min(720px, 94vw); overflow-y: auto; padding: 28px; border-left: 1px solid var(--brand-blue-deep); background: #fff; box-shadow: -18px 0 60px rgba(81, 106, 118, .24); }
.session-tools-drawer::before { content: ""; position: fixed; z-index: -1; inset: 0 720px 0 0; background: rgba(23, 32, 38, .22); pointer-events: none; }
.session-tools-drawer-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; padding-bottom: 20px; border-bottom: 1px solid var(--mend-rule); }
.session-tools-drawer-head h2 { max-width: 12ch; margin: 6px 0 0; font-size: clamp(28px, 5vw, 44px); line-height: .98; }
.session-tools-close { width: 40px; height: 40px; border: 1px solid var(--brand-blue-deep); border-radius: 50%; background: var(--brand-orange-soft); color: var(--ink); cursor: pointer; font: inherit; font-size: 26px; line-height: 1; }
.session-tools-close:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; }
.session-tools-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.session-tools-nav a { padding: 8px 11px; border: 1px solid var(--mend-rule); border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 700; }
.session-tools-nav a:hover, .session-tools-nav a:focus-visible { background: var(--brand-orange-soft); outline: none; }
.session-tools-drawer .mend-resource-suite, .session-tools-drawer .mend-practice-tool { margin: 22px 0; }
.session-tools-drawer .mend-resource-suite { background: var(--mend-blue-60); }
.session-tools-drawer .mend-practice-tool { background: var(--brand-orange-soft); }
body.tools-drawer-open { overflow: hidden; }
@media (max-width: 760px) { .session-tools-drawer { width: 100%; padding: 22px; } .session-tools-drawer::before { display: none; } .session-tools-trigger { margin-top: -12px; } }
.session-side-nav { position: fixed; z-index: 10; inset: 0 auto 0 0; width: 300px; display: flex; flex-direction: column; gap: 8px; padding: 28px 24px; background: linear-gradient(180deg, rgba(180,196,206,.96), rgba(202,176,155,.92)), var(--brand-blue-gray); color: var(--ink); overflow: auto; }
.session-side-nav-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; color: var(--ink); }
.session-side-nav-brand .mark { width: 42px; height: 42px; margin: 0; border-radius: 12px; box-shadow: 0 10px 28px rgba(81,106,118,.22); font-size: 22px; }
.session-side-nav-brand strong { display: block; font-size: 17px; font-style: italic; font-weight: 800; }
.session-side-nav-label { display: block; margin: -22px 0 14px; color: rgba(23,32,38,.66); font-size: 12px; }
.session-side-nav a, .session-side-nav button { display: block; padding: 11px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; background: rgba(255,255,255,.26); color: rgba(23,32,38,.82); cursor: pointer; font: inherit; font-size: 16px; line-height: 1.45; text-align: left; text-decoration: none; }
.session-side-nav a:hover, .session-side-nav a:focus-visible, .session-side-nav button:hover, .session-side-nav button:focus-visible { background: rgba(255,255,255,.52); outline: none; }
.session-side-nav a.is-current { background: #fff; color: var(--ink); border-color: var(--brand-orange); }
.session-side-nav p { margin: auto 0 0; color: rgba(23,32,38,.7); font-size: 13px; line-height: 1.45; border-top: 1px solid rgba(255,255,255,.45); padding-top: 18px; }
.wrap.session-content { width: auto; max-width: none; margin: 0 24px 0 324px; }
.session-tools-trigger { display: none; }
.session-tools-drawer { inset: 0 auto 0 0; border-right: 1px solid var(--brand-blue-deep); border-left: 0; box-shadow: 18px 0 60px rgba(81, 106, 118, .24); }
.session-tools-drawer::before { inset: 0 0 0 720px; }
@media (max-width: 980px) { .session-side-nav { position: static; width: 100%; min-height: 0; margin: -28px 0 28px; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 4px; padding: 14px 18px; } .session-side-nav-brand { margin: 0 8px 0 0; } .session-side-nav-label, .session-side-nav p { display: none; } .session-side-nav a, .session-side-nav button { padding: 8px; font-size: 16px; } .wrap.session-content { width: 100%; margin: 0; } .session-tools-trigger { display: inline-flex; margin: -18px 0 20px auto; } .session-tools-drawer { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid var(--brand-blue-deep); } .session-tools-drawer::before { inset: 0 720px 0 0; } }
@media (max-width: 520px) { .session-side-nav { grid-template-columns: auto 1fr 1fr; } .session-side-nav-brand strong { display: none; } }
/* Session resource layer: Mend palette, original tools, and no competitor page structure. */
.mend-resource-suite,
.mend-practice-tool {
  margin: 42px 0;
  padding: 30px;
  border: 1px solid rgba(23, 32, 38, .2);
  border-radius: var(--mend-radius);
  background: var(--mend-blue-60);
  color: var(--mend-ink);
}

.mend-resource-suite h2,
.mend-practice-tool h2 { max-width: 18ch; margin-top: 8px; font-size: clamp(28px, 5vw, 48px); line-height: 1; }
.resource-intro { max-width: 62ch; color: var(--mend-ink); }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.resource-card { min-height: 260px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px; border: 1px solid rgba(23, 32, 38, .2); border-radius: var(--mend-radius); background: var(--mend-white); }
.resource-card-featured { background: var(--brand-orange); }
.resource-label { margin-bottom: 12px; color: var(--mend-ink); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.resource-card h3 { margin: 0 0 10px; font-size: 24px; line-height: 1.05; }
.resource-card p { margin: 0; color: var(--mend-ink); font-size: 15px; }
.resource-card .button { align-self: flex-start; min-height: 42px; }
.resource-extension-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.resource-extension { display: grid; align-content: start; gap: 12px; padding: 20px; border: 1px solid rgba(23, 32, 38, .2); border-radius: var(--mend-radius); background: rgba(255, 255, 255, .72); }
.resource-extension h3 { margin: 0; font-size: 24px; line-height: 1.05; }
.resource-extension p { margin: 0; color: var(--mend-ink); font-size: 15px; }
.resource-extension form, .resource-extension > label { display: grid; gap: 8px; }
.resource-extension input, .resource-extension textarea, .resource-extension select { width: 100%; padding: 10px 11px; border: 1px solid rgba(23, 32, 38, .28); border-radius: 8px; background: rgba(255, 255, 255, .86); color: var(--mend-ink); font: inherit; font-weight: 400; }
.resource-extension textarea { resize: vertical; }
.worksheet-link-list { display: grid; gap: 7px; }
.worksheet-link-list a { padding: 8px 10px; border: 1px solid var(--mend-rule); border-radius: 7px; color: var(--ink); background: rgba(255, 255, 255, .72); font-size: 13px; font-weight: 700; text-decoration: none; }
.worksheet-link-list a:hover, .worksheet-link-list a:focus-visible { background: var(--brand-orange-soft); outline: none; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.local-data-list { display: grid; gap: 8px; margin: 4px 0 8px; }
.local-data-list div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(23, 32, 38, .14); }
.local-data-list dt, .local-data-list dd { margin: 0; font-size: 14px; }
.local-data-list dd { font-weight: 600; }
.resource-footer-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 20px; font-size: 14px; }
.resource-footer-links a { color: var(--mend-ink); font-weight: 600; }
.mend-practice-tool { display: grid; grid-template-columns: minmax(0, .9fr) minmax(280px, 1.1fr); gap: 28px; align-items: start; background: var(--mend-blue-60); }
.practice-copy { padding: 2px; }
.practice-copy p { max-width: 54ch; color: var(--mend-ink); }
.practice-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 22px; }
.practice-settings { display: grid; gap: 14px; margin-top: 24px; }
.practice-settings > label { display: grid; grid-template-columns: 92px 1fr 45px; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; }
.practice-settings input { width: 100%; accent-color: var(--mend-ink); }
.practice-settings output { font-variant-numeric: tabular-nums; text-align: right; }
.practice-settings fieldset { display: grid; gap: 8px; padding: 0; border: 0; }
.practice-settings legend { margin-bottom: 2px; font-size: 14px; font-weight: 700; }
.option-row { display: flex; flex-wrap: wrap; gap: 6px; }
.option-row button { min-width: 42px; min-height: 38px; padding: 7px 10px; border: 1px solid rgba(23, 32, 38, .28); border-radius: 8px; background: rgba(255, 255, 255, .62); color: var(--mend-ink); cursor: pointer; font: inherit; font-size: 12px; }
.option-row button[aria-pressed="true"] { background: var(--mend-ink); color: var(--mend-white); }
.option-row button[data-color="orange"] { background: var(--mend-orange-30); }
.option-row button[data-color="blue"] { background: var(--mend-blue-60); }
.option-row button[data-color="white"] { background: var(--mend-white); }
.option-row button[data-color="ink"] { background: var(--mend-ink); color: var(--mend-white); }
.bilateral-stage { position: relative; min-height: 360px; overflow: hidden; border-radius: var(--mend-radius); background: var(--mend-black); border: 1px solid rgba(23, 32, 38, .2); }
.bilateral-stage::before { content: ""; position: absolute; inset: 50% 12%; height: 1px; background: rgba(255, 255, 255, .2); }
.bilateral-stage[data-background="white"] { background: var(--mend-white); }
.bilateral-stage[data-background="black"] { background: var(--mend-black); }
.bilateral-stage[data-background="ink"] { background: var(--mend-ink); }
.bilateral-stage[data-background="orange"] { background: var(--mend-orange-30); }
.bilateral-stage[data-background="gray"] { background: var(--brand-cool-gray); }
.bilateral-stage[data-path="vertical"]::before { inset: 12% 50%; width: 1px; height: auto; }
.bilateral-stage[data-path="diagonal"]::before { inset: 50% 12%; transform: rotate(-22deg); }
.bilateral-stage[data-path="circle"]::before { inset: 15% 28%; height: 70%; border: 1px solid rgba(23, 32, 38, .32); border-radius: 50%; background: transparent; }
.bilateral-stage [data-bilateral-orb] { position: absolute; top: calc(50% - 22px); left: calc(50% - 22px); width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffdf5 0%, #f9e2b5 42%, #e19d61 74%, #8b5d39 100%); box-shadow: 0 0 28px rgba(244, 204, 133, .72), 0 0 0 10px rgba(244, 204, 133, .12); will-change: transform; }
.bilateral-stage [data-bilateral-orb][data-color="blue"] { background: var(--mend-blue-60); }
.bilateral-stage [data-bilateral-orb][data-color="white"] { background: var(--mend-white); }
.bilateral-stage [data-bilateral-orb][data-color="ink"] { background: var(--mend-ink); box-shadow: 0 0 0 12px rgba(23, 32, 38, .22); }
.bilateral-stage [data-bilateral-orb][data-size="25"] { transform: scale(.55); }
.bilateral-stage [data-bilateral-orb][data-size="50"] { transform: scale(.75); }
.bilateral-stage [data-bilateral-orb][data-size="100"] { transform: scale(1.25); }
.stage-timer { position: absolute; top: 16px; right: 16px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .7); color: var(--mend-ink); font-size: 12px; font-variant-numeric: tabular-nums; }
.stage-fullscreen { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.38); border-radius: 6px; background: rgba(0,0,0,.48); color: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.bilateral-stage:fullscreen { width: 100vw; height: 100vh; min-height: 100vh; border-radius: 0; }
.bilateral-stage:fullscreen [data-bilateral-orb] { width: 64px; height: 64px; top: calc(50% - 32px); left: calc(50% - 32px); }
@media (max-width: 980px) { .ad-free-page { grid-template-columns: 1fr; } .session-sidebar { position: static; min-height: auto; } .session-sidebar nav { grid-template-columns: repeat(3, 1fr); } .session-sidebar-note { display: none; } }
@media (max-width: 780px) { .resource-grid, .resource-extension-grid { grid-template-columns: 1fr 1fr; } .mend-practice-tool { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .resource-grid, .resource-extension-grid { grid-template-columns: 1fr; } .form-two-col { grid-template-columns: 1fr; } .session-sidebar nav { grid-template-columns: 1fr 1fr; } .mend-resource-suite, .mend-practice-tool { padding: 22px; } .practice-settings > label { grid-template-columns: 78px 1fr 38px; } }
@media (prefers-reduced-motion: reduce) { .bilateral-stage.is-running span { animation: none; } }
.practice-page .wrap.session-content { width: auto; max-width: none; margin: 0 24px 0 324px; }
.practice-page .mend-practice-tool { margin-top: 28px; }
@media (max-width: 980px) { .practice-page .wrap.session-content { width: 100%; margin: 0; } }
.resource-page-card { max-width: 720px; margin: 24px 0; padding: clamp(24px, 5vw, 48px); border: 1px solid var(--mend-rule); border-top: 8px solid var(--mend-orange-30); border-radius: var(--mend-radius); background: var(--mend-white); box-shadow: var(--shadow); }
.resource-page-card h1 { max-width: 16ch; }
.resource-page-card form, .resource-page-card > label { display: grid; gap: 8px; margin-top: 18px; }
.resource-page-card input, .resource-page-card textarea, .resource-page-card select { width: 100%; padding: 11px; border: 1px solid var(--mend-ink); border-radius: var(--mend-radius); background: var(--mend-white); color: var(--mend-ink); font: inherit; }
.resource-page-card .worksheet-link-list { display: grid; gap: 10px; margin-top: 24px; }
.resource-page-card .worksheet-link-list a { padding: 12px; }
.target-example-list { margin: 14px 0 22px; padding-left: 22px; display: grid; gap: 9px; }
.target-example-list li { padding-left: 4px; }
.resource-page-card .callout p { margin: 8px 0 0; }