/* DiaBuddy and MedEDiabuddy pages.
   All styling lives in this file so the Content-Security-Policy can forbid inline styles.
   Generated by build.py: the s1…sN classes are the former inline style attributes. */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; font-stretch: 100%; font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-var.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-serif-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Serif'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/ibm-plex-serif-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2'); }

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #FFFFFF; color: #1A2332; font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* Plain links; :where() keeps these below the s-classes, as the inline styles were. */
:where(.page-diabuddy) a { color: #0E7C7B; }
:where(.page-medediabuddy) a { color: #4338CA; }
:where(.page-diabuddy) a:where(:hover, :focus) { color: #0A5E5D; text-decoration: none; }
:where(.page-medediabuddy) a:where(:hover, :focus) { color: #312E81; text-decoration: none; }
a.btn:hover { opacity: .92; }
a:focus-visible { outline: 3px solid #F59E0B; outline-offset: 3px; border-radius: 4px; }
section { scroll-margin-top: 24px; }

.skip-link { position: absolute; left: 16px; top: -100px; z-index: 10; background: #0F2038; color: #FFFFFF !important;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

.utility-bar { background: #0A1628; color: #C7D4E5; font-size: 14px; padding: 10px 24px; }
.utility-bar__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }
.page-diabuddy .utility-bar a { color: #7FD6CF; }
.page-medediabuddy .utility-bar a { color: #B9B5FF; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- Former inline styles ---- */
.s1 { background: #FFFFFF; border-bottom: 1px solid #D6DEE8; padding: 0 24px; }
.s2 { max-width: 1200px; margin: 0 auto; min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; }
.s3 { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #0F2038; }
.s4 { width: 40px; height: 40px; border-radius: 10px; background: #0E7C7B; display: flex; align-items: center; justify-content: center; }
.s5 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.s6 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: 16px; font-weight: 500; }
.s7 { color: #1A2332; text-decoration: none; padding: 10px 0; }
.s8 { background: #0F2038; color: #FFFFFF; text-decoration: none; padding: 12px 20px; border-radius: 8px; font-weight: 600; }
.s9 { background: #0F2038; color: #FFFFFF; padding: 80px 24px 88px; }
.s10 { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.s11 { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.s12 { align-self: flex-start; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0F2038; background: #7FD6CF; padding: 6px 12px; border-radius: 999px; }
.s13 { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 54px; line-height: 1.1; letter-spacing: -0.015em; }
.s14 { margin: 0; font-size: 20px; color: #D5DEEA; max-width: 560px; }
.s15 { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.s16 { background: #7FD6CF; color: #0F2038; text-decoration: none; padding: 14px 24px; border-radius: 8px; font-weight: 600; }
.s17 { border: 1.5px solid #7FD6CF; color: #FFFFFF; text-decoration: none; padding: 13px 22px; border-radius: 8px; font-weight: 600; }
.s18 { margin: 0; font-size: 15px; color: #AFC0D6; }
.s19 { flex: 1 1 460px; min-width: 0; }
.s20 { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: 16px; background: #1F3864; border: 2px dashed #5C7AA6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; box-sizing: border-box; }
.s21 { width: 72px; height: 72px; border-radius: 50%; background: #7FD6CF; display: flex; align-items: center; justify-content: center; }
.s22 { font-weight: 600; font-size: 18px; }
.s23 { font-size: 15px; color: #C7D4E5; max-width: 340px; }
.s24 { background: #F4F7FA; border-bottom: 1px solid #D6DEE8; padding: 40px 24px; }
.s25 { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px; }
.s26 { display: flex; flex-direction: column; gap: 6px; }
.s27 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 44px; font-weight: 600; color: #0F2038; line-height: 1; }
.s28 { font-size: 16px; color: #4A5568; }
.s29 { font-size: 26px; color: #4A5568; }
.s30 { padding: 96px 24px; background: #FFFFFF; }
.s31 { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; }
.s32 { display: flex; flex-direction: column; gap: 14px; max-width: 820px; }
.s33 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #0E7C7B; font-weight: 500; }
.s34 { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.15; color: #0F2038; }
.s35 { margin: 0; color: #4A5568; font-size: 19px; }
.s36 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.s37 { border: 1px solid #D6DEE8; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.s38 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 36px; font-weight: 600; color: #B45309; }
.s39 { font-weight: 600; font-size: 19px; color: #0F2038; }
.s40 { color: #4A5568; font-size: 16px; }
.s41 { margin: 0; font-size: 15px; color: #4A5568; }
.s42 { padding: 96px 24px; background: #F4F7FA; }
.s43 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; }
.s44 { background: #FFFFFF; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.s45 { margin: 0; font-size: 21px; color: #0F2038; }
.s46 { margin: 0; color: #4A5568; font-size: 16px; }
.s47 { background: #0F2038; color: #FFFFFF; border-radius: 16px; padding: 32px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.s48 { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s49 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #7FD6CF; }
.s50 { font-weight: 600; font-size: 19px; }
.s51 { color: #C7D4E5; font-size: 16px; }
.s52 { margin: 0; font-size: 16px; color: #4A5568; }
.s53 { border: 1px solid #D6DEE8; border-left-width: 1px; border-radius: 14px; padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: #F4F7FA; }
.s54 { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s55 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4A5568; }
.s56 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 23px; font-weight: 600; color: #0F2038; line-height: 1.3; }
.s57 { background: #0F2038; color: #FFFFFF; text-decoration: none; padding: 14px 22px; border-radius: 8px; font-weight: 600; }
.s58 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 24px; }
.s59 { border: 1px solid #D6DEE8; border-radius: 14px; padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.s60 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #0E7C7B; }
.s61 { margin: 0; font-size: 23px; color: #0F2038; }
.s62 { display: flex; flex-direction: column; gap: 14px; }
.s63 { font-weight: 600; font-size: 16px; color: #0F2038; }
.s64 { font-size: 15px; color: #4A5568; }
.s65 { display: flex; align-items: center; gap: 10px; }
.s66 { height: 14px; width: 10%; background: #0E7C7B; border-radius: 3px; }
.s67 { font-size: 15px; font-weight: 600; }
.s68 { height: 14px; width: 48%; background: #E8A35C; border-radius: 3px; }
.s69 { font-size: 15px; }
.s70 { height: 14px; width: 14%; background: #0E7C7B; border-radius: 3px; }
.s71 { height: 14px; width: 70%; background: #E8A35C; border-radius: 3px; }
.s72 { height: 14px; width: 13%; background: #0E7C7B; border-radius: 3px; }
.s73 { height: 14px; width: 62%; background: #E8A35C; border-radius: 3px; }
.s74 { font-size: 14px; color: #4A5568; }
.s75 { border-top: 1px solid #D6DEE8; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.s76 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 16px; }
.s77 { background: #F4F7FA; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.s78 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 30px; font-weight: 600; color: #0F2038; }
.s79 { padding: 96px 24px; background: #0F2038; color: #FFFFFF; }
.s80 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #7FD6CF; font-weight: 500; }
.s81 { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif; font-weight: 600; font-size: 40px; line-height: 1.15; }
.s82 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.s83 { border-top: 2px solid #7FD6CF; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.s84 { font-weight: 600; font-size: 20px; }
.s85 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 20px; }
.s86 { background: #F4F7FA; border-radius: 14px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.s87 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #0E7C7B; font-weight: 500; }
.s88 { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #1A2332; }
.s89 { border: 1.5px solid #0E7C7B; border-radius: 14px; padding: 24px 28px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.s90 { font-size: 17px; color: #0F2038; flex: 1 1 520px; min-width: 0; }
.s91 { background: #0E7C7B; color: #FFFFFF; text-decoration: none; padding: 13px 20px; border-radius: 8px; font-weight: 600; }
.s92 { background: #FFFFFF; border-radius: 16px; padding: 36px; display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.s93 { flex: 0 0 200px; height: 240px; border-radius: 12px; background: #E4EBF2; border: 2px dashed #9AAFC6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #4A5568; font-size: 14px; text-align: center; }
.s94 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 44px; color: #0F2038; }
.s95 { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.s96 { display: flex; flex-direction: column; gap: 4px; }
.s97 { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif; font-size: 30px; color: #0F2038; }
.s98 { font-size: 17px; color: #0E7C7B; font-weight: 600; }
.s99 { margin: 0; font-size: 17px; color: #1A2332; }
.s100 { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: #4A5568; }
.s101 { display: flex; flex-direction: column; gap: 16px; }
.s102 { font-weight: 600; font-size: 18px; color: #0F2038; }
.s103 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.s104 { background: #FFFFFF; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.s105 { font-weight: 600; }
.s106 { padding: 72px 24px; background: #FFFFFF; }
.s107 { max-width: 1200px; margin: 0 auto; border-radius: 18px; background: #EEF0FB; padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.s108 { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.s109 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #4338CA; }
.s110 { margin: 0; font-family: 'IBM Plex Serif', Georgia, serif; font-size: 32px; color: #0F2038; }
.s111 { margin: 0; font-size: 17px; color: #4A5568; }
.s112 { background: #4338CA; color: #FFFFFF; text-decoration: none; padding: 14px 22px; border-radius: 8px; font-weight: 600; }
.s113 { background: #0A1628; color: #C7D4E5; padding: 48px 24px; font-size: 15px; }
.s114 { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
.s115 { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; }
.s116 { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.s117 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 22px; color: #FFFFFF; }
.s118 { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.s119 { color: #7FD6CF; }
.s120 { margin: 0; border-top: 1px solid #23395A; padding-top: 20px; color: #AFC0D6; font-size: 14px; }
.s121 { width: 40px; height: 40px; border-radius: 10px; background: #4338CA; display: flex; align-items: center; justify-content: center; }
.s122 { align-self: flex-start; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #0F2038; background: #B9B5FF; padding: 6px 12px; border-radius: 999px; }
.s123 { background: #B9B5FF; color: #0F2038; text-decoration: none; padding: 14px 24px; border-radius: 8px; font-weight: 600; }
.s124 { border: 1.5px solid #B9B5FF; color: #FFFFFF; text-decoration: none; padding: 13px 22px; border-radius: 8px; font-weight: 600; }
.s125 { aspect-ratio: 16 / 9; width: 100%; max-width: 100%; border-radius: 16px; background: #1F3864; border: 2px dashed #7C86C9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; box-sizing: border-box; }
.s126 { width: 72px; height: 72px; border-radius: 50%; background: #B9B5FF; display: flex; align-items: center; justify-content: center; }
.s127 { font-size: 15px; color: #C7D4E5; max-width: 360px; }
.s128 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #4338CA; font-weight: 500; }
.s129 { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.s130 { flex: 1 1 560px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.s131 { background: #FFFFFF; border-radius: 14px; padding: 22px 24px; display: flex; gap: 18px; align-items: flex-start; }
.s132 { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #B91C1C; color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.s133 { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #4338CA; color: #FFFFFF; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.s134 { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.s135 { background: #FFFFFF; border: 1px solid #D6DEE8; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.s136 { align-self: flex-end; max-width: 85%; background: #E8E7FB; color: #1A2332; border-radius: 16px 16px 4px 16px; padding: 14px 16px; font-size: 16px; }
.s137 { align-self: flex-start; max-width: 90%; background: #FDECEC; border: 1px solid #F3B4B4; color: #1A2332; border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 16px; display: flex; flex-direction: column; gap: 6px; }
.s138 { font-weight: 700; color: #991B1B; }
.s139 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4A5568; margin-top: 12px; }
.s140 { display: flex; flex-wrap: wrap; gap: 8px; }
.s141 { background: #FFFFFF; border: 1px solid #D6DEE8; border-radius: 999px; padding: 6px 14px; font-size: 15px; }
.s142 { background: #0F2038; color: #FFFFFF; border-radius: 16px; padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.s143 { font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #B9B5FF; }
.s144 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 23px; font-weight: 600; line-height: 1.3; }
.s145 { font-size: 16px; color: #C7D4E5; }
.s146 { background: #B9B5FF; color: #0F2038; text-decoration: none; padding: 14px 22px; border-radius: 8px; font-weight: 600; }
.s147 { display: flex; flex-direction: column; gap: 12px; }
.s148 { height: 18px; width: 82%; background: #4338CA; border-radius: 3px; }
.s149 { font-size: 16px; font-weight: 700; }
.s150 { height: 18px; width: 77%; background: #8A93A6; border-radius: 3px; }
.s151 { font-size: 16px; }
.s152 { height: 18px; width: 48%; background: #E8A35C; border-radius: 3px; }
.s153 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.s154 { background: #F4F7FA; border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 4px; }
.s155 { font-family: 'IBM Plex Serif', Georgia, serif; font-size: 24px; font-weight: 600; color: #0F2038; }
.s156 { margin: 0; font-size: 16px; color: #1A2332; }
.s157 { background: #F4F7FA; border-radius: 14px; padding: 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 20px; }
.s158 { display: flex; flex-direction: column; gap: 2px; }
.s159 { font-weight: 600; font-size: 20px; color: #0F2038; }
.s160 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: #B9B5FF; font-weight: 500; }
.s161 { border-top: 2px solid #B9B5FF; padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.s162 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #4338CA; font-weight: 500; }
.s163 { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; }
.s164 { font-size: 17px; color: #4338CA; font-weight: 600; }
.s165 { margin: 0; font-size: 17px; }
.s166 { max-width: 1200px; margin: 0 auto; border-radius: 18px; background: #E6F4F3; padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.s167 { font-family: 'IBM Plex Mono', monospace; font-size: 14px; color: #0B6463; }
.s168 { background: #0B6463; color: #FFFFFF; text-decoration: none; padding: 14px 22px; border-radius: 8px; font-weight: 600; }
.s169 { color: #B9B5FF; }

/* Phone layout: after the s-classes so it wins. */
@media (max-width: 640px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 29px !important; }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
}

/* Developer portrait, for when the placeholder is replaced with a photo. */
.portrait { width: 200px; height: 240px; object-fit: cover; border-radius: 12px; }