/* Material 3 docs layout — uses tokens from material-tokens.css */

.theme-material {
  /* Bridge legacy portfolio vars → M3 sys tokens */
  --md-docs-hero-bg: var(--md-sys-color-surface);

  --bg: var(--md-sys-color-surface);
  --bg-card: var(--md-sys-color-surface-container-lowest);
  --ink: var(--md-sys-color-on-surface);
  --ink-secondary: var(--md-sys-color-on-surface-variant);
  --ink-muted: var(--md-sys-color-outline);
  --accent: var(--md-sys-color-primary);
  --accent-light: var(--md-sys-color-primary-container);
  --border: var(--md-sys-color-outline-variant);
  --tag-bg: var(--md-sys-color-secondary-container);
  --tag-text: var(--md-sys-color-on-surface-variant);
  --shadow-sm: var(--md-sys-elevation-level1);
  --shadow-md: var(--md-sys-elevation-level2);
  --radius: var(--md-sys-shape-corner-large);
  --radius-sm: var(--md-sys-shape-corner-small);

  /* Short aliases */
  --md-primary: var(--md-sys-color-primary);
  --md-on-primary: var(--md-sys-color-on-primary);
  --md-primary-container: var(--md-sys-color-primary-container);
  --md-on-primary-container: var(--md-sys-color-on-primary-container);
  --md-secondary-container: var(--md-sys-color-secondary-container);
  --md-on-surface: var(--md-sys-color-on-surface);
  --md-on-surface-variant: var(--md-sys-color-on-surface-variant);
  --md-outline: var(--md-sys-color-outline);
  --md-outline-variant: var(--md-sys-color-outline-variant);
  --md-surface: var(--md-sys-color-surface);
  --md-surface-card: var(--md-sys-color-surface-container-lowest);
  --md-surface-muted: var(--md-sys-color-surface-container);
  --md-inverse-surface: var(--md-sys-color-inverse-surface);
  --md-shape-sm: var(--md-sys-shape-corner-small);
  --md-shape-md: var(--md-sys-shape-corner-medium);
  --md-shape-lg: var(--md-sys-shape-corner-extra-large);
  --md-shape-full: var(--md-sys-shape-corner-full);
  --md-elevation-1: var(--md-sys-elevation-level1);
  --md-elevation-2: var(--md-sys-elevation-level2);
}

html.theme-material,
html.theme-material body,
body.cs-m3-docs-page {
  font-family: 'Roboto', var(--md-ref-typeface-plain, sans-serif);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

html.theme-material body.cs-m3-docs-page {
  background: var(--md-sys-color-surface);
  --bg: var(--md-sys-color-surface);
  /* Match homepage Notion Roboto voice (weight / tracking / warm ink) */
  --ink: #37352f;
  --ink-secondary: rgba(55, 53, 47, 0.65);
  --ink-muted: rgba(55, 53, 47, 0.45);
  --md-sys-color-on-surface: #37352f;
  --md-sys-color-on-surface-variant: rgba(55, 53, 47, 0.68);
  --md-sys-color-outline: rgba(55, 53, 47, 0.45);
  letter-spacing: -0.011em;
  color: #37352f;
}

body.cs-m3-docs-page .m3-docs-title {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #37352f;
}

body.cs-m3-docs-page .m3-docs-lede {
  font-size: clamp(16px, 0.6vw + 14px, 18px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .m3-docs-eyebrow,
body.cs-m3-docs-page .m3-docs-meta-line {
  letter-spacing: 0.01em;
  color: rgba(55, 53, 47, 0.65);
}

body.cs-m3-docs-page .cs-m3-docs .cs-chapter-heading h3,
body.cs-m3-docs-page .cs-chapter-heading h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  color: #37352f;
}

body.cs-m3-docs-page .cs-chapter-sub {
  letter-spacing: -0.01em;
  color: rgba(55, 53, 47, 0.65);
}

body.cs-m3-docs-page .case-study p,
body.cs-m3-docs-page .case-study li,
body.cs-m3-docs-page .block p,
body.cs-m3-docs-page .cs-snapshot-beat p,
body.cs-m3-docs-page .cs-snapshot-beat strong {
  letter-spacing: -0.011em;
}

body.cs-m3-docs-page .case-study p,
body.cs-m3-docs-page .case-study li,
body.cs-m3-docs-page .block p,
body.cs-m3-docs-page .cs-snapshot-beat p {
  line-height: 1.55;
  color: rgba(55, 53, 47, 0.78);
}

body.cs-m3-docs-page .cs-snapshot-beat strong,
body.cs-m3-docs-page .block h4,
body.cs-m3-docs-page h4 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #37352f;
}

body.cs-m3-docs-page .block-label {
  letter-spacing: 0.08em;
  color: rgba(55, 53, 47, 0.45);
}

body.cs-m3-docs-page .nav-logo {
  letter-spacing: -0.02em;
  color: #37352f;
}

body.cs-m3-docs-page .nav-links a {
  letter-spacing: -0.01em;
  color: rgba(55, 53, 47, 0.65);
}

body.cs-m3-docs-page .reflection-block p {
  font-weight: 400;
  letter-spacing: -0.015em;
  color: #37352f;
}

body.cs-m3-docs-page footer h2 {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #37352f;
  line-height: 1.15;
}

.theme-material .material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* M3 docs case study — breadcrumb back link */
body.cs-m3-docs-page .breadcrumb {
  display: none;
}

body.cs-m3-docs-page .breadcrumb a {
  color: var(--md-sys-color-on-surface-variant);
}

body.cs-m3-docs-page .breadcrumb a:hover {
  color: var(--md-sys-color-primary);
}

body.cs-m3-docs-page .breadcrumb .sep,
body.cs-m3-docs-page .breadcrumb .current {
  color: var(--md-sys-color-outline);
}

/* ─── M3 DOCS HERO — m3.material.io/components/*/overview ─── */
.cs-m3-docs .m3-docs-hero,
.cs-m3-docs .m3-docs-tabs-bar {
  isolation: isolate;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-inline: max(var(--page-pad), calc((100vw - 1120px) / 2));
  box-sizing: border-box;
}

.cs-m3-docs .m3-docs-hero {
  position: relative;
}

.cs-m3-docs .m3-docs-tabs-bar {
  position: sticky;
  top: 8px;
  z-index: 90;
  --m3-sticky-tabs-offset: 88px;
}

.cs-m3-docs .m3-docs-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--md-sys-color-surface);
}

.m3-docs-hero {
  margin: 0;
  background: transparent;
  padding: clamp(40px, 6vw, 72px) 0 0;
}

.m3-docs-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-bottom: clamp(28px, 4vw, 40px);
}

.m3-docs-hero-copy {
  display: flex;
  flex-direction: column;
}

.m3-docs-hero-story {
  margin-bottom: 28px;
}

.m3-docs-hero-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.m3-docs-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.m3-docs-meta-sep {
  color: var(--md-sys-color-outline);
}

.m3-docs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 16px;
}

.m3-docs-brand {
  border-radius: var(--md-sys-shape-corner-extra-small);
  object-fit: cover;
}

.m3-docs-title {
  font-family: var(--md-ref-typeface-brand);
  font-size: var(--md-sys-typescale-display-medium-size);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 20px;
}

.m3-docs-lede {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  color: var(--md-sys-color-on-surface);
  max-width: 42ch;
  margin: 0;
}

.m3-docs-resources-label {
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
}

.m3-docs-meta {
  font-weight: var(--md-sys-typescale-body-medium-weight);
}

.m3-docs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Hero visual */
.m3-docs-hero-visual {
  position: relative;
  min-height: clamp(280px, 36vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.m3-docs-visual-bg,
.index-card-visual--inventory {
  background:
    radial-gradient(ellipse 75% 65% at 15% 25%, color-mix(in srgb, var(--md-sys-color-tertiary-container) 85%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 85% 75%, color-mix(in srgb, var(--md-sys-color-primary-container) 90%, transparent) 0%, transparent 55%),
    linear-gradient(145deg, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-secondary-container) 100%);
}

.m3-docs-visual-bg {
  position: absolute;
  inset: 0;
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
}

.m3-docs-visual-bg--intake {
  background:
    radial-gradient(ellipse 78% 68% at 18% 22%, color-mix(in srgb, var(--md-sys-color-primary-container) 82%, transparent) 0%, transparent 58%),
    radial-gradient(ellipse 72% 58% at 82% 78%, color-mix(in srgb, var(--md-sys-color-secondary-container) 88%, transparent) 0%, transparent 56%),
    linear-gradient(148deg, #e4eaf6 0%, color-mix(in srgb, var(--md-sys-color-primary-container) 38%, var(--md-sys-color-surface-container)) 100%);
}

.m3-docs-visual-card {
  position: relative;
  z-index: 1;
  margin: 0;
  width: min(52%, 200px);
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-lowest);
  box-shadow: var(--md-sys-elevation-level3);
  border: 3px solid var(--md-sys-color-surface-container-lowest);
}

.m3-docs-visual-card--phone {
  width: clamp(168px, 44%, 228px);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.m3-docs-visual-card.m3-docs-visual-card--zebra {
  width: 100%;
  height: 100%;
  max-width: none;
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.m3-docs-visual-card--phone .cs-hero-inventory-mock {
  transform: rotate(-2.5deg);
}

.m3-docs-visual-card--phone .index-inventory-scene__phone.device-frame--phone {
  height: clamp(260px, 38vw, 320px);
}

.m3-docs-visual-card--phone .device-frame--phone {
  width: 100%;
}

.m3-docs-visual-card--phone .index-inventory-scene__phone img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
}

.m3-docs-visual-card--phone .device-frame--phone:not(.index-inventory-scene__phone) img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: top center;
}

.m3-docs-visual-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  object-position: top center;
}

.m3-docs-visual-card--wide {
  width: min(88%, 360px);
  border-radius: var(--md-sys-shape-corner-large);
}

.m3-docs-visual-card--wide img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}

/* Tab bar — M3 segmented pill track (m3.material.io) */
.m3-docs-tabs-bar {
  margin: 0;
  padding: 0 0 16px;
  background: transparent;
  transition: none;
}

.m3-docs-tabs-bar.is-stuck {
  /* keep class for hooks; no layout shift on stick */
}

.article-tab-list,
.article-tab-list .navigation-container {
  background: transparent;
}

.article-tab-list {
  display: block;
  width: 100%;
}

.article-tab-list .navigation-container {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.article-tab-list .navigation-container::-webkit-scrollbar {
  display: none;
}

.m3-docs-tab-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: 4px;
  width: 100%;
}

.m3-docs-tab-row > .m3-home-glass-shell,
.m3-docs-tab-row > .m3-home-glass-spacer {
  grid-column: 1;
  justify-self: end;
}

.m3-docs-tab-row > .m3-tabs-glass-shell,
.m3-docs-tab-row > .m3-tabs-glass-spacer {
  grid-column: 2;
  justify-self: center;
}

.m3-glass-shell-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  vertical-align: middle;
  width: fit-content;
  max-width: fit-content;
}

.m3-glass-shell-wrap:not(.pw-glass-shell) > .bg-black,
.m3-glass-shell-wrap:not(.pw-glass-shell) > svg,
.m3-glass-shell-wrap:not(.pw-glass-shell) > span {
  display: none !important;
}

.m3-glass-shell-wrap:not(.is-portal) > .liquid-glass-react-home,
.m3-glass-shell-wrap:not(.is-portal) > .liquid-glass-react-track,
.m3-glass-shell-wrap:not(.is-portal) > .liquid-glass-react-pw-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: auto !important;
  display: inline-flex !important;
}

.m3-glass-shell-wrap:not(.pw-glass-shell) > .liquid-glass-react-pw-panel,
.liquid-glass-react-pw-panel {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

.m3-glass-shell-wrap.is-portal > .liquid-glass-react-home,
.m3-glass-shell-wrap.is-portal > .liquid-glass-react-track {
  position: fixed !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}

.m3-glass-shell-wrap.is-portal .glass,
.m3-glass-shell-wrap.is-portal .glass__warp,
.m3-glass-shell-wrap.is-portal > span {
  transition: none !important;
}

.m3-home-glass-shell {
  flex: 0 0 auto;
}

.m3-tabs-glass-shell {
  flex: 0 0 auto;
}

.tabbed-navigation.liquid-glass-track {
  position: relative;
  isolation: isolate;
  overflow: visible;
  padding: 0;
  background: transparent;
  transition: none;
}

.m3-home-glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-full);
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.m3-home-glass-btn:hover {
  color: var(--md-sys-color-on-surface);
}

.m3-home-glass-btn .google-symbols {
  font-size: 20px;
  line-height: 1;
}

.liquid-glass-react-home .glass {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px !important;
  box-shadow: none !important;
  overflow: hidden !important;
  border-radius: var(--md-sys-shape-corner-full) !important;
  transition: none !important;
}

.liquid-glass-react-home .glass__warp {
  border-radius: inherit !important;
}

.liquid-glass-react-home .glass > div:last-child {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font: inherit !important;
  color: inherit !important;
  text-shadow: none !important;
}

.article-tab-list .tabbed-navigation {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-high);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.tabbed-navigation-inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
}

.tabbed-navigation-inner--tabs {
  position: relative;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.liquid-glass-layout-spacer {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

.liquid-glass-react-track {
  pointer-events: auto;
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.liquid-glass-react-home {
  border-radius: var(--md-sys-shape-corner-full);
  overflow: hidden;
}

.m3-glass-shell-wrap.is-portal > .liquid-glass-react-track,
.m3-glass-shell-wrap.is-portal > .liquid-glass-react-home {
  border-radius: var(--md-sys-shape-corner-full) !important;
  overflow: hidden !important;
}

.liquid-glass-react-track .glass {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  width: auto !important;
  max-width: none !important;
  padding: 4px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  scrollbar-width: none;
  border-radius: var(--md-sys-shape-corner-full) !important;
  transition: none !important;
}

.liquid-glass-react-track .glass__warp {
  border-radius: inherit !important;
}

.liquid-glass-react-track .glass::-webkit-scrollbar {
  display: none;
}

.liquid-glass-react-track .glass > div:last-child {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2px !important;
  width: max-content !important;
  max-width: none !important;
  font: inherit !important;
  color: inherit !important;
  text-shadow: none !important;
}

/* Password gate — liquid-glass panel over blurred backdrop. */
.pw-backdrop-glass-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pw-backdrop-glass-shell > span {
  opacity: 0 !important;
}

.liquid-glass-react-pw-backdrop {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.liquid-glass-react-pw-backdrop .glass {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
  background: rgba(249, 249, 248, 0.28) !important;
}

.liquid-glass-react-pw-backdrop .glass__warp {
  border-radius: 0 !important;
}

.pw-password-glass-shell {
  width: 100%;
  max-width: min(420px, calc(100vw - 2 * var(--page-pad, 24px)));
  filter: drop-shadow(0 12px 28px rgba(55, 53, 47, 0.08));
}

.liquid-glass-react-pw-panel {
  width: 100% !important;
  display: flex !important;
}

.liquid-glass-react-pw-panel .glass {
  width: 100% !important;
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.82),
    inset 0 0 0 1px rgba(55, 53, 47, 0.08) !important;
}

.liquid-glass-react-pw-panel .glass__warp {
  border-radius: inherit !important;
}

.liquid-glass-react-pw-panel .glass > div:last-child {
  width: 100% !important;
  max-width: 100% !important;
}

.pw-password-glass-shell > span {
  opacity: 0 !important;
}

.theme-material .pw-input:focus-visible {
  outline: none;
}

.m3-docs-tabs-bar.is-stuck .tabbed-navigation.liquid-glass-track {
  overflow-x: auto;
  overflow-y: hidden;
  background: transparent;
}

.article-tab-list .tabbed-navigation::-webkit-scrollbar,
.tabbed-navigation.liquid-glass-track::-webkit-scrollbar {
  display: none;
}

.tabbed-navigation-inner--tabs .tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
  letter-spacing: var(--md-sys-typescale-title-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  background: transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.tabbed-navigation-inner--tabs .tab:hover:not(.active) {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 6%, transparent);
  color: var(--md-sys-color-on-surface);
}

.tabbed-navigation-inner--tabs .tab.active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-surface);
}

.tabbed-navigation-inner--tabs .tab.active:hover {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-surface);
}

.tabbed-navigation-inner--tabs .tab:focus {
  outline: none;
}

.tabbed-navigation-inner--tabs .tab:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 1px;
}

.tabbed-navigation-inner--tabs .tab .google-symbols {
  font-family: 'Material Symbols Rounded';
  font-size: 18px;
  line-height: 1;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tabbed-navigation-inner--tabs .tab.active .google-symbols {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: var(--md-sys-color-on-surface);
}

.tabbed-navigation-inner--tabs .tab-label {
  line-height: 1;
}

/* Body content */
.m3-docs-body {
  max-width: 880px;
  margin: 0 auto;
  padding-top: 24px;
}

.cs-m3-docs .cs-chapter-heading {
  text-align: left;
  scroll-margin-top: 80px;
  margin: 48px 0 20px;
  padding-bottom: 0;
  border-bottom: none;
}

.cs-m3-docs .cs-snapshot + .cs-chapter-heading {
  margin-top: 40px;
}

.cs-m3-docs .cs-gallery + .cs-chapter-heading,
.cs-m3-docs .quote-block + .cs-chapter-heading,
.cs-m3-docs .block + .cs-chapter-heading {
  margin-top: 32px;
}

.cs-m3-docs .cs-chapter-num {
  display: block;
  margin-bottom: 8px;
}

.cs-m3-docs .cs-chapter-heading h3 {
  font-family: var(--md-ref-typeface-brand);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.cs-m3-docs .cs-chapter-sub {
  color: var(--md-sys-color-on-surface-variant);
  max-width: 52ch;
  margin: 8px 0 0;
}

.cs-m3-docs .cs-chapter-heading + .block,
.cs-m3-docs .cs-chapter-heading + .my-role-block {
  margin-top: 0;
}

.cs-m3-docs .block,
.cs-m3-docs.cs-apple-layout .block {
  margin-bottom: 36px;
}

.cs-m3-docs .block--intro {
  margin-bottom: 28px;
}

.cs-m3-docs .block--intro .block-label {
  margin-bottom: 10px;
}

.cs-m3-docs .block--intro p {
  margin: 0;
}

.cs-m3-docs .block--section-bridge {
  margin-bottom: 20px;
}

.cs-m3-docs .my-role-block,
.cs-m3-docs.cs-apple-layout .my-role-block {
  margin-top: 0;
  margin-bottom: 32px;
}

.cs-m3-docs .cs-gallery,
.cs-m3-docs.cs-apple-layout .cs-gallery:not(.cs-gallery-phone) {
  margin-top: 0;
  margin-bottom: 32px;
}

.cs-m3-docs .block:has(+ .cs-gallery) {
  margin-bottom: 12px;
}

.cs-m3-docs .insight-list,
.cs-m3-docs.cs-apple-layout .insight-list,
.cs-m3-docs .comparison-grid,
.cs-m3-docs.cs-apple-layout .comparison-grid,
.cs-m3-docs .callout,
.cs-m3-docs.cs-apple-layout .callout,
.cs-m3-docs .quote-block,
.cs-m3-docs.cs-apple-layout .quote-block,
.cs-m3-docs .solution-table,
.cs-m3-docs .governance-flow {
  margin-bottom: 36px;
}

.cs-m3-docs .quote-block {
  margin-top: 8px;
}

.cs-m3-docs .kh-carousel-block,
.cs-m3-docs.cs-apple-layout .kh-carousel-block {
  margin-top: 0;
  margin-bottom: 36px;
}

.cs-m3-docs .reflection-block,
.cs-m3-docs.cs-apple-layout .reflection-block {
  margin-bottom: 36px;
}

.cs-m3-docs .cs-ending,
.cs-m3-docs.cs-apple-layout .cs-ending {
  margin-top: 24px;
}

.cs-m3-docs .cs-snapshot,
.cs-m3-docs .cs-chapter-section,
.cs-m3-docs #staff-proof {
  scroll-margin-top: 140px;
}

.theme-material .case-study p,
.theme-material .case-study li,
.theme-material .block p {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
}

.theme-material .block-label {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: var(--md-sys-typescale-label-small-weight);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  text-transform: uppercase;
  color: var(--md-sys-color-primary);
}

.theme-material .cs-chapter-sub {
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}

.theme-material .nav-logo,
.theme-material .nav-back,
.theme-material .nav-links a {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
}

.theme-material .cs-expand-btn {
  font-family: var(--md-ref-typeface-plain);
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: var(--md-shape-full);
  min-height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
  border: none;
  box-shadow: none;
  text-transform: none;
}

.theme-material .cs-expand-btn:hover {
  background: #27272a;
  box-shadow: 0 6px 20px rgba(24, 24, 27, 0.18);
  transform: translateY(-1px);
  filter: none;
}

.theme-material .cs-expand-btn--secondary {
  background: rgba(55, 53, 47, 0.06);
  color: #37352f;
  border: none;
}

.theme-material .cs-expand-btn--secondary:hover {
  background: rgba(55, 53, 47, 0.1);
  color: #37352f;
}

.theme-material .tag {
  border-radius: var(--md-shape-sm);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  border: none;
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-surface-variant);
}

.theme-material .tag.accent {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}

/* Nav — site header only (not article tab nav) */
.theme-material body > nav.site-header,
.theme-material body > nav {
  background: transparent;
  backdrop-filter: none;
  border-bottom: none;
}

body.cs-m3-docs-page > nav.site-header,
body.cs-m3-docs-page > nav {
  display: none;
}

body.cs-m3-docs-page .case-study.standalone {
  padding-top: 0;
}

body.cs-m3-docs-page .scroll-progress {
  top: 0;
}

nav.article-tab-list {
  background: transparent;
  border: none;
  backdrop-filter: none;
  box-shadow: none;
}

body.cs-m3-docs-page nav.article-tab-list {
  position: static;
  top: auto;
  z-index: auto;
}

.m3-glass-shell-wrap.is-portal {
  z-index: 110;
  pointer-events: none;
}

.m3-glass-shell-wrap.is-portal > .liquid-glass-react-track,
.m3-glass-shell-wrap.is-portal > .liquid-glass-react-home {
  pointer-events: auto;
}

body.cs-m3-docs-page .sc-sticky {
  top: var(--m3-sticky-tabs-offset, 88px);
  height: calc(100vh - var(--m3-sticky-tabs-offset, 88px));
  z-index: 1;
}

.theme-material .hero h1,
.theme-material .hero-name {
  font-family: var(--md-ref-typeface-brand);
}

.theme-material .page-home .hero-name {
  font-family: var(--md-ref-typeface-plain);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-inline-start: -0.03em;
}

@media (max-width: 720px) {
  .theme-material .page-home .hero-name {
    font-size: 24px;
  }
}

.theme-material .hero-role {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
  color: var(--md-sys-color-on-surface);
}

.theme-material .hero--home .hero-subtitle {
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  color: var(--md-sys-color-on-surface-variant);
}

.theme-material .hero-stats li {
  background: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
  color: var(--md-sys-color-on-surface-variant);
  border-radius: var(--md-sys-shape-corner-full);
}

.theme-material .page-home .hero-nav a.hero-nav-resume {
  background: #2383e2;
  color: #fff;
}

.theme-material .page-home .hero-nav a.hero-nav-resume:hover,
.theme-material .page-home .hero-nav a.hero-nav-resume:focus-visible {
  background: #0075de;
  color: #fff;
}

.theme-material .hero-nav a {
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  color: var(--md-sys-color-on-surface-variant);
}

.theme-material .hero-nav a:hover {
  color: var(--md-sys-color-primary);
}

.theme-material .nav-links a.nav-resume,
.theme-material .nav-links a.nav-resume:visited,
.theme-material .nav-links a.nav-resume:hover,
.theme-material .nav-links a.nav-resume:focus-visible {
  color: #fff;
}

.theme-material .nav-links a.nav-resume,
.theme-material .nav-links a.nav-resume:visited {
  background: var(--ink);
}

.theme-material .nav-links a.nav-resume:hover,
.theme-material .nav-links a.nav-resume:focus-visible {
  background: #27272a;
}

.theme-material .hero-nav a.hero-nav-resume,
.theme-material .hero-nav a.hero-nav-resume:visited,
.theme-material .hero-nav a.hero-nav-resume:hover,
.theme-material .hero-nav a.hero-nav-resume:focus-visible {
  background: var(--ink);
  color: #fff;
}

.theme-material .hero-nav a.hero-nav-resume:hover,
.theme-material .hero-nav a.hero-nav-resume:focus-visible {
  background: #27272a;
  color: #fff;
}

.theme-material .comparison-card,
.theme-material .shipped-card,
.theme-material .kh-card,
.theme-material .cs-highlight-stage,
.theme-material .cs-system-flow,
.theme-material .cs-loop-diagram,
.theme-material .cs-collab-tile,
.theme-material .more-story,
.theme-material .cs-live-demo,
.theme-material .cs-live-demo--evidence {
  background: var(--md-sys-color-surface-container);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  box-shadow: none;
  color: var(--md-sys-color-on-surface-variant);
}

.theme-material .more-story-text .more-story-lead,
.theme-material .more-story-text strong {
  color: var(--md-sys-color-on-surface);
}

.theme-material .more-story-text span:not(.more-story-lead) {
  color: var(--md-sys-color-on-surface-variant);
}

.theme-material .more-story-badge {
  background: #fff;
  border: 1px solid #fff;
  color: var(--ink);
}

.theme-material .more-story-badge:hover {
  background: rgba(255, 255, 255, 0.92);
}

.theme-material .more-story-badge--ghost {
  background: transparent;
  border: 1.5px solid var(--md-outline-variant);
  color: var(--md-sys-color-on-surface);
}

.theme-material .more-story-badge--ghost:hover {
  background: var(--md-sys-color-surface-container-high);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-surface);
}

.theme-material .more-story-badge:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.theme-material .cs-highlight-pill.is-active,
.theme-material .cs-jump-btn.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.theme-material .cs-highlight-pill,
.theme-material .cs-jump-btn {
  border-radius: var(--md-shape-full);
}

.theme-material footer {
  background: #efefed;
  color: var(--ink-secondary);
}

.theme-material footer h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.theme-material .page-home footer,
.theme-material .page-home footer h2,
.theme-material .page-home footer p,
.theme-material .page-home footer .footer-inline-links,
.theme-material .page-home footer .footer-inline-links a,
.theme-material .page-home footer .footer-cta,
.theme-material .page-home footer .footer-note {
  font-family: 'Roboto', sans-serif;
}

.theme-material .page-home footer h2 {
  font-weight: 700;
  font-style: normal;
  letter-spacing: -0.04em;
  color: #37352f;
}

.theme-material footer p {
  color: var(--ink-secondary);
}

.theme-material footer .footer-inline-links {
  color: var(--ink-muted);
}

.theme-material footer .footer-inline-links a {
  color: var(--ink);
}

.theme-material footer .footer-inline-links a:hover {
  color: var(--accent);
}

.theme-material footer .footer-cta {
  border-radius: var(--md-shape-full);
  background: var(--ink);
  color: #fff;
}

.theme-material footer .footer-cta--secondary {
  background: rgba(55, 53, 47, 0.06);
  color: #37352f;
  border: none;
}

.theme-material footer .footer-cta--secondary:hover {
  background: rgba(55, 53, 47, 0.1);
  color: #37352f;
}

.theme-material footer .footer-note {
  color: var(--ink-muted);
}

.theme-material :focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

@media (max-width: 840px) {
  .m3-docs-hero-inner {
    grid-template-columns: 1fr;
  }
  .m3-docs-title {
    font-size: var(--md-sys-typescale-display-small-size);
    line-height: var(--md-sys-typescale-display-small-line-height);
  }
  .m3-docs-hero-visual {
    min-height: 240px;
    order: -1;
  }
  .m3-docs-visual-card {
    width: min(38%, 160px);
  }
  .m3-docs-visual-card.m3-docs-visual-card--zebra {
    width: 100%;
    max-width: none;
  }
  .m3-docs-visual-card--wide {
    width: min(78%, 300px);
  }
  .m3-docs-lede { max-width: none; }
}

@media (max-width: 640px) {
  .article-tab-list .tabbed-navigation {
    width: 100%;
  }
  .tabbed-navigation-inner--tabs .tab {
    min-width: 44px;
    padding: 10px 12px;
  }
  .tabbed-navigation-inner--tabs .tab-label {
    display: none;
  }
  .tabbed-navigation-inner--tabs .tab .google-symbols {
    font-size: 20px;
  }
}

/* ─── Case studies: homepage chrome (keep project accent colors) ─── */
body.cs-m3-docs-page {
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.06);
  --border: rgba(55, 53, 47, 0.08);
  --bg-card: #f9f9f8;
  --tag-bg: rgba(55, 53, 47, 0.06);
  --tag-text: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .cs-snapshot,
body.cs-m3-docs-page .cs-system-path,
body.cs-m3-docs-page .callout,
body.cs-m3-docs-page .my-role-block,
body.cs-m3-docs-page .reflection-block,
body.cs-m3-docs-page .cs-problem-stage,
body.cs-m3-docs-page .comparison-grid > *,
body.cs-m3-docs-page .insight-list,
body.cs-m3-docs-page .solution-table {
  background: #f9f9f8;
  border: none;
  border-radius: 12px;
  box-shadow: none;
}

body.cs-m3-docs-page .cs-snapshot,
body.cs-m3-docs-page .cs-system-path {
  padding: clamp(24px, 4vw, 36px);
}

body.cs-m3-docs-page .block.cs-system-path {
  margin-bottom: 16px;
}

body.cs-m3-docs-page .cs-system-path + .cs-chapter-heading {
  margin-top: 40px;
}

body.cs-m3-docs-page .cs-snapshot > .block-label,
body.cs-m3-docs-page .block-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(55, 53, 47, 0.45);
}

body.cs-m3-docs-page .m3-docs-eyebrow {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(55, 53, 47, 0.65);
}

body.cs-m3-docs-page .m3-docs-chips .tag,
body.cs-m3-docs-page .tag,
body.cs-m3-docs-page .chip {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1.2;
  padding: 4px 10px;
  border: none;
  background: rgba(55, 53, 47, 0.06);
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .tag.accent {
  background: rgba(55, 53, 47, 0.08);
  color: #37352f;
}

body.cs-m3-docs-page .m3-docs-visual-card,
body.cs-m3-docs-page .m3-docs-visual-card--wide {
  border-radius: 12px;
  border: none;
  box-shadow: 0 1px 2px rgba(15, 15, 15, 0.04), 0 8px 24px rgba(15, 15, 15, 0.06);
}

body.cs-m3-docs-page .m3-docs-visual-card img,
body.cs-m3-docs-page .m3-docs-visual-card--wide img {
  border-radius: 12px;
}

body.cs-m3-docs-page .cs-figure,
body.cs-m3-docs-page .cs-snapshot-gallery .cs-figure,
body.cs-m3-docs-page .cs-snapshot-proof .cs-figure {
  border-radius: 12px;
  overflow: hidden;
}

body.cs-m3-docs-page .cs-expand-btn:not(.cs-expand-btn--secondary) {
  font-weight: 500;
  letter-spacing: 0.01em;
}

body.cs-m3-docs-page .cs-expand-btn--secondary {
  background: rgba(55, 53, 47, 0.06);
  color: #37352f;
  border: none;
}

body.cs-m3-docs-page .cs-expand-btn--secondary:hover {
  background: rgba(55, 53, 47, 0.1);
  color: #37352f;
}

body.cs-m3-docs-page .m3-docs-hero-meta {
  border-top-color: rgba(55, 53, 47, 0.08);
}

body.cs-m3-docs-page .quote-block {
  background: #37352f;
  border-radius: 12px;
  border: none;
  box-shadow: none;
}

body.cs-m3-docs-page footer a.footer-cta--secondary {
  background: rgba(55, 53, 47, 0.06);
  border: none;
  color: #37352f;
}

body.cs-m3-docs-page footer a.footer-cta--secondary:hover {
  background: rgba(55, 53, 47, 0.1);
  border: none;
  color: #37352f;
}

/* Case-study chrome matches the homepage palette. Color only. */
body.cs-m3-docs-page {
  --accent: #1a56db;
  --md-sys-color-primary: #37352f;
  --md-sys-color-primary-container: #e4e2de;
  --md-sys-color-on-primary-container: #37352f;
  --md-sys-color-secondary-container: #e4e2de;
  --md-sys-color-tertiary-container: #e4e2de;
  --md-sys-color-surface-container: #e4e2de;
  --md-sys-color-surface-container-high: #e4e2de;
  --md-sys-color-surface-container-highest: #e4e2de;
  --md-sys-color-outline-variant: rgba(55, 53, 47, 0.16);
}

body.cs-m3-docs-page .case-study .m3-docs-lede,
body.cs-m3-docs-page .case-study .m3-docs-eyebrow,
body.cs-m3-docs-page .case-study .m3-docs-meta,
body.cs-m3-docs-page .case-study .m3-docs-meta-line,
body.cs-m3-docs-page .case-study .m3-docs-resources-label {
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .m3-docs-visual-bg,
body.cs-m3-docs-page .m3-docs-visual-bg.m3-docs-visual-bg--intake {
  background: #e4e2de;
  box-shadow: inset 0 0 0 1px rgba(55, 53, 47, 0.16);
}

body.cs-m3-docs-page .cs-figure,
body.cs-m3-docs-page .cs-snapshot-gallery .cs-figure,
body.cs-m3-docs-page .cs-snapshot-proof .cs-figure {
  background: #e4e2de;
  border-color: rgba(55, 53, 47, 0.16);
}

body.cs-m3-docs-page .cs-figure figcaption {
  background: #fff;
  border-top-color: rgba(55, 53, 47, 0.16);
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .article-tab-list .tabbed-navigation {
  background: #e4e2de;
}

body.cs-m3-docs-page .tabbed-navigation-inner--tabs .tab.active,
body.cs-m3-docs-page .tabbed-navigation-inner--tabs .tab.active:hover {
  background: #fff;
  color: #37352f;
}

body.cs-m3-docs-page .scroll-progress {
  background: #37352f;
}

body.cs-m3-docs-page :focus-visible {
  outline-color: #37352f;
}

body.cs-m3-docs-page footer {
  background: #fff;
  color: rgba(55, 53, 47, 0.55);
}

body.cs-m3-docs-page footer .footer-inline-links a {
  color: #37352f;
  text-decoration-color: rgba(55, 53, 47, 0.35);
}

body.cs-m3-docs-page footer .footer-inline-links a:hover {
  color: #1a56db;
  text-decoration-color: currentColor;
}

/* Type, spacing, frames, and footer — same voice as the homepage. */
body.cs-m3-docs-page,
body.cs-m3-docs-page .m3-docs-title,
body.cs-m3-docs-page .m3-docs-lede,
body.cs-m3-docs-page .m3-docs-eyebrow,
body.cs-m3-docs-page .case-study p,
body.cs-m3-docs-page .case-study li,
body.cs-m3-docs-page .cs-chapter-heading h3,
body.cs-m3-docs-page footer,
body.cs-m3-docs-page footer h2,
body.cs-m3-docs-page footer p {
  font-family: Roboto, sans-serif;
}

body.cs-m3-docs-page .m3-docs-hero {
  padding: 28px 0 0;
}

body.cs-m3-docs-page .m3-docs-hero-inner {
  gap: clamp(24px, 4vw, 48px);
  padding-bottom: 28px;
}

body.cs-m3-docs-page .m3-docs-hero-story {
  margin-bottom: 16px;
}

body.cs-m3-docs-page .m3-docs-eyebrow {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}

body.cs-m3-docs-page .m3-docs-title {
  margin: 0 0 10px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #37352f;
}

body.cs-m3-docs-page .case-study .m3-docs-lede {
  max-width: 36rem;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: #37352f;
}

body.cs-m3-docs-page .case-study .m3-docs-meta,
body.cs-m3-docs-page .case-study .m3-docs-meta-line,
body.cs-m3-docs-page .case-study .m3-docs-resources-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page .case-study .cs-chapter-heading h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

body.cs-m3-docs-page .case-study .block p,
body.cs-m3-docs-page .case-study .cs-snapshot-beat p,
body.cs-m3-docs-page .case-study li {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
}

body.cs-m3-docs-page .m3-docs-visual-card--wide {
  width: min(92%, 440px);
  background: transparent;
  border: none;
  box-shadow: none;
  overflow: visible;
}

body.cs-m3-docs-page .m3-docs-visual-card--wide img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 28px);
  max-height: 280px;
  margin: 14px auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 8px;
  border: 1px solid rgba(55, 53, 47, 0.16);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(55, 53, 47, 0.05),
    0 10px 24px rgba(55, 53, 47, 0.08);
}

body.cs-m3-docs-page .cs-figure > img {
  display: block;
  width: calc(100% - 28px);
  height: auto;
  max-width: calc(100% - 28px);
  margin: 14px auto;
  object-fit: contain;
  object-position: center center;
  border-radius: 8px;
  border: 1px solid rgba(55, 53, 47, 0.16);
  background: #fff;
  box-shadow:
    0 1px 2px rgba(55, 53, 47, 0.05),
    0 10px 24px rgba(55, 53, 47, 0.08);
}

body.cs-m3-docs-page .tabbed-navigation-inner--tabs .tab {
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

body.cs-m3-docs-page footer {
  padding: 20px 0 28px;
}

body.cs-m3-docs-page footer h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

body.cs-m3-docs-page footer p {
  font-size: 15px;
  line-height: 1.45;
  color: rgba(55, 53, 47, 0.72);
}

body.cs-m3-docs-page footer .footer-note {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(55, 53, 47, 0.55);
}

/* Notes page — one centered column. Does not affect other case studies. */
body.notes-page .case-study.cs-m3-docs .m3-docs-hero {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px 0 0;
}

body.notes-page .case-study.cs-m3-docs .m3-docs-hero-inner {
  display: block;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  gap: 0;
}

body.notes-page .m3-docs-hero-story {
  margin: 0;
}

body.notes-page .m3-docs-title {
  margin: 0;
  font-family: Roboto, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: #37352f;
}

body.notes-page .m3-docs-body {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding-top: 0;
}

body.notes-page .case-study.cs-m3-docs.cs-apple-layout .cs-chapter-heading {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  text-align: left;
  margin: 0;
  padding: 40px 0 0;
  border: none;
  border-top: 1px solid rgba(55, 53, 47, 0.16);
}

body.notes-page .case-study.cs-m3-docs.cs-apple-layout .m3-docs-body > .cs-chapter-heading:first-of-type {
  margin-top: 40px;
  padding-top: 0;
  border-top: none;
}

body.notes-page .case-study.cs-m3-docs.cs-apple-layout .cs-chapter-num {
  display: block;
  grid-column: auto;
  grid-row: auto;
  align-self: flex-start;
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(55, 53, 47, 0.72);
}

body.notes-page .case-study.cs-m3-docs.cs-apple-layout .cs-chapter-heading h3 {
  display: block;
  grid-column: auto;
  grid-row: auto;
  margin: 0;
  padding: 0;
  max-width: none;
  font-family: Roboto, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #37352f;
}

body.notes-page .cs-m3-docs .cs-chapter-heading + .block,
body.notes-page .cs-m3-docs.cs-apple-layout .block {
  margin: 14px 0 0;
  padding: 0 0 40px;
}

body.notes-page.cs-m3-docs-page .case-study .block p {
  max-width: none;
  font-family: Roboto, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  color: #37352f;
}

body.notes-page.cs-m3-docs-page .case-study .block p + p {
  margin-top: 12px;
}

body.notes-page .block > .cs-figure {
  width: 100%;
  max-width: none;
  margin: 20px 0 0;
  padding: 14px;
  box-sizing: border-box;
  background: #e4e2de;
  border: 1px solid rgba(55, 53, 47, 0.16);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}

body.notes-page .cs-figure > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  border-radius: 8px;
  border: 1px solid rgba(55, 53, 47, 0.16);
  background: #fff;
  box-shadow: 0 1px 2px rgba(55, 53, 47, 0.05), 0 10px 24px rgba(55, 53, 47, 0.08);
}

@media (max-width: 900px) {
  body.notes-page .m3-docs-title {
    font-size: 28px;
  }
}