/* DiaBuddy and MedEDiabuddy pages: all styling for both pages.
   The Content-Security-Policy forbids inline styles (style-src 'self'), so never add
   style="" attributes or <style> blocks to the HTML. The s1…sN classes at the end are
   the former inline styles, de-duplicated across both pages; several elements share each
   one, so to restyle a single element add a new class rather than editing a shared one. */

/* ---- Self-hosted fonts (no third-party requests) ---- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 100 700; 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'); }

/* ---- Base ---- */
:root { color-scheme: light; --header-offset: 88px; }
*, *::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; overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; }
:where(.page-diabuddy) a { color: #0E7C7B; }
:where(.page-medediabuddy) a { color: #4338CA; }
a:focus-visible { outline: 3px solid #F59E0B; outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: var(--header-offset); }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; background: #0F2038; color: #FFFFFF;
  padding: 10px 16px; border-radius: 6px; }
.skip-link:focus { left: 8px; }

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

/* ---- Sticky top menu ---- */
.site-header { position: -webkit-sticky; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(15, 32, 56, .08); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.site-header { background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(8px); backdrop-filter: saturate(1.4) blur(8px); }
}
/* On narrow screens the links become one swipeable row, so the sticky bar stays short. */
@media (max-width: 760px) {
  :root { --header-offset: 132px; }
  .site-header nav { gap: 8px; padding: 8px 0; min-height: 0; }
  .site-header .nav-links { flex-wrap: nowrap; width: 100%; overflow-x: auto; gap: 20px;
    white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .site-header .nav-links::-webkit-scrollbar { display: none; }
}

/* ---- Video ---- */
.video-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ---- App screens ---- */
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.phones li { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.phone { background: #0F2038; border-radius: 30px; padding: 10px; box-shadow: 0 14px 34px rgba(15, 32, 56, .22); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 480 / 900; object-fit: cover; object-position: top; border-radius: 21px; background: #FFFFFF; }
@media (max-width: 900px) {
  .phones { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 18px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
  .phones li { flex: 0 0 220px; scroll-snap-align: start; }
}

/* ---- Contact form ---- */
.cf { display: flex; flex-direction: column; gap: 18px; background: #F4F7FA; border-radius: 16px; padding: 32px; }
.cf-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.cf label { display: flex; flex-direction: column; gap: 6px; font-size: 16px; font-weight: 600; color: #0F2038; }
.cf .opt { font-weight: 400; color: #4A5568; font-size: 16px; }
.cf input, .cf select, .cf textarea { font: inherit; font-size: 17px; font-weight: 400; color: #1A2332; background: #FFFFFF;
  border: 1.5px solid #C3CEDB; border-radius: 8px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.cf textarea { min-height: 140px; resize: vertical; }
.cf input:focus, .cf select:focus, .cf textarea:focus { outline: none; border-color: var(--cf-accent); box-shadow: 0 0 0 3px var(--cf-ring); }
.cf button { align-self: flex-start; font: inherit; font-size: 17px; font-weight: 600; color: #FFFFFF; background: var(--cf-accent);
  border: 0; border-radius: 8px; padding: 14px 26px; cursor: pointer; }
.cf button:disabled { opacity: .6; cursor: wait; }
.cf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cf-status { margin: 0; font-size: 16px; min-height: 1.2em; }
.cf-status.ok { color: #166534; font-weight: 600; }
.cf-status.err { color: #B91C1C; }

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

/* ---- Small screens (after the s-classes so these win) ---- */
@media (max-width: 640px) {
  h1 { font-size: 38px !important; }
  h2 { font-size: 29px !important; }
  section { padding-top: 64px !important; padding-bottom: 64px !important; }
}