/* Home page only. Nothing here is reused by another page; anything that turns
 * out to be shared moves to base.css rather than being imported from here.
 *
 * Sibling cards use `grid-template-rows: subgrid` so a heading that wraps to
 * two lines in one card pushes every card's body down together. Without it the
 * browser gives each card its own row split, the cards are the same height and
 * the text inside them still fails to line up — which is the version that
 * looks accidental.
 */

@import url("/assets/base.css");

/* ── hero slider ────────────────────────────────────────────────────────── */

/* Two products, one hero. The slider is a progressive enhancement: with no
   JavaScript the slides simply stack and every word is still readable, and the
   controls stay hidden because there is nothing for them to control. The
   [data-js] attribute is set by site.js, so the overlay mode never applies
   unless something is there to drive it. */

.hs {
  position: relative;
  padding-block: clamp(44px, 6vw, 84px) clamp(30px, 4vw, 52px);
  /* The glow around the hero shot is a wide, soft shadow; clipping it at the
     section edge is cheaper than letting it reach past and give the page a
     horizontal scrollbar. */
  overflow: hidden;
  background:
    radial-gradient(58ch 40ch at 8% -6%, #f5912033, transparent 60%),
    radial-gradient(50ch 34ch at 88% 108%, #f591201f, transparent 62%),
    var(--bg);
  transition: background .45s ease;
}

.hs__track { display: grid; gap: 56px; }
.hs[data-js="true"] .hs__track { grid-template-areas: "slide"; gap: 0; }
.hs[data-js="true"] .hs__slide {
  grid-area: slide;
  opacity: 0; visibility: hidden;
  transition: opacity .32s ease;
}
.hs[data-js="true"] .hs__slide[data-active="true"] { opacity: 1; visibility: visible; }

.hs__slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: clamp(32px, 4vw, 52px); align-items: center; }
.hs__copy > .pill { margin-bottom: 20px; }
.hs__h { font-size: var(--fs-display); line-height: var(--lh-display); margin-bottom: 18px; }

/* Short claims read better as chips than as a bulleted list, and a chip row
   survives a narrow screen by wrapping rather than by getting taller and
   thinner. Keep the strings to a few words each; a chip that wraps internally
   stops looking like a chip. */
.hs__meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hs__meta li {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 15px 8px 9px;
  border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  color: var(--muted); font-size: var(--fs-micro); white-space: nowrap;
}
.hs__meta li::before {
  content: ""; display: block; flex: none;
  width: 21px; height: 21px; border-radius: 50%;
  background-color: var(--accent-soft); border: 1px solid var(--accent-bd);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f59120' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M3.5 8.4l3 3 6-6.4'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}
@media (max-width: 520px) { .hs__meta li { white-space: normal; } }
.hs__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Hero buttons are taller and fully rounded; the rest of the site keeps the
   10px radius so this reads as the page's one loud control, not a new
   button style. */
.hs__cta .btn { height: var(--ctl-h-lg); padding-inline: 26px; border-radius: 999px; font-size: var(--fs-body); }
.hs__cta .btn--primary { padding-right: 8px; gap: 14px; }
.hs__cta .btn--primary::after {
  content: ""; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: #17110a1f;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317110a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 16px;
}
.hs__cta .btn--primary:hover::after {
  background-color: #100c221f;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100c22' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h13M12 5l7 7-7 7'/></svg>");
}

.hs__ctl { display: none; align-items: center; justify-content: center; gap: 16px; margin-top: 34px; }
.hs[data-js="true"] .hs__ctl { display: flex; }
.hs__btn {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--muted);
  cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.hs__btn:hover { border-color: var(--line-2); color: var(--text); }
.hs__btn svg { width: 17px; height: 17px; }
.hs__dots { display: flex; align-items: center; gap: 0; }
/* The dot draws at 9px and the button around it is 44px, because a dot is a
   thing you tap as often as a thing you click. The gap moves into the button
   so the row does not get wider for it. */
.hs__dot {
  width: 44px; height: 44px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.hs__dot::after {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line-2); transition: background .15s ease, width .15s ease;
}
.hs__dot:hover::after { background: var(--muted); }
.hs__dot[aria-current="true"]::after { width: 26px; border-radius: 999px; background: var(--accent); }

@media (max-width: 940px) {
  .hs__slide { grid-template-columns: minmax(0, 1fr); }
}

/* ── the feature grid ───────────────────────────────────────────────────────
   Twelve cards, all the same shape: an icon, a title, one sentence and the way
   through to the section on the features page that goes into it. The panel
   captures live in the hero, the steps, the service section and on the
   features page — inside a card at a quarter of the page they were texture
   rather than evidence, and they made every card a different height. */

.home-caps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--flow);
  /* Every row as tall as the tallest, so all twelve cards are one height and
     the icons, titles and links line up across the whole grid rather than
     only within a row. */
  grid-auto-rows: 1fr;
}
.home-cap { display: flex; flex-direction: column; gap: var(--gap-sm); padding: var(--card-pad); }
.home-cap__icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-bd);
  color: var(--accent);
}
.home-cap__icon svg { width: 22px; height: 22px; }
.home-cap p { font-size: var(--fs-small); }
/* Pinned to the floor of the card so the twelve links sit on four straight
   lines instead of wherever their sentence happened to end. */
.home-cap__more { margin-top: auto; padding-top: 4px; font-size: var(--fs-small); color: var(--accent); }
.home-cap__more:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1500px) { .home-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1080px) { .home-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Stacked, one height for all twelve would mean the shortest card carrying
   half a screen of nothing, so each takes the height it needs. */
@media (max-width: 620px)  { .home-caps { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; } }

/* ── a stack is a service ───────────────────────────────────────────────── */

.home-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--flow);
}
.home-fact { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: var(--gap-sm); padding: var(--card-pad); }
.home-fact p { font-size: var(--fs-small); }
@media (max-width: 820px) { .home-facts { grid-template-columns: minmax(0, 1fr); } .home-fact { grid-row: auto; grid-template-rows: none; } }

/* ── where to start ─────────────────────────────────────────────────────── */

.home-start { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.home-start h2 { margin: 14px 0 14px; }
.home-start p + p { margin-top: 12px; }
.home-start__acts { display: grid; gap: 12px; justify-items: stretch; }
.home-start__acts .btn { width: 100%; }
@media (max-width: 820px) { .home-start { grid-template-columns: minmax(0, 1fr); } .home-start__acts { justify-items: start; } .home-start__acts .btn { width: auto; } }

/* ── how it works ───────────────────────────────────────────────────────── */

.home-steps {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap);
  margin-top: var(--flow);
  /* Card 01 carries a terminal where the others carry a screen, so it is the
     shorter card. Stretched to match them it was a box with a third of itself
     empty; each card ends where its own content ends instead, and the media
     follows the text on the same gap everywhere. */
  align-items: start;
}
.home-step { display: flex; flex-direction: column; gap: var(--gap-sm); }
.home-step__n { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: .14em; color: var(--accent); }
@media (max-width: 900px) { .home-steps { grid-template-columns: minmax(0, 1fr); } }

/* ── host security, and the sibling product ─────────────────────────────── */

.home-sec { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 52px); align-items: start; }
/* With nothing in the second column the block spans the full width rather
   than leaving a hole beside it. */
.home-sec--wide { grid-template-columns: minmax(0, 1fr); }
.home-sec h2 { margin: 14px 0 14px; }
.home-sec__list { list-style: none; display: grid; gap: 10px; margin-top: 18px; color: var(--muted); font-size: var(--fs-small); }
.home-sec__list li { position: relative; padding-left: 22px; }
.home-sec__list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 8px; height: 8px; border-radius: 2px;
  border: 2px solid var(--accent);
}
@media (max-width: 900px) { .home-sec { grid-template-columns: minmax(0, 1fr); } }


/* This site's hero holds one product rather than two, so the slider's
   controls and its second-slide colour swap are simply never used. The rules
   that remain are the ones a single slide needs. */

/* ── early access ───────────────────────────────────────────────────────── */

/* The product is not released. The site says so where a visitor will see it
   rather than only in the small print, and the one thing it asks for is an
   address to write to when it is. */

.ea { display: grid; gap: var(--gap-sm); }
.ea__form { display: flex; flex-wrap: wrap; gap: 10px; }
.ea__field {
  flex: 0 1 420px; min-width: 0; height: var(--ctl-h); padding-inline: 16px;
  border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body);
}
.ea__field::placeholder { color: var(--faint); }
.ea__field:focus-visible { border-color: var(--accent); }
.ea__form .btn { border-radius: 999px; padding-inline: 26px; }
/* The bot check draws its own box; all the page decides is that it drops below
   the address and the button rather than squeezing into the same row. */
.ea__form [data-turnstile] { flex: 1 0 100%; }
.ea__note { font-size: var(--fs-micro); color: var(--faint); }
/* The status line is empty until something happens, so it must not reserve a
   gap the whole time it has nothing to say. */
.ea__msg:empty { display: none; }
.ea__msg { font-size: var(--fs-small); }
/* Success reads as success from the sentence; a failure has to be seen before
   it is read, so red is the one hue the page keeps outside a screenshot. */
.ea__msg[data-state="ok"] { color: var(--text); }
.ea__msg[data-state="err"] { color: var(--red); }

.status-pill { margin-left: 10px; }

/* ── why the page shows the panel ─────────────────────────────────────────
   The slides carried mock dashboards with invented numbers first, then
   drawings of the architecture, because a product that had not been built
   could not show itself honestly. It is built now: every image under
   /img/screens is a capture of the real panel at 1440x900, and the frame
   around it is the only decoration added. Nothing in them is retouched, so a
   number on the page is a number the product produced. */