.annotation-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); align-items: center; gap: clamp(3rem, 6vw, 6rem); padding-block: clamp(4rem, 7vw, 7rem); }
.annotation-hero h1 { font-size: clamp(3.8rem, 6.6vw, 7rem); line-height: .98; }
.annotation-hero .hero-lede { margin-bottom: 2rem; }
.annotation-hero .button, .annotation-cta .button { gap: 1.1rem; padding-block: 1rem; text-align: left; line-height: 1.5; }
.annotation-panel { padding: clamp(1.5rem, 3vw, 2.5rem); border: 1px solid var(--line-light); background: rgba(8,9,13,.12); box-shadow: 12px 12px 0 rgba(8,9,13,.09); }
.annotation-panel .eyebrow { color: var(--mist); }
.annotation-panel ol { margin: 0; padding: 0; list-style: none; }
.annotation-panel li { display: grid; grid-template-columns: 2rem 1fr; gap: .8rem; padding-block: 1.3rem; border-top: 1px solid var(--line-light); }
.annotation-panel li > span { padding-top: .4rem; color: #ffb5a8; font-family: var(--mono); font-size: var(--text-label); }
.annotation-panel strong { display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 400; }
.annotation-panel p:not(.eyebrow) { margin: .5rem 0 0; color: var(--mist); font-size: var(--text-body); line-height: 1.6; }
.annotation-section { padding-block: clamp(4rem, 7vw, 7rem); scroll-margin-top: 6rem; }
.annotation-heading { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: end; margin-bottom: 3rem; }
.annotation-heading .eyebrow, .annotation-delivery .eyebrow { color: var(--blue); }
.annotation-section h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(2.8rem, 4.5vw, 4.8rem); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; }
.annotation-heading > p { max-width: 38rem; margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.annotation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); }
.annotation-card { padding: clamp(1.4rem, 3vw, 2.5rem); border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.annotation-card h3 { margin: 2rem 0 1rem; font-family: var(--serif); font-size: 2rem; font-weight: 400; line-height: 1.1; }
.annotation-card > p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.7; }
.annotation-workflow { color: var(--white); background: var(--void); }
.annotation-workflow .eyebrow { color: #ffb5a8; }
.annotation-workflow .annotation-heading > p { color: var(--mist); }
.annotation-workflow ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.annotation-workflow li { padding-top: 1.5rem; border-top: 1px solid var(--line-light); }
.annotation-workflow li > span { color: #ffb5a8; font-family: var(--mono); font-size: var(--text-label); }
.annotation-workflow h3 { margin: 1.5rem 0 .8rem; font-family: var(--serif); font-size: 1.8rem; font-weight: 400; }
.annotation-workflow li p { margin-bottom: 0; color: var(--mist); font-size: var(--text-body); line-height: 1.7; }
.annotation-delivery { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 7vw, 7rem); }
.annotation-delivery h2 { margin-bottom: 1.5rem; }
.annotation-delivery p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.annotation-delivery dl { margin: 0; border-top: 1px solid var(--line-dark); }
.annotation-delivery dl > div { padding-block: 1.3rem; border-bottom: 1px solid var(--line-dark); }
.annotation-delivery dt { margin-bottom: .5rem; font-size: var(--text-body); font-weight: 700; }
.annotation-delivery dd { margin: 0; color: var(--muted); line-height: 1.65; }
.annotation-cta { padding-block: clamp(4rem, 8vw, 8rem); }
.annotation-related { display: flex; justify-content: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 2.5rem; }
.annotation-related a { font-size: var(--text-body); text-underline-offset: .3em; }
.annotation-page .footer-meta { flex-wrap: wrap; }
.annotation-page a:focus-visible, .annotation-page button:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
@media (max-width: 980px) {
  .annotation-hero { grid-template-columns: 1fr; }
  .annotation-hero h1 { max-width: 850px; }
  .annotation-panel { max-width: 680px; }
  .annotation-workflow ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 740px) {
  .annotation-hero h1 { font-size: clamp(3.3rem, 13vw, 5rem); }
  .annotation-heading, .annotation-delivery, .annotation-grid { grid-template-columns: 1fr; }
  .annotation-heading { gap: 1.5rem; }
  .annotation-panel { margin-right: 12px; }
  .annotation-card h3 { margin-top: 1.2rem; }
}
@media (max-width: 420px) {
  .annotation-workflow ol { grid-template-columns: 1fr; }
}