/* Components consume semantic tokens from tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }
body { margin: 0; color: var(--md-ink); background: var(--md-surface); font-family: var(--md-font-body); font-size: var(--md-type-base); line-height: 1.6; -webkit-font-smoothing: antialiased; }
::selection { background: var(--md-color-blue); color: var(--md-color-navy); }
a { color: inherit; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--md-focus); outline-offset: 3px; }
img, svg { max-width: 100%; }
h1,h2,h3,h4,p { margin-top: 0; }
.md-container { max-width: var(--md-container); width: 100%; margin-inline: auto; padding-inline: var(--md-page-gutter); }
.md-section { padding-block: var(--md-section-space); }
.md-section--bordered { border-top: var(--md-border); }
.md-eyebrow { font-size: var(--md-type-xs); font-weight: 750; line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; }
.md-display { font-family: var(--md-font-display); font-size: var(--md-type-h1); font-weight: 450; letter-spacing: -.052em; line-height: .99; }
.md-heading-2 { font-family: var(--md-font-display); font-size: var(--md-type-h2); font-weight: 450; letter-spacing: -.035em; line-height: 1.03; }
.md-heading-3 { font-family: var(--md-font-display); font-size: var(--md-type-h3); font-weight: 450; letter-spacing: -.023em; line-height: 1.14; }
.md-heading-4 { font-family: var(--md-font-body); font-size: var(--md-type-h4); font-weight: 650; letter-spacing: -.03em; line-height: 1.23; }
.md-lede { font-size: var(--md-type-lg); line-height: 1.58; max-width: 55ch; }
.md-muted { color: var(--md-ink-muted); }
.md-label { font-size: var(--md-type-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .12em; }
.md-small { font-size: var(--md-type-sm); }
.md-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.md-divider { border: 0; border-top: var(--md-border); margin: 0; }
.md-header { position: sticky; z-index: 40; top: 0; background: var(--md-color-navy); color: var(--md-color-cream); border-bottom: 1px solid rgb(252 246 233 / 12%); }
.md-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 76px; }
.md-lockup { display: flex; align-items: center; gap: .9rem; text-decoration: none; white-space: nowrap; }
.md-mark { display: grid; place-items: center; font-family: var(--md-font-display); color: var(--md-color-navy); background: var(--md-color-cream); width: 42px; height: 42px; font-size: 1.34rem; line-height: 1; letter-spacing: -.08em; }
.md-lockup__wordmark { font-weight: 750; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase; }
.md-lockup__sub { display: block; font-size: .62rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; color: var(--md-color-blue); }
.md-nav { display: flex; gap: clamp(.8rem, 1.8vw, 2rem); align-items: center; }
.md-nav a { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--md-color-cream); opacity: .77; text-decoration: none; transition: opacity var(--md-speed); }
.md-nav a:is(:hover,:focus-visible), .md-nav a[aria-current='true'] { opacity: 1; }
.md-mobile-nav { display: none; position: relative; margin-left: auto; }
.md-mobile-nav summary { display: flex; align-items: center; gap: .55rem; list-style: none; cursor: pointer; border: 1px solid rgb(252 246 233 / 35%); padding: .5rem .85rem; border-radius: var(--md-radius-sm); color: var(--md-color-cream); font-size: .78rem; font-weight: 750; }
.md-mobile-nav summary::-webkit-details-marker { display: none; }
.md-mobile-nav[open] nav { position: absolute; right: 0; top: calc(100% + .9rem); display: grid; width: min(290px, 80vw); padding: .5rem; background: var(--md-color-navy); color: var(--md-color-cream); border: 1px solid rgb(252 246 233 / 25%); border-radius: var(--md-radius-md); box-shadow: var(--md-shadow-soft); }
.md-mobile-nav nav a { color: var(--md-color-cream); padding: .75rem 1rem; text-decoration: none; font-size: .84rem; border-radius: var(--md-radius-sm); }
.md-mobile-nav nav a:hover, .md-mobile-nav nav a:focus-visible { background: var(--md-color-navy-teal); }
.md-version { font-size: .69rem; font-weight: 750; letter-spacing: .1em; color: var(--md-color-cream); border: 1px solid rgb(252 246 233 / 26%); padding: .5rem .68rem; border-radius: var(--md-radius-pill); white-space: nowrap; }
.md-hero { position: relative; min-height: 610px; overflow: hidden; padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 10vw, 8rem); }
.md-hero__stack { position: relative; z-index: 1; }
.md-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-bottom: 2.35rem; }
.md-hero__line { display: block; height: 1px; width: 42px; background: var(--md-accent); }
.md-hero h1 { max-width: 13ch; margin-bottom: 2rem; }
.md-hero h1 em { color: var(--md-accent); font-weight: 450; }
.md-hero__bottom { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: end; gap: 2.5rem; max-width: 1050px; }
.md-hero__bottom p { margin-bottom: 0; }
.md-hero__meta { justify-self: end; border-left: 2px solid var(--md-accent); padding-left: 1.2rem; font-size: var(--md-type-sm); max-width: 250px; }
.md-hero__meta b { display: block; font-size: var(--md-type-base); }
.md-ruleline { background: var(--md-color-navy); color: var(--md-color-cream); }
.md-ruleline__inner { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; min-height: 58px; }
.md-ruleline .md-eyebrow { margin: 0; }
.md-ruleline__text { color: var(--md-color-blue); font-size: var(--md-type-sm); }
.md-section-head { display: grid; grid-template-columns: minmax(0, .38fr) minmax(0, 1fr); align-items: start; gap: 2rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.md-section-head h2 { margin-bottom: 1rem; }
.md-section-head p { margin-bottom: 0; }
.md-section-index { display: inline-flex; align-items: center; gap: .75rem; padding-top: .4rem; }
.md-section-index::before { content: ''; width: 7px; height: 7px; background: var(--md-accent); border-radius: 50%; }
.md-grid { display: grid; gap: var(--md-grid-gap); }
.md-grid > *, .md-layout-panel { min-width: 0; }
.md-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.md-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.md-swatches { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--md-grid-gap); }
.md-swatch { min-width: 0; background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-md); overflow: hidden; }
.md-swatch__color { height: 142px; position: relative; }
.md-swatch__color:after { content: ''; position: absolute; inset: 0; border-bottom: 1px solid rgb(1 35 63 / 7%); }
.md-swatch__body { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: 1.1rem; }
.md-swatch__name { font-weight: 700; line-height: 1.3; }
.md-swatch__detail { margin-top: .25rem; color: var(--md-ink-muted); font-size: .79rem; }
.md-copy { flex: 0 0 auto; border: var(--md-border); color: var(--md-ink); background: var(--md-color-cream); padding: .35rem .5rem; border-radius: var(--md-radius-sm); font-size: .69rem; font-weight: 800; letter-spacing: .04em; }
.md-copy:hover { border-color: var(--md-ink); }
.md-note { display: flex; gap: 1rem; align-items: flex-start; padding: 1.35rem 1.5rem; background: color-mix(in srgb, var(--md-color-blue) 16%, var(--md-color-cream)); border-left: 3px solid var(--md-color-navy-teal); border-radius: 0 var(--md-radius-sm) var(--md-radius-sm) 0; }
.md-note__symbol { font-family: var(--md-font-display); font-size: 1.4rem; line-height: 1.1; }
.md-note p { margin: 0; font-size: var(--md-type-sm); }
.md-block-top { margin-top: 2.5rem; }
.md-typography-sample { padding: 2rem 0; border-bottom: var(--md-border); display: grid; grid-template-columns: 190px 1fr; gap: 2rem; align-items: start; }
.md-typography-sample:first-child { border-top: var(--md-border); }
.md-typography-sample__meta { font-size: var(--md-type-xs); line-height: 1.7; color: var(--md-ink-muted); }
.md-typography-sample__meta b { color: var(--md-ink); display: block; margin-bottom: .3rem; }
.md-typography-sample__example { margin: 0; }
.md-typography-sample--h1 .md-typography-sample__example { font-family: var(--md-font-display); font-size: clamp(3rem, 5vw, 5.6rem); line-height: 1; letter-spacing: -.05em; }
.md-typography-sample--h2 .md-typography-sample__example { font-family: var(--md-font-display); font-size: clamp(2.4rem, 4vw, 4.5rem); line-height: 1.1; letter-spacing: -.04em; }
.md-typography-sample--h3 .md-typography-sample__example { font-weight: 650; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.25; letter-spacing: -.03em; }
.md-typography-sample--body .md-typography-sample__example { font-size: 1.05rem; max-width: 70ch; }
.md-typography-sample--label .md-typography-sample__example { font-size: .76rem; letter-spacing: .15em; font-weight: 800; text-transform: uppercase; }
.md-grid-demo { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: .35rem; height: 100px; }
.md-grid-demo div { background: color-mix(in srgb, var(--md-color-blue) 33%, var(--md-color-cream)); border: 1px solid color-mix(in srgb, var(--md-color-navy) 15%, transparent); border-radius: .25rem; display: flex; align-items: end; justify-content: center; padding-bottom: .65rem; font-size: .7rem; font-weight: 750; color: var(--md-color-navy-teal); }
.md-layout-panel { background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-md); padding: clamp(1.2rem,3vw,2.2rem); }
.md-layout-caption { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; justify-content: space-between; color: var(--md-ink-muted); font-size: var(--md-type-sm); margin-top: 1.3rem; }
.md-tokens { display: flex; min-width:0; max-width:100%; gap: .9rem; align-items: end; overflow-x: auto; padding-bottom: .7rem; }
.md-token { min-width: 63px; text-align: center; font-size: .7rem; }
.md-token__bar { background: var(--md-color-navy-teal); margin: 0 auto .8rem; width: 100%; max-width: 72px; border-radius: .2rem .2rem 0 0; }
.md-token b, .md-token span { display: block; }
.md-token span { color: var(--md-ink-muted); }
.md-component-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.md-button { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; padding: .85rem 1.3rem; border: 1px solid transparent; border-radius: var(--md-radius-sm); font-size: .84rem; font-weight: 750; text-decoration: none; line-height: 1.25; transition: transform var(--md-speed) var(--md-ease), background var(--md-speed), color var(--md-speed), border-color var(--md-speed); }
.md-button:is(:hover,:focus-visible) { transform: translateY(-2px); }
.md-button--primary { background: var(--md-interactive); color: var(--md-ink-inverse); }
.md-button--primary:hover { background: var(--md-color-navy-teal); }
.md-button--accent { background: var(--md-accent); color: #fff; }
.md-button--accent:hover { background: color-mix(in srgb, var(--md-accent) 82%, var(--md-color-navy)); }
.md-button--outline { color: var(--md-ink); background: transparent; border-color: var(--md-ink); }
.md-button--outline:hover { color: var(--md-ink-inverse); background: var(--md-ink); }
.md-button--text { border: none; padding-inline: .25rem; color: var(--md-ink); text-decoration: underline; text-underline-offset: .35em; }
.md-button:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.md-badge { display: inline-block; color: var(--md-color-navy); background: color-mix(in srgb, var(--md-color-blue) 25%, var(--md-color-cream)); border: 1px solid color-mix(in srgb, var(--md-color-navy) 12%, transparent); border-radius: var(--md-radius-pill); padding: .3rem .65rem; font-size: .72rem; font-weight: 750; }
.md-badge--red { color: var(--md-accent); background: color-mix(in srgb, var(--md-accent) 8%, var(--md-color-cream)); border-color: color-mix(in srgb, var(--md-accent) 28%, transparent); }
.md-card { display: flex; flex-direction: column; min-height: 260px; background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-md); overflow: hidden; }
.md-card__top { min-height: 122px; padding: 1.35rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; background: var(--md-color-navy); color: var(--md-color-cream); }
.md-card__top--light { background: var(--md-color-peach); color: var(--md-color-navy); }
.md-card__top--blue { background: var(--md-color-navy-teal); }
.md-card__index { font-family: var(--md-font-display); font-size: 3.3rem; line-height: 1; letter-spacing: -.06em; }
.md-card__body { padding: 1.5rem; flex: 1; }
.md-card__body h3 { font-size: 1.2rem; letter-spacing: -.03em; line-height: 1.3; margin-bottom: .6rem; }
.md-card__body p { font-size: .9rem; color: var(--md-ink-muted); margin: 0; }
.md-card__foot { padding: 0 1.5rem 1.5rem; font-weight: 750; font-size: .83rem; }
.md-card__foot a { text-underline-offset: .3em; }
.md-form { background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-md); padding: 2rem; }
.md-field { margin-bottom: 1.2rem; }
.md-field label { display: block; font-weight: 700; font-size: .82rem; margin-bottom: .5rem; }
.md-field :is(input,textarea,select) { display: block; width: 100%; padding: .88rem 1rem; min-height: 48px; background: var(--md-color-white); border: 1px solid var(--md-outline-strong); border-radius: var(--md-radius-sm); color: var(--md-ink); }
.md-field textarea { min-height: 122px; resize: vertical; }
.md-field :is(input,textarea,select):focus { border-color: var(--md-color-navy-teal); }
.md-field__hint { color: var(--md-ink-muted); font-size: .75rem; margin: .35rem 0 0; }
.md-proof { background: var(--md-color-navy); color: var(--md-color-cream); padding: clamp(2rem, 4vw, 3.5rem); border-radius: var(--md-radius-lg); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 2rem; align-items: center; }
.md-proof h3 { font-family: var(--md-font-display); font-size: clamp(2.4rem, 4vw, 4.3rem); font-weight: 450; line-height: 1.05; letter-spacing: -.04em; margin-bottom: 1.2rem; }
.md-proof p { color: var(--md-color-blue); margin-bottom: 0; max-width: 46ch; }
.md-proof__stats { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; }
.md-proof__stat strong { display: block; font-size: clamp(2rem,3.4vw,3.3rem); letter-spacing: -.055em; line-height: 1.1; }
.md-proof__stat span { display: block; color: var(--md-color-blue); font-size: .76rem; margin-top: .6rem; }
.md-preview { background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-lg); overflow: hidden; box-shadow: var(--md-shadow-soft); }
.md-preview__bar { border-bottom: var(--md-border); display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.25rem; }
.md-preview__dots { display: flex; gap: 6px; }
.md-preview__dots i { width: 7px; height: 7px; background: var(--md-color-peach); border: 1px solid var(--md-outline); border-radius: 50%; }
.md-preview__content { padding: clamp(2rem,6vw,5.5rem); }
.md-preview__content h3 { font-family: var(--md-font-display); font-size: clamp(2.75rem, 5.4vw, 6.1rem); font-weight: 450; line-height: 1; letter-spacing: -.05em; max-width: 12ch; margin: 1.4rem 0; }
.md-preview__content p { max-width: 50ch; }
.md-preview__footer { display: flex; justify-content: space-between; border-top: var(--md-border); padding: 1.2rem 1.5rem; color: var(--md-ink-muted); font-size: .78rem; gap: 1rem; }
.md-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border: var(--md-border); border-radius: var(--md-radius-md); overflow: hidden; }
.md-step { padding: 1.6rem; background: var(--md-surface-raised); border-right: var(--md-border); }
.md-step:last-child { border-right: 0; }
.md-step .md-label { color: var(--md-accent); }
.md-step h3 { margin: 1.3rem 0 .65rem; font-size: 1.1rem; line-height: 1.3; letter-spacing: -.02em; }
.md-step p { color: var(--md-ink-muted); font-size: .87rem; margin: 0; }
.md-footer { padding: 4rem 0 2rem; background: var(--md-color-navy); color: var(--md-color-cream); }
.md-footer__main { display: flex; justify-content: space-between; gap: 1rem; align-items: end; padding-bottom: 4rem; }
.md-footer__main p { font-size: .9rem; color: var(--md-color-blue); max-width: 35ch; }
.md-footer__main h2 { margin-bottom: 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1; font-weight: 450; font-family: var(--md-font-display); letter-spacing: -.05em; }
.md-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border-top: 1px solid rgb(252 246 233 / 20%); padding-top: 1.3rem; font-size: .78rem; color: var(--md-color-blue); }
.md-footer a { text-underline-offset: .3em; }
.md-toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; padding: .8rem 1.2rem; background: var(--md-color-navy); color: var(--md-color-cream); box-shadow: 0 8px 30px #01233f29; border-radius: var(--md-radius-sm); transform: translateY(200%); transition: transform 200ms; pointer-events: none; font-size: .85rem; }
.md-toast[data-show='true'] { transform: translateY(0); }
.md-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.md-sr-only:focus { position: fixed; z-index: 200; top: .5rem; left: .5rem; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; padding: .6rem 1rem; color: var(--md-color-navy); background: var(--md-color-cream); }
@media (max-width: 1260px) {
  .md-nav { display: none; }
  .md-mobile-nav { display: block; }
}
@media (max-width: 1000px) {
  .md-swatches { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .md-grid--4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .md-header__inner { min-height: 67px; }
  .md-lockup__sub { display: none; }
  .md-version { display: none; }
  .md-hero { min-height: auto; }
  .md-hero__bottom, .md-section-head, .md-proof { grid-template-columns: 1fr; }
  .md-hero__meta { justify-self: start; }
  .md-swatches, .md-grid--2, .md-grid--3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .md-typography-sample { grid-template-columns: 1fr; gap: .65rem; padding: 1.5rem 0; }
  .md-steps { grid-template-columns: 1fr; }
  .md-step { border-right: none; border-bottom: var(--md-border); }
  .md-step:last-child { border-bottom: 0; }
  .md-footer__main { align-items: start; flex-direction: column; }
}
@media (max-width: 480px) {
  .md-swatches, .md-grid--2, .md-grid--3, .md-grid--4 { grid-template-columns: 1fr; }
  .md-swatch__color { height: 100px; }
  .md-proof__stats { gap: 1rem; }
  .md-preview__footer { flex-direction: column; }
  .md-ruleline__text { display: none; }
  .md-form { padding: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}


/* v0.2 | WCAG-tested color ramp specimen */
.md-ramp-reference { margin-top: clamp(3rem,6vw,5rem); border-top: var(--md-border); padding-top: clamp(2rem,4vw,3rem); }
.md-ramp-reference__heading { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.8fr); align-items: end; gap: 2rem; }
.md-ramp-reference__heading h3 { margin: .55rem 0 0; }
.md-ramp-reference__heading p { margin-bottom: 0; max-width: 56ch; }
.md-ramp-legend { display: flex; gap: .6rem 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; font-size: .79rem; }
.md-ramp-legend span { border-left: 2px solid var(--md-outline-strong); padding-left: .65rem; }
.md-ramp-legend strong { color: var(--md-color-navy); }
.md-ramp-guidance { max-width: 90ch; margin: 1.3rem 0 0; color: var(--md-ink-muted); font-size: .86rem; }
.md-ramp-group { margin-top: clamp(2.25rem,4vw,3.25rem); }
.md-ramp-group__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; border-bottom: var(--md-border); padding-bottom: .9rem; margin-bottom: 1rem; }
.md-ramp-group__head h4 { margin: 0; font-family: var(--md-font-display); font-size: clamp(1.65rem,2.6vw,2.4rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
.md-ramp-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .75rem; }
.md-ramp-swatch { min-width: 0; background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-sm); overflow: hidden; }
.md-ramp-swatch__color { min-height: 121px; padding: .85rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; }
.md-ramp-swatch__color strong { display: block; font-family: var(--md-font-display); font-weight: 500; font-size: 2.4rem; line-height: 1; }
.md-ramp-swatch__number { font-size: .71rem; font-weight: 700; letter-spacing: .04em; }
.md-ramp-swatch__ink { font-size: .66rem; font-weight: 700; line-height: 1.4; }
.md-ramp-swatch__data { padding: .8rem .75rem 1rem; }
.md-ramp-swatch__hex { display: flex; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .8rem; }
.md-ramp-swatch__hex code { color: var(--md-ink); font-size: .72rem; font-weight: 700; }
.md-ramp-swatch__hex .md-copy { font-size: .65rem; }
.md-ramp-swatch__pair { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .15rem .35rem; padding: .4rem 0; border-top: var(--md-border); font-size: .69rem; }
.md-ramp-swatch__pair > span { color: var(--md-ink-muted); }
.md-ramp-swatch__pair > strong { font-size: .69rem; color: var(--md-ink); }
.md-contrast-status { grid-column: 1 / -1; font-size: .64rem; font-weight: 700; }
.md-contrast-status--pass { color: #19513f; }
.md-contrast-status--large { color: #845613; }
.md-contrast-status--fail { color: #a12a30; }

/* v0.2 | Practical content/component contracts */
.md-case-study { background: var(--md-surface-raised); border: var(--md-border); border-radius: var(--md-radius-lg); overflow: hidden; }
.md-case-study__intro { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 1rem; border-bottom: var(--md-border); padding: 1rem clamp(1.4rem,3vw,2.5rem); }
.md-case-study__grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(2rem,4vw,4rem); padding: clamp(1.5rem,4vw,3rem); }
.md-case-study h3 { max-width: 15ch; font-family: var(--md-font-display); font-size: clamp(2.5rem,4vw,4.5rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.03; }
.md-case-study .md-button { margin-top: .7rem; }
.md-case-study__details { margin: 0; }
.md-case-study__details > div { border-top: var(--md-border); padding: .8rem 0 .9rem; }
.md-case-study__details dt { color: var(--md-ink-muted); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.md-case-study__details dd { margin: .4rem 0 0; line-height: 1.45; font-size: .9rem; }
.md-case-study__foot { margin: 0; padding: 1rem clamp(1.5rem,4vw,3rem); border-top: var(--md-border); font-size: .8rem; color: var(--md-ink-muted); }
.md-component-contract h3 { margin: .7rem 0 1.5rem; }
.md-component-contract__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--md-grid-gap); }
.md-component-contract__grid > div { border-top: var(--md-border); padding-top: 1rem; }
.md-component-contract__grid strong { font-size: .9rem; }
.md-component-contract__grid p { color: var(--md-ink-muted); margin: .5rem 0 0; font-size: .86rem; line-height: 1.6; }
.md-component-contract__grid code { overflow-wrap: anywhere; }
@media (max-width: 1100px) {
  .md-ramp-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .md-ramp-reference__heading,.md-case-study__grid { grid-template-columns: 1fr; }
  .md-ramp-grid,.md-component-contract__grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .md-ramp-grid,.md-component-contract__grid { grid-template-columns: 1fr; }
}