body { margin: 0; background: #0A0D10; color: #FFFFFF; font-family: 'Archivo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.028em; line-height: 1.1; }
p { margin: 0; }
a { color: #7FC4FF; text-decoration: none; }
a:hover { color: #BDE0FF; }
.kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; }
.chip { font-size: 11.5px; font-weight: 500; color: #9FB0C2; border: 1px solid #222C36; border-radius: 999px; padding: 7px 14px; }
.sect { box-sizing: border-box; width: 1280px; position: relative; }
.iconbox { width: 44px; height: 44px; border: 1px solid #2A3846; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sect { box-sizing: border-box; width: 1280px; position: relative; padding: 0 64px; }
.lead { font-size: 15.5px; line-height: 1.78; color: #C2CDD9; }
.muted { font-size: 13.5px; line-height: 1.68; color: #8B9AAA; }
ul.ticks { margin: 0; padding: 0; list-style: none; }
ul.ticks li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.75; color: #C2CDD9; margin-bottom: 9px; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 4px; border: 1.5px solid #3490DE; box-sizing: border-box; }
.iconbox { width: 48px; height: 48px; border: 1px solid #2A3846; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
ul.ticks li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.72; color: #C2CDD9; margin-bottom: 9px; }
ul.dots { margin: 0; padding: 0; list-style: none; }
ul.dots li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.72; color: #C2CDD9; margin-bottom: 9px; }
ul.dots li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 4px; background: #3490DE; }
ul.ticks li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.7; color: #C2CDD9; margin-bottom: 8px; }
ul.ticks li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 4px; border: 1.5px solid #3490DE; box-sizing: border-box; }
label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: #8B9AAA; margin-bottom: 9px; }
input, select, textarea { width: 100%; box-sizing: border-box; background: #0E141A; border: 1px solid #222C36; border-radius: 9px; color: #FFFFFF; font-family: 'Archivo', system-ui, sans-serif; font-size: 15px; padding: 0 16px; height: 50px; }
textarea { height: 132px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
input::placeholder, textarea::placeholder { color: #55636F; }
input:focus, select:focus, textarea:focus { outline: 2px solid #3490DE; outline-offset: 1px; border-color: #3490DE; }
ul.ticks li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.7; color: #C2CDD9; margin-bottom: 9px; }

/* ---- site shell ---- */
html { background: #0A0D10; }
body { min-width: 1280px; }
.page { width: 1280px; margin: 0 auto; background: #0A0D10; display: flex; flex-direction: column; }
.page > .sect { flex-shrink: 0; }
a { transition: color .12s ease; }
button { font-family: 'Archivo', system-ui, sans-serif; }
::selection { background: #3490DE; color: #071018; }

/* ===================================================================
   Responsive layer.

   The site was authored fixed at 1280px with widths inline on elements.
   Rewriting those 166 inline styles would risk the desktop layout and be
   undone by the designer's next revision, so everything that adapts the
   layout lives below, inside media queries: at >=1280px none of it
   applies and the rendering is exactly as authored. !important is needed
   only because the values being overridden are inline, which otherwise
   outrank any stylesheet rule.

   The width selectors are generated from the widths actually used in the
   markup, and cover only boxes >= 200px. Smaller inline widths (8-32px
   dots, icons, hairlines, and the 150/152px chart columns) are real
   sizes rather than layout, and must keep them.
   =================================================================== */

body { min-width: 0; }
.page { width: 100%; max-width: 1280px; }
.sect { width: 100%; max-width: 1280px; }
img { max-width: 100%; height: auto; }
/* The diagrams carry width/height attributes as well as a viewBox;
   height:auto keeps them in proportion once max-width shrinks them. */
svg { max-width: 100%; height: auto; }

@media (max-width: 1279px) {
  /* A 64px gutter is a third of a phone screen. */
  .sect { padding-left: clamp(18px, 4.5vw, 64px) !important;
          padding-right: clamp(18px, 4.5vw, 64px) !important; }

  /* Rows of fixed cards wrap into stacks instead of overflowing.
     inline-flex is excluded: those are buttons and pills, not layout. */
  .page [style*="display: flex"]:not([style*="inline-flex"]) { flex-wrap: wrap !important; }

  /* Flex items default to min-width:auto, which is what actually stops a
     620px column shrinking on a 375px screen. This is the linchpin. */
  .page [style*="display: flex"] > * { min-width: 0 !important; }

  /* Layout boxes stop being fixed and simply fit. */
  .page [style*="width: 217px"],
  .page [style*="width: 218px"],
  .page [style*="width: 274px"],
  .page [style*="width: 286px"],
  .page [style*="width: 288px"],
  .page [style*="width: 300px"],
  .page [style*="width: 310px"],
  .page [style*="width: 340px"],
  .page [style*="width: 360px"],
  .page [style*="width: 364px"],
  .page [style*="width: 370px"],
  .page [style*="width: 396px"],
  .page [style*="width: 420px"],
  .page [style*="width: 480px"],
  .page [style*="width: 492px"],
  .page [style*="width: 544px"],
  .page [style*="width: 552px"],
  .page [style*="width: 560px"],
  .page [style*="width: 564px"],
  .page [style*="width: 620px"],
  .page [style*="width: 640px"],
  .page [style*="width: 660px"],
  .page [style*="width: 700px"],
  .page [style*="width: 716px"],
  .page [style*="width: 720px"],
  .page [style*="width: 760px"],
  .page [style*="width: 780px"],
  .page [style*="width: 800px"],
  .page [style*="width: 820px"],
  .page [style*="width: 880px"],
  .page [style*="width: 900px"],
  .page [style*="width: 920px"],
  .page [style*="width: 1280px"] {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex-basis: auto !important;
    /* Several of these are content-box with 24px padding and a 3px accent
       border. Without this, "width: 100%" means 100% PLUS 52px, which is
       exactly how a card ends up wider than the screen it sits on. */
    box-sizing: border-box !important;
  }

  /* Four decorative hairlines are absolutely positioned at the old fixed
     64px gutter and drawn 1152px wide (1280 - 2x64). Both numbers have to
     follow the gutter once it becomes fluid, or they hang off the right. */
  .page svg[style*="position: absolute"][style*="left: 64px"] {
    left: clamp(18px, 4.5vw, 64px) !important;
    width: calc(100% - 2 * clamp(18px, 4.5vw, 64px)) !important;
  }

  /* A panel that refused to shrink beside a text column now may. */
  .page [style*="flex-shrink: 0"] { flex-shrink: 1 !important; }

  /* A fixed height around a now-smaller diagram would leave a dead gap. */
  .page [style*="height:"]:has(> svg) { height: auto !important; }
  .page [style*="min-height:"] { min-height: 0 !important; }
}

@media (max-width: 860px) {
  /* Below this there is no room for two of anything: stack outright. */
  .page [style*="width: 217px"],
  .page [style*="width: 218px"],
  .page [style*="width: 274px"],
  .page [style*="width: 286px"],
  .page [style*="width: 288px"],
  .page [style*="width: 300px"],
  .page [style*="width: 310px"],
  .page [style*="width: 340px"],
  .page [style*="width: 360px"],
  .page [style*="width: 364px"],
  .page [style*="width: 370px"],
  .page [style*="width: 396px"],
  .page [style*="width: 420px"],
  .page [style*="width: 480px"],
  .page [style*="width: 492px"],
  .page [style*="width: 544px"],
  .page [style*="width: 552px"],
  .page [style*="width: 560px"],
  .page [style*="width: 564px"],
  .page [style*="width: 620px"],
  .page [style*="width: 640px"],
  .page [style*="width: 660px"],
  .page [style*="width: 700px"],
  .page [style*="width: 716px"],
  .page [style*="width: 720px"],
  .page [style*="width: 760px"],
  .page [style*="width: 780px"],
  .page [style*="width: 800px"],
  .page [style*="width: 820px"],
  .page [style*="width: 880px"],
  .page [style*="width: 900px"],
  .page [style*="width: 920px"],
  .page [style*="width: 1280px"] { width: 100% !important; }

  h1 { font-size: clamp(30px, 8.2vw, 46px) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(23px, 5.6vw, 34px) !important; }
  h3 { font-size: clamp(17px, 3.4vw, 22px) !important; }
  /* Body copy was sized for a 620px measure. */
  .page p[style*="font-size: 17.5px"] { font-size: 16px !important; }
}