/* Open Letter.dc.html
   Generated. Every declaration is copied from the design file, and
   hover and focus come from its style-hover / style-focus attributes.
   Do not hand-edit: re-run the build.
*/

.ol-1 { font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif; color:#16181C; line-height:1.6 }
.ol-2 { background:#15171B; color:#E9EAEC; padding:0 clamp(24px,5vw,72px) }
.ol-3 { padding:88px 0; display:flex; flex-direction:column; gap:28px; max-width:40ch; margin-left:auto; margin-right:auto; align-items:center; text-align:center }
.ol-4 { font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#E8622E }
.ol-5 { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(38px,4.6vw,62px); letter-spacing:-.026em; line-height:1.06; margin:0; color:#fff }
.ol-6 { margin:0; font-size:18.5px; line-height:1.65; color:#A9AEB6; max-width:46ch; text-wrap:pretty }
.ol-7 { display:flex; align-items:center; gap:18px; padding-top:18px; border-top:1px solid #262A31 }
.ol-8 { width:54px; height:54px; flex:none }
/* x2 */
.ol-9 { display:flex; flex-direction:column; gap:1px }
.ol-10 { font-size:15.5px; font-weight:600; color:#E9EAEC }
/* x2 */
.ol-11 { font-size:14px; color:#7C838C }
.ol-12 { background:#FAFAF9; padding:80px clamp(24px,5vw,72px) 92px }
.ol-13 { max-width:66ch; margin:0 auto; display:flex; flex-direction:column; gap:44px }
.ol-14 { display:flex; flex-direction:column; gap:20px }
/* x7 */
.ol-15 { font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:clamp(26px,2.8vw,34px); letter-spacing:-.018em; line-height:1.18; margin:0; text-wrap:pretty }
/* x5 */
.ol-16 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:24px; font-weight:500; letter-spacing:-.012em; line-height:1.42; color:#16181C; text-wrap:pretty }
/* x19 */
.ol-17 { margin:0; font-size:18px; line-height:1.75; color:#3F444B; text-wrap:pretty }
/* x5 */
.ol-18 { display:flex; flex-direction:column; gap:20px; padding-top:40px; border-top:1px solid #E2E2DE }
.ol-19 { margin:0; font-size:18px; line-height:1.75; color:#5C6169 }
/* x2 */
.ol-20 { font-weight:600; color:#16181C }
/* x3 */
.ol-21 { display:flex; flex-direction:column; gap:1px; background:#E2E2DE; border-top:1px solid #E2E2DE; border-bottom:1px solid #E2E2DE }
.ol-22 { background:#FAFAF9; padding:16px 0; display:flex; gap:16px; align-items:baseline }
/* x2 */
.ol-23 { font-family:ui-monospace,monospace; font-size:11px; color:#E8622E; flex:none }
/* x2 */
.ol-24 { font-size:17px; color:#3F444B; line-height:1.6; text-wrap:pretty }
.ol-25 { display:flex; flex-direction:column; gap:24px; padding-top:40px; border-top:1px solid #E2E2DE }
.ol-26 { display:flex; flex-direction:column; gap:1px; background:#E2E2DE; border:1px solid #E2E2DE }
.ol-27 { background:#fff; padding:24px 26px; display:flex; flex-direction:column; gap:8px }
.ol-28 { display:flex; align-items:baseline; gap:14px }
.ol-29 { font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.14em; color:#E8622E }
.ol-30 { font-family:'Newsreader',Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.012em; color:#16181C }
.ol-31 { font-size:16px; color:#5C6169; line-height:1.65; text-wrap:pretty }
/* x2 */
.ol-32 { background:#FAFAF9; padding:14px 0; display:flex; gap:16px; align-items:baseline }
.ol-33 { font-family:ui-monospace,monospace; font-size:11px; color:#8B9199; flex:none }
.ol-34 { font-size:17px; color:#5C6169; line-height:1.6; text-wrap:pretty }
.ol-35 { display:flex; align-items:center; gap:18px; padding-top:40px; border-top:1px solid #E2E2DE }
.ol-36 { width:48px; height:48px; flex:none }
.ol-37 { font-family:'Newsreader',Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.014em; color:#16181C }
.ol-38 { font-size:14.5px; color:#5C6169 }
.ol-39 { display:flex; gap:26px; flex-wrap:wrap; align-items:center }
.ol-40 { font-size:15px; font-weight:600; color:#E8622E; border-bottom:1px solid #F2C8B6; padding-bottom:3px }
.ol-40:hover { color:#C9501F; border-bottom-color:#E8622E }
.ol-40:focus-visible { outline:2px solid #E8622E; outline-offset:3px }
.ol-41 { font-size:15px; color:#5C6169; border-bottom:1px solid #DDDDD8; padding-bottom:3px }
.ol-41:hover { color:#16181C; border-bottom-color:#B9BEC5 }
.ol-41:focus-visible { outline:2px solid #E8622E; outline-offset:3px }
.ol-42 { background:#15171B; color:#E9EAEC; padding:92px clamp(24px,5vw,72px); display:flex; justify-content:space-between; align-items:flex-end; column-gap:60px; row-gap:34px; flex-wrap:wrap }
.ol-43 { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(34px,4vw,54px); letter-spacing:-.024em; line-height:1.06; margin:0; max-width:14ch; color:#fff }
.ol-44 { display:flex; flex-direction:column; gap:18px; align-items:flex-start }
.ol-45 { margin:0; font-size:16.5px; color:#A9AEB6; max-width:40ch }
.ol-46 {  display:flex; align-items:stretch; column-gap:8px; row-gap:12px; flex-wrap:wrap; width:100%; max-width:460px  }
.ol-47 {  display:flex; align-items:center; background:#1B1E23; border:1px solid #2A2F36; border-radius:5px; padding:0 16px; flex:1 1 100%; min-width:0  }
.ol-48 { font-size:15.5px; color:#5E656E; flex:none }
.ol-49 { background:transparent; border:0; outline:none; color:#E9EAEC; font-family:inherit; font-size:15.5px; padding:14px 0 14px 6px; width:100% }
.ol-47:has(:focus-visible) { border-color: #E8622E }
.ol-49:focus-visible { outline: none }
.ol-50 { display:flex; align-items:center; justify-content:center; background:#E8622E; color:#15171B; font-size:15px; font-weight:700; padding:14px 26px; border-radius:5px; white-space:nowrap; flex:1 1 auto }
.ol-50:hover { background:#D9561F; color:#15171B }
.ol-50:focus-visible { outline:2px solid #E8622E; outline-offset:3px }

/* The capture buttons are <button> now, not <a>, so they need the type
   and chrome an anchor gave them for free. */
.ol-50 { border: 0; cursor: pointer; font-family: inherit }