:root {
  --font-size-fluid-2: max(1.5rem,min(6vw,2.5rem));
  --font-size-2: 1.1rem;
  --size-3: 1rem;
  --size-4: 1.25rem;
  --font-weight-9: 900;
  --border-size-2: 2px;
  --radius-2: 5px;
  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color)/var(--shadow-strength-3)),0 1px 2px -5px hsl(var(--shadow-color)/var(--shadow-strength-3)),0 2px 5px -5px hsl(var(--shadow-color)/var(--shadow-strength-5)),0 4px 12px -5px hsl(var(--shadow-color)/var(--shadow-strength-6)),0 12px 15px -5px hsl(var(--shadow-color)/var(--shadow-strength-8));
  --gradient-16: radial-gradient(circle at 50% -250% var(--gradient-space),#374151,#111827,#000);
  --size-2: .5rem;
  --lime-5: #94d82d;
  --size-1: .25rem;
  --yellow-2: #ffec99;
  --pink-7: #d6336c;
  --shadow-color: 220 40% 2%;
  --shadow-strength-3: calc(var(--shadow-strength) + 2%);
  --shadow-strength-5: calc(var(--shadow-strength) + 4%);
  --shadow-strength-6: calc(var(--shadow-strength) + 5%);
  --shadow-strength-8: calc(var(--shadow-strength) + 7%);
  --gradient-space: in oklab;
  --shadow-strength: 25%;
}
/* Our theme on top of Open Props. JIT emits canonical upstream values for
 * every var() our pages touch; anything here wins by coming later in
 * source order, preserving the design as-shipped (our fallbacks were
 * Tailwind-palette values, upstream is Open Color — nearly all hues
 * differ, so these overrides are the site's actual colors).
 * Keep this file to tokens where our design intentionally differs. */
:root {
  /* The site palette. Every themed colour is one of these five, plus white
   * for text on Cerulean (Honeydew lands at 4.30:1 there, just shy of AA).
   * test/theme-contrast.test.ts guards every pairing this theme relies on. */
  --punch-red: #e63946;
  --honeydew: #f1faee;
  --frosted-blue: #a8dadc;
  --cerulean: #457b9d;
  --oxford-navy: #1d3557;
  /* A lifted navy for body-background depth; still dark enough for light text. */
  --chrome-lift: #2a4a75;

  /* Not upstream at all. */
  --grape-9: var(--oxford-navy);    /* page chrome */
  --surface-1: var(--frosted-blue); /* light panels, cards, list items */

  /* Our scale, not upstream's (upstream content-2 is 45ch). */
  --size-content-2: 60ch;
  --size-content-4: 120ch;

  /* Not upstream: plain monospace stack. */
  --font-mono: monospace;

  /* Our gradients (upstream gradient-8/-16 are different artwork). */
  --gradient-8: linear-gradient(var(--cerulean), var(--oxford-navy));
  --gradient-16: linear-gradient(var(--cerulean), var(--oxford-navy));

  /* Our hues (upstream values differ). */
  --cyan-1: var(--honeydew);        /* the content card surface */
  --gray-3: var(--honeydew);        /* progress-bar track */
  --gray-5: var(--cerulean);        /* input borders */
  --gray-6: var(--cerulean);        /* progress-bar border */
  --gray-9: var(--oxford-navy);     /* text on light surfaces */
  --lime-5: var(--cerulean);        /* card borders */
  --pink-5: var(--cerulean);        /* panel and page borders */
  --pink-7: var(--punch-red);       /* headings and the logo shadow */
  --red-1: rgba(230, 57, 70, 0.12); /* rejected-form surface */
  --red-2: rgba(230, 57, 70, 0.18); /* connection notice surface */
  --red-7: var(--punch-red);        /* error and notice borders */
  --yellow-1: var(--honeydew);      /* body text */
  --yellow-2: var(--frosted-blue);  /* code chip, closed portal */
  --yellow-3: var(--frosted-blue);  /* h1 shadow */
  --border-size-3: 3px;
}
.hero { text-align: center; }
.hero h1 { font-size: var(--font-size-fluid-2); text-wrap: balance; }
.sparkle-rule { border: none; text-align: center; font-size: var(--font-size-2);
  margin: var(--size-3) 0; }
.hero-button { display: inline-block; margin: var(--size-3) 0; font-size: var(--font-size-2);
  padding: var(--size-3) var(--size-4); font-weight: var(--font-weight-9, 900);
  color: #fff; text-decoration: none;
  border: var(--border-size-2, 2px) solid transparent;
  border-radius: var(--radius-2); box-shadow: var(--shadow-3);
  background: linear-gradient(rgba(29, 53, 87, 0.85), rgba(29, 53, 87, 0.85)) padding-box,
    var(--gradient-16, linear-gradient(#457b9d, #1d3557)) border-box; }
.hero-button:hover { background: var(--gradient-16, linear-gradient(#457b9d, #1d3557)) border-box; }
/* Gradient underlines for content links (stolen with love from
   mobalti/open-props-interfaces). */
.page section a:not(.hero-button), .faq a {
  text-decoration: none;
  background-image: var(--gradient-16, linear-gradient(#457b9d, #1d3557));
  background-size: 100% 2px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 1px; }
.steps { list-style: none; padding: 0; display: grid; gap: var(--size-2); }
.steps li { background: var(--surface-1, #a8dadc);
  border: var(--border-size-2, 2px) outset var(--lime-5, #457b9d);
  border-radius: var(--radius-2); padding: var(--size-2); }
.faq dt { font-weight: var(--font-weight-9, 900); margin-top: var(--size-2); }
.faq dd { margin: var(--size-1) 0; }
.closed-portal { background: var(--yellow-2, #a8dadc);
  border: var(--border-size-2, 2px) dashed var(--pink-7, #e63946);
  border-radius: var(--radius-2); padding: var(--size-3); text-align: center; }

.site-banner { text-align: center; padding: 24px 12px; margin-bottom: 24px; border-bottom: 2px dotted var(--cerulean); }
.site-banner h1 { margin: 12px 0; }
.eyebrow { font-size: .8rem; letter-spacing: .08em; }
.hero { text-align: left; }
.hero-button { border-radius: 0; box-shadow: none; }
.steps { counter-reset: hop; gap: 0; }
.steps li { background: transparent; border: 0; border-radius: 0; padding: 16px 0; line-height: 1.7; }
.steps li + li { border-top: 1px dotted var(--cerulean); }
.sparkle-rule { margin: 0; color: var(--oxford-navy); overflow: hidden; }
.faq dt { margin-top: 20px; }
.faq dt:first-child { margin-top: 0; }
.faq dd { line-height: 1.7; }
@media (max-width: 767.98px) {
  .landing-content > main { order: -1; }
}