@font-face {
  font-family: 'Cormorant Garamond';
  src: url('./assets/cormorant-garamond-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('./assets/work-sans-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
:root {
  color-scheme: light;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Work Sans', Arial, sans-serif;
  --color-bg: #f7f5f3;
  --color-surface: #ffffff;
  --color-text: #2b2b2b;
  --color-muted: #54585a;
  --color-primary: #a30234;
  --color-primary-hover: #7b1832;
  --color-divider: rgb(43 43 43 / 14%);
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-base: 1rem;
  --text-xl: clamp(1.5rem, 1.1rem + .75vw, 1.75rem);
  --text-letter: clamp(2rem, 1.4rem + 1vw, 2.5rem);
  --text-hero: clamp(2.75rem, 1.5rem + 3.6vw, 4.5rem);
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-pill: 2rem;
}
.container { width: min(100% - var(--space-12), 70rem); margin-inline: auto; }
.skip-link { position: absolute; top: -6rem; left: var(--space-4); z-index: 3; background: var(--color-surface); padding: var(--space-3) var(--space-4); }
.skip-link:focus { top: var(--space-4); }
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-divider); }
.header-inner { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.identity { display: flex; align-items: center; gap: var(--space-3); }
.identity img { width: 46px; height: 46px; flex-shrink: 0; }
.doctor-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: 1.1; }
.credentials { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: .06em; }
.site-name { font-size: var(--text-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--color-muted); }
.review-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(var(--space-10), 7vw, var(--space-24)); padding-block: var(--space-16) var(--space-12); align-items: start; }
.eyebrow { color: var(--color-primary); font-size: var(--text-xs); font-weight: 600; letter-spacing: .17em; text-transform: uppercase; margin-bottom: var(--space-5); }
.invitation > .eyebrow { display: none; }
h1 { font: 500 var(--text-hero)/1.03 var(--font-display); letter-spacing: -.025em; overflow-wrap: anywhere; }
h1 span { color: var(--color-primary); }
.intro { max-width: 43ch; color: var(--color-muted); margin-top: var(--space-6); }
.review-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-6); min-height: 60px; padding: var(--space-4) var(--space-8); margin-top: var(--space-8); background: var(--color-primary); color: var(--color-surface); border-radius: var(--radius-pill); text-decoration: none; font-size: var(--text-base); font-weight: 500; transition: background-color 150ms ease; }
.review-button:hover { background: var(--color-primary-hover); }
.review-button:active { background: var(--color-text); }
.button-arrow { font-size: var(--text-xl); line-height: 1; font-family: var(--font-body); }
.action-note { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-muted); }
.destination { margin-top: var(--space-8); }
.destination-label { font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-2); }
.practice-name { font-size: var(--text-base); font-weight: 500; line-height: 1.5; }
.practice-note { max-width: 44ch; font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-2); }
.thank-you { background: var(--color-surface); padding: var(--space-10); overflow-wrap: anywhere; }
.thank-you .eyebrow { margin-bottom: var(--space-4); }
.thank-you h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-letter); margin-bottom: var(--space-5); }
.thank-you > p:not(.eyebrow) { font-size: var(--text-sm); color: var(--color-muted); line-height: 1.8; }
.thank-you > p + p:not(.eyebrow) { margin-top: var(--space-4); }
.signoff { margin-top: var(--space-6); }
.signoff-label { font-size: var(--text-xs); color: var(--color-muted); }
.signature { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; color: var(--color-primary); margin-block: var(--space-1) var(--space-2); }
.signoff-role { font-size: var(--text-xs); line-height: 1.7; color: var(--color-muted); }
.writing-note { border-top: 1px solid var(--color-divider); padding-top: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-8); }
.writing-note h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; }
.writing-note p { font-size: var(--text-sm); color: var(--color-muted); }
.writing-note .privacy-note { margin-top: var(--space-3); }
.link-help { margin-top: var(--space-4); font-size: var(--text-xs); color: var(--color-muted); max-width: 35rem; }
.link-help summary { cursor: pointer; width: fit-content; min-height: 44px; align-content: center; }
.link-help summary:hover, .link-help summary:active { color: var(--color-primary); }
.link-help-body { padding-block: var(--space-2) var(--space-4); }
.review-address { overflow-wrap: anywhere; user-select: all; font-size: var(--text-sm); margin-block: var(--space-2); color: var(--color-text); }
.copy-button { display: block; min-height: 44px; background: transparent; border: 1px solid var(--color-divider); padding: var(--space-2) var(--space-4); font-size: var(--text-xs); border-radius: var(--space-1); }
.copy-button:hover, .copy-button:active { border-color: var(--color-primary); color: var(--color-primary); }
.copy-status:not(:empty) { margin-top: var(--space-2); }
.site-footer { border-top: 1px solid var(--color-divider); margin-top: var(--space-6); padding-block: var(--space-4) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: var(--color-muted); font-size: var(--text-xs); }
.site-footer a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; text-decoration: none; }
.site-footer a:hover, .site-footer a:active { color: var(--color-primary); text-decoration: underline; }
@media (max-width: 760px) {
  .header-inner { min-height: 88px; }
  .site-name { display: none; }
  .review-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-8); }
  .invitation > .eyebrow { display: block; margin-bottom: var(--space-4); font-size: var(--text-xs); letter-spacing: .1em; }
  .intro { margin-top: var(--space-5); }
  .review-button { width: 100%; gap: var(--space-4); padding-inline: var(--space-5); margin-top: var(--space-6); }
  .action-note { text-align: center; font-size: var(--text-xs); }
  .destination { margin-top: var(--space-6); }
  .desktop-break { display: none; }
  .thank-you { padding: var(--space-8); }
  .thank-you h2 br { display: none; }
  .writing-note { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .site-footer { flex-wrap: wrap; gap: var(--space-2); }
}
@media (max-width: 360px) {
  .container { width: calc(100% - var(--space-8)); }
  .thank-you { padding: var(--space-6); }
  .review-button { gap: var(--space-2); padding-inline: var(--space-4); }
}
