:root {
    --blue: #1F2BD6; --deep: #1620a8; --floor: #1823b8; --bone: #EFEBE3; --ink: #111111;
    --display: 'Dela Gothic One', system-ui, sans-serif;
    --body: 'Lexend', system-ui, sans-serif;
    --m: max(20px, 6vw);
    color-scheme: only light;
  }
  * { box-sizing: border-box; }
  html { background: var(--blue); }
  body { margin: 0; min-height: 100svh; color: var(--bone); font: 400 22px/1.5 var(--body);
    
    background: radial-gradient(70% 900px at 18% -6%, rgba(255,255,255,.14), transparent 70%) no-repeat,
      linear-gradient(180deg, #2331e0 0, var(--blue) 900px, var(--floor) 100%); }
  main { max-width: 1100px; padding: clamp(40px, 8svh, 96px) var(--m) clamp(56px, 10svh, 120px); }
  .top { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--bone); font: 500 22px/1.2 var(--body);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .22em; }
  .top span { display: inline-block; }
  h1 { margin: clamp(28px, 6svh, 64px) 0 0; font: 400 clamp(52px, 9vw, 132px)/1 var(--display); letter-spacing: -.012em; text-wrap: balance; }
  .lead { margin: 32px 0 0; max-width: 30em; font-size: clamp(22px, 2vw, 28px); line-height: 1.45; text-wrap: pretty; }
  h2 { margin: clamp(56px, 9svh, 96px) 0 0; font: 400 clamp(32px, 3.6vw, 52px)/1.05 var(--display); letter-spacing: -.01em; text-wrap: balance; }
  p, li { max-width: 34em; text-wrap: pretty; }
  ul { margin: 24px 0 0; padding: 0 0 0 1.1em; }
  li { margin-top: 16px; padding-left: .3em; }
  li::marker { color: var(--bone); }
  h2 + p { margin: 24px 0 0; }
  p + p { margin: 16px 0 0; }
  a { color: var(--bone); }
  .mail { font-weight: 500; text-decoration-thickness: 2px; text-underline-offset: .22em; overflow-wrap: anywhere; }
  .back { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(48px, 8svh, 88px); min-height: 64px; padding: 0 34px;
    border-radius: 999px; background: var(--bone); color: var(--blue); font: 400 clamp(22px, 2vw, 26px)/1 var(--display); text-decoration: none;
    box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 -3px 0 rgba(22,32,168,.12) inset, 0 20px 44px -18px rgba(7,10,58,.55); }
  .back:hover { background: #fff; }
  a:focus-visible { outline: 3px solid var(--bone); outline-offset: 5px; border-radius: 6px; }
  .back:focus-visible { border-radius: 999px; }
  @media (max-width: 767px) {
    body { font-size: 20px; }
    h1 { font-size: max(34px, 11.2vw); }   
    .lead { font-size: 21px; }
    .back { width: 100%; justify-content: center; padding: 0 24px; }
  }
  @media (prefers-reduced-motion: no-preference) { .back { transition: background-color .2s; } }
  .when { margin-top: clamp(48px, 8svh, 88px); }