/* Comparison Template.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.
*/

.cp-1 { font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,Arial,sans-serif; color:#16181C; line-height:1.6 }
.cp-2 { background:#15171B; color:#E9EAEC; padding:0 clamp(24px,5vw,72px) }
.cp-3 { padding:56px 0 88px; display:flex; flex-direction:column; gap:26px; max-width:52ch; margin-left:auto; margin-right:auto; align-items:center; text-align:center }
.cp-4 { display:flex; align-items:center; gap:10px; font-family:ui-monospace,monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#7C838C }
.cp-5 { color:#7C838C }
.cp-6 { color:#4A515A }
.cp-7 { color:#E8622E }
.cp-8 { font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:clamp(36px,4.4vw,58px); letter-spacing:-.026em; line-height:1.06; margin:0; color:#fff }
.cp-9 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:clamp(20px,2.1vw,26px); font-weight:500; letter-spacing:-.012em; line-height:1.38; color:#C3C8CE; max-width:34ch; text-wrap:pretty }
.cp-10 { margin:0; font-size:17px; line-height:1.7; color:#A9AEB6; max-width:56ch; text-wrap:pretty }
.cp-11 {  display:flex; align-items:stretch; column-gap:8px; row-gap:12px; flex-wrap:wrap; width:100%; max-width:520px; margin-top:4px  }
.cp-12 {  display:flex; align-items:center; background:#1B1E23; border:1px solid #2A2F36; border-radius:5px; padding:0 16px; flex:1 1 100%; min-width:0  }
/* x2 */
.cp-13 { font-size:15.5px; color:#5E656E; flex:none }
/* x2 */
.cp-14 { background:transparent; border:0; outline:none; color:#E9EAEC; font-family:inherit; font-size:15.5px; padding:14px 0 14px 6px; width:100% }
.cp-12:has(:focus-visible) { border-color: #E8622E }
.cp-14:focus-visible { outline: none }
/* x2 */
.cp-15 { 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 }
.cp-15:hover { background:#D9561F; color:#15171B }
.cp-15:focus-visible { outline:2px solid #E8622E; outline-offset:3px }
.cp-16 { background:#fff; border-bottom:1px solid #E2E2DE; padding:0 }
.cp-17 { display:flex; flex-wrap:wrap; gap:1px; background:#E2E2DE }
.cp-18 { background:#FFF8F4; padding:40px clamp(24px,5vw,48px); display:flex; flex-direction:column; gap:11px; box-shadow:inset 0 3px 0 #E8622E; flex:1 1 320px; min-width:0 }
.cp-19 { font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#B4551F }
/* x2 */
.cp-20 { font-family:'Newsreader',Georgia,serif; font-size:26px; font-weight:600; letter-spacing:-.016em; color:#16181C }
.cp-21 { font-size:16px; color:#3F444B; line-height:1.65; max-width:44ch; text-wrap:pretty }
.cp-22 { background:#fff; padding:40px clamp(24px,5vw,48px); display:flex; flex-direction:column; gap:11px; flex:1 1 320px; min-width:0 }
.cp-23 { font-family:ui-monospace,monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#8B9199 }
.cp-24 { font-size:16px; color:#5C6169; line-height:1.65; max-width:44ch; text-wrap:pretty }
.cp-25 { background:#FAFAF9; border-bottom:1px solid #E2E2DE; padding:88px clamp(24px,5vw,72px); display:flex; flex-direction:column; gap:32px }
/* x2 */
.cp-26 { display:flex; justify-content:space-between; align-items:flex-end; column-gap:60px; row-gap:28px; flex-wrap:wrap }
.cp-27 { font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:36px; letter-spacing:-.018em; margin:0; max-width:24ch }
/* x2 */
.cp-28 { margin:0; font-size:16px; color:#5C6169; max-width:36ch }
.cp-29 { overflow-x:auto }
.cp-30 { border:1px solid #E2E2DE; background:#fff; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr); min-width:680px }
.cp-31 { border-bottom:1px solid #E2E2DE }
.cp-32 { padding:20px 24px; border-bottom:1px solid #E2E2DE; border-left:1px solid #EDEDE9; background:#FFF8F4; box-shadow:inset 0 3px 0 #E8622E }
.cp-33 { font-family:'Newsreader',Georgia,serif; font-size:19px; font-weight:600; color:#16181C }
.cp-34 { padding:20px 24px; border-bottom:1px solid #E2E2DE; border-left:1px solid #EDEDE9 }
.cp-35 { font-size:15.5px; font-weight:600; color:#16181C }
.cp-36 { background:#fff; border-bottom:1px solid #E2E2DE; padding:88px clamp(24px,5vw,72px); display:flex; flex-direction:column; gap:32px }
/* x2 */
.cp-37 { font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:36px; letter-spacing:-.018em; margin:0 }
.cp-38 { display:flex; flex-wrap:wrap; gap:1px; background:#E2E2DE; border:1px solid #E2E2DE }
/* x2 */
.cp-39 { background:#fff; padding:32px 30px 36px; display:flex; flex-direction:column; gap:18px; flex:1 1 340px; min-width:0 }
/* x2 */
.cp-40 { font-family:'Newsreader',Georgia,serif; font-size:22px; font-weight:600; letter-spacing:-.012em; color:#16181C }
/* x2 */
.cp-41 { display:flex; flex-direction:column; gap:1px; background:#EDEDE9; border-top:1px solid #EDEDE9; border-bottom:1px solid #EDEDE9 }
/* x2 */
.cp-42 { background:#fff; padding:13px 0; display:flex; gap:14px; align-items:baseline }
.cp-43 { font-family:ui-monospace,monospace; font-size:11px; color:#E8622E; flex:none }
.cp-44 { font-size:15.5px; color:#3F444B; line-height:1.6; text-wrap:pretty }
.cp-45 { font-family:ui-monospace,monospace; font-size:11px; color:#8B9199; flex:none }
.cp-46 { font-size:15.5px; color:#5C6169; line-height:1.6; text-wrap:pretty }
.cp-47 { background:#FAFAF9; border-bottom:1px solid #E2E2DE; padding:88px clamp(24px,5vw,72px); display:flex; flex-direction:column; gap:36px }
.cp-48 { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); column-gap:64px; row-gap:34px }
.cp-49 { display:flex; flex-direction:column; gap:9px; max-width:50ch }
.cp-50 { font-family:'Newsreader',Georgia,serif; font-size:21px; font-weight:600; letter-spacing:-.012em; color:#16181C; text-wrap:pretty }
.cp-51 { font-size:15.5px; color:#5C6169; line-height:1.65; text-wrap:pretty }
.cp-52 { 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 }
.cp-53 { 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 }
.cp-54 { display:flex; flex-direction:column; gap:18px; align-items:flex-start }
.cp-55 { margin:0; font-size:16.5px; color:#A9AEB6; max-width:40ch }
.cp-56 {  display:flex; align-items:stretch; column-gap:8px; row-gap:12px; flex-wrap:wrap; width:100%; max-width:460px  }
.cp-57 {  display:flex; align-items:center; background:#1B1E23; border:1px solid #2A2F36; border-radius:5px; padding:0 16px; flex:1 1 100%; min-width:0  }
.cp-58 { background:#fff; border-top:1px solid #E2E2DE; padding:28px clamp(24px,5vw,72px) }
.cp-59 { margin:0; font-size:13.5px; color:#8B9199; line-height:1.6; max-width:88ch }
.cp-60 { color:#8B9199; border-bottom:1px solid #DDDDD8 }

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