/* Marketing holding page — coming-soon framing with the product outlined.
   Deliberately one file and no JavaScript.

   The early-access form and its styles were removed in the commit that took
   contact.html out; recover them from git rather than rewriting when there is
   a mailbox to receive submissions.

   Layout language: full-bleed slabs, a lot of vertical air, heavy headings,
   and large soft-shadowed cards.

   The scheme is LIGHT throughout — a sky slab, a stone slab, and white. Both
   slab colours are too pale to carry white text (1.7:1 and 1.5:1), so every
   foreground on them is dark. That is a constraint of the colours, not a
   style choice, and it is why there is no --on-dark token any more. */

:root {
  /* SURFACES — four, with a stated relationship, in a fixed rhythm:
     deep → soft → deep → white → ink. Previously there were four unrelated
     tints (#d3d3d3, #f4f4f9, #87ceeb, white) which read as patchy rather than
     rhythmic, and nothing on the page was dark enough to anchor it.

     #87ceeb is no longer a surface. At 1.7:1 on white it could never carry
     text, and as a slab it was too pale to hold anything down. It is now the
     button on the deep slab — a bright chip on dark blue at 8.3:1. */
  --surface:      #ffffff;
  --surface-soft: #eff5f9; /* one blue-tinted neutral, replacing two greys */
  --surface-deep: #006994;
  --surface-ink:  #15405a; /* banner and footer. Lighter than --ink on purpose: the text ink can be near-black, a full-width slab of it cannot. */
  --sky:          #87ceeb; /* button on deep, brand mark, tints */

  /* On light surfaces */
  --ink:       #0d2b3a;
  --text:      #1c3d4d;
  --text-2:    #4a5c66;

  /* On the deep slab. Body sits at 4.6:1, headings and eyebrows at white/6.0 —
     the eyebrow is told apart by size and tracking, not by hue, because every
     blue pale enough to clear 4.5:1 here is indistinguishable from the body. */
  --on-deep:        #cfe4ee;
  --on-deep-strong: #ffffff;

  --accent:          var(--surface-deep); /* fills on light surfaces, white text */
  --accent-hi:       #0a7fb0;
  --accent-on-light: #00506f; /* small text on white and soft alike */

  --line:      #dbe6ed; /* card border — tinted to the blue family, not a stray grey */

  --radius:    16px;
  --radius-sm: 8px;

  /* Large and soft, not tight. A big diffuse lift is most of what makes a card
     read as floating rather than outlined. */
  --shadow:    0 23px 39px rgba(13, 43, 58, .10);
  --shadow-sm: 0 5px 12px rgba(13, 43, 58, .09), 0 2px 4px rgba(13, 43, 58, .06);

  --sans: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
          Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--surface);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.wrap.narrow { max-width: 780px; }

/* --- coming soon banner ------------------------------------------------ */

.banner {
  margin: 0;
  padding: 12px 24px;
  background: var(--surface-ink);
  color: var(--sky);
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- slabs -------------------------------------------------------------- */
/* Full-bleed bands alternating dark and light. The rhythm is the layout: a
   reader scrolling fast should feel distinct chapters rather than one wall. */

.hero {
  background: var(--surface-deep);
  color: var(--on-deep);
}

.band {
  background: var(--surface-deep);
  color: var(--on-deep);
}

.section { background: var(--surface); }
.section--soft { background: var(--surface-soft); }

.hero { padding: 44px 0 76px; position: relative; overflow: hidden; }
.section { padding: 76px 0; }
.band { padding: 50px 0; }

/* Warm bloom behind the headline. Pure CSS — no image request, and it survives
   the img-src CSP without a data: URI. */
.hero::before {
  content: "";
  position: absolute;
  top: -340px;
  left: 50%;
  width: 1000px;
  height: 760px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(135, 206, 235, .28), transparent 70%);
  pointer-events: none;
}

.hero .wrap { position: relative; }

/* --- brand -------------------------------------------------------------- */

.brand {
  display: inline-flex;
  align-items: center;
  color: var(--on-deep-strong);
  text-decoration: none;
}

.hero .brand { margin-bottom: 44px; }

/* Wide-spaced caps, and now the whole mark — there is no icon beside it.
   Three values move together and each is required: caps read visually larger
   than lowercase so the size stays modest, wide tracking at 800 weight becomes
   a wall so the weight is 700, and the tracking is the part that actually
   reads as a masthead rather than a product name.

   letter-spacing appends after the FINAL character too, so the negative margin
   pulls that phantom space back off the right edge. */
.wordmark {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.32em;
  margin-right: -0.32em;
  text-transform: uppercase;
}

/* TEN blue, POINT grey.
   The blue has to be the SKY, not --surface-deep — the hero is #006994, so the
   deep blue would be invisible on its own background.
   Both sit above 3:1, which is the bar that applies here: 21px at weight 700
   clears the 18.66px bold threshold for large text. Below that size this
   pairing would need lightening. */
.wm-ten   { color: var(--sky); }
.wm-point { color: #ccd5da; }

/* --- type --------------------------------------------------------------- */
/* Heavy and large. 800 rather than 650 is most of the difference between
   "document" and "product page". */

.hero h1 {
  margin: 0 0 18px;
  color: var(--on-deep-strong);
  /* Explicit px, not ch. A ch-based max-width resolves against the parent's
     font size, which shredded a headline here once already. */
  max-width: 860px;
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
}

.lede {
  margin: 0 0 30px;
  max-width: 620px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--on-deep);
}

h2 {
  margin: 0 0 14px;
  max-width: 800px;
  font-size: 44px;
  line-height: 1.14;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: var(--ink);
}

.band h2 { color: var(--on-deep-strong); }

.eyebrow {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
}

/* On the deep slab every blue pale enough to clear 4.5:1 is indistinguishable
   from the body copy, so the eyebrow goes white and is told apart by size and
   tracking instead. */
.band .eyebrow { color: var(--on-deep-strong); }

.intro {
  margin: 0 0 36px;
  max-width: 660px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-2);
}

.band-copy {
  margin: 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--on-deep);
}

/* --- buttons ------------------------------------------------------------ */

.actions {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  /* 15px vertical puts the hit area comfortably past the 44px minimum tap
     target while matching the heavier type. */
  padding: 15px 28px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #ffffff;
  text-decoration: none;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.btn:hover { background: var(--accent-hi); transform: translateY(-1px); }

/* On the deep slab the default fill would vanish into the background. This is
   what #87ceeb is for — a bright chip on dark blue at 8.3:1. */
.hero .btn { background: var(--sky); color: var(--ink); }
.hero .btn:hover { background: #a5daf2; }

/* --- capability cards --------------------------------------------------- */
/* One column. Five items in a grid strands an orphan cell whichever way they
   are arranged, and the full-width card reads better at this type size. */

.feats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.feat {
  display: flex;
  gap: 24px;
  padding: 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease;
}

.feat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }

.num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0, 105, 148, .12);
  color: var(--accent-on-light);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.feat h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
}

.feat p {
  margin: 0;
  max-width: 640px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text-2);
}

/* --- notes list --------------------------------------------------------- */

.notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.notes li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.62;
  color: var(--text-2);
}

.notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.notes strong {
  color: var(--ink);
  font-weight: 700;
}

/* --- footer ------------------------------------------------------------- */

.foot {
  background: var(--surface-ink);
  color: var(--on-deep);
  padding: 28px 0;
  font-size: 14.5px;
}

.foot .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.foot-links { display: flex; gap: 24px; flex-wrap: wrap; }

.foot a {
  color: var(--on-deep-strong);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .3);
  transition: color .15s ease;
}

.foot a:hover { color: var(--sky); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 900px) {
  .hero h1 { font-size: 46px; }
  h2 { font-size: 36px; }
  .section { padding: 56px 0; }
  .band { padding: 44px 0; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { padding: 0 20px; }
  .hero { padding: 30px 0 52px; }
  .hero .brand { margin-bottom: 32px; }
  .hero h1 { font-size: 34px; letter-spacing: -0.03em; }
  .lede { font-size: 17px; }
  h2 { font-size: 29px; }
  .intro { font-size: 16.5px; margin-bottom: 40px; }
  .band-copy { font-size: 16.5px; }
  .section { padding: 44px 0; }
  .band { padding: 40px 0; }

  /* Number badge moves above the text — side by side leaves too little for
     the copy once the card padding is subtracted. */
  .feat { flex-direction: column; gap: 16px; padding: 26px 22px; }
  .feat h3 { font-size: 19px; }
  .feat p { font-size: 15.5px; }

  .foot .wrap { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:hover, .feat:hover { transform: none; }
}