/* Exatom deck system: 1920 x 1080, 48 px margin, 4 columns of 432 px with 32 px gutters. */
.s { position: relative; width: 1920px; height: 1080px; box-sizing: border-box; overflow: hidden; font-family: 'Inter', sans-serif; color: #18122D; -webkit-font-smoothing: antialiased; }
.s * { box-sizing: border-box; }
.bl { background: #E8EEFF; }
.wh { background: #FFFFFF; }
.dk { background: #18122D; color: #E8EEFF; }
.bu { background: #2A5AE9; color: #FFFFFF; }
.bs { background: #FEEFEF; color: #440020; }

/* Breadcrumb and footer */
.crumb { position: absolute; top: 48px; left: 48px; right: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; font-size: 18px; font-weight: 500; color: #464157; }
.dk .crumb { color: rgba(232, 238, 255, 0.6); }
.bs .crumb { color: rgba(68, 0, 32, 0.7); }
.foot { position: absolute; left: 48px; right: 48px; bottom: 40px; display: flex; justify-content: space-between; font-size: 16px; color: #747181; }
.dk .foot { color: rgba(232, 238, 255, 0.5); }
.bu .foot { color: rgba(255, 255, 255, 0.72); }
.bs .foot { color: rgba(68, 0, 32, 0.6); }

/* Content area under the breadcrumb: 4-column grid */
.grid { position: absolute; left: 48px; right: 48px; top: 112px; bottom: 96px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; row-gap: 32px; }

/* Type */
.h-cover { margin: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 120px; line-height: 1; letter-spacing: -0.04em; text-wrap: balance; }
.h-chap { margin: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 200px; line-height: 0.95; letter-spacing: -0.045em; }
.h-state { margin: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 96px; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.h-slide { margin: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 64px; line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.h-card { margin: 0; font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 36px; line-height: 1.1; letter-spacing: -0.02em; }
.fig { font-family: 'Instrument Sans', sans-serif; font-weight: 600; font-size: 112px; line-height: 1; letter-spacing: -0.045em; }
.body { margin: 0; font-size: 24px; line-height: 1.5; color: #464157; }
.dk .body { color: rgba(232, 238, 255, 0.72); }
.bu .body { color: rgba(255, 255, 255, 0.8); }
.bs .body { color: rgba(68, 0, 32, 0.8); }
.lbl { font-size: 20px; line-height: 1.35; color: #464157; }
.dk .lbl { color: rgba(232, 238, 255, 0.72); }
.cap { font-size: 18px; line-height: 1.4; color: #747181; }
.dk .cap { color: rgba(232, 238, 255, 0.55); }
.strong { color: #18122D; font-weight: 600; }

/* Eyebrow: ink-tinted pill, as on the website */
.eyebrow { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: rgba(24, 18, 45, 0.06); color: rgba(24, 18, 45, 0.66); font-size: 18px; font-weight: 500; width: max-content; }
.dk .eyebrow { background: rgba(232, 238, 255, 0.08); color: rgba(232, 238, 255, 0.72); }

/* Surfaces */
.card { background: #FFFFFF; border-radius: 8px; }
.card-dk { background: rgba(232, 238, 255, 0.05); border: 1px solid rgba(232, 238, 255, 0.12); border-radius: 8px; }
.stage { position: relative; border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.stage > .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage > .shot { position: relative; display: block; border-radius: 8px; background: #FFFFFF; }
.cover-img { display: block; width: 100%; object-fit: cover; border-radius: 4px; }

/* Numbered list with hairlines */
.list { display: flex; flex-direction: column; border-bottom: 1px solid rgba(24, 18, 45, 0.14); }
.li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border-top: 1px solid rgba(24, 18, 45, 0.14); font-size: 24px; font-weight: 500; }
.dk .list, .bu .list { border-bottom-color: rgba(232, 238, 255, 0.22); }
.dk .li, .bu .li { border-top-color: rgba(232, 238, 255, 0.22); }
.li .n { font-size: 20px; font-weight: 500; opacity: 0.7; }

/* Labelled text blocks (use cases) */
.blk { display: flex; flex-direction: column; gap: 8px; padding: 20px 0; border-top: 1px solid rgba(24, 18, 45, 0.14); }
.blk b { font-family: 'Instrument Sans', sans-serif; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }

/* Pills */
.chip { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; border-radius: 999px; background: #FFFFFF; color: #18122D; font-size: 20px; font-weight: 600; white-space: nowrap; width: max-content; }
.chip i { width: 10px; height: 10px; border-radius: 50%; background: #2A5AE9; }
.chip.dark { background: #18122D; color: #E8EEFF; }
.chip.green { background: #DCF5E7; color: #135C37; }
.chip.green i { background: #1DB463; }
.tag { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; background: #FFFFFF; font-size: 20px; font-weight: 500; color: #18122D; }
.tabs { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: #FFFFFF; }
.tabs span { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 18px; font-weight: 500; color: #464157; }
.tabs span.on { background: #18122D; color: #E8EEFF; }
.tick { display: flex; align-items: center; gap: 14px; font-size: 24px; }
.tick svg { width: 26px; height: 26px; flex: 0 0 26px; }