@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap");

:root {
  --bg: #08162f;
  --bg-header: rgba(4, 11, 24, 0.96);
  --bg-footer: rgba(3, 9, 19, 0.98);
  --text: #edf4ff;
  --muted: rgba(237, 244, 255, 0.72);
  --accent: #f06a2b;
  --header-height: clamp(4.75rem, 8vh, 6rem);
  --footer-height: 10rem;
  --shell-width: min(76rem, calc(100vw - 2rem));
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

/*
 * The `hidden` attribute must actually hide things.
 *
 * It works by way of a user-agent rule (`[hidden] { display: none }`), which any
 * author `display` declaration outranks. So a `.checkout-divider { display:
 * flex }` silently defeated it, and elements the JavaScript believed it had
 * hidden were still on screen: the "or" separator remained between a card
 * button and nothing, and an empty price row showed a label with no number
 * beside it.
 *
 * Stated once, here, rather than worked around at each site. `!important` is
 * warranted because the attribute is a statement that the element is not to be
 * shown, and an author display rule next to it is an accident rather than an
 * intention.
 */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top, rgba(23, 63, 115, 0.3), transparent 36%),
    linear-gradient(180deg, #091a36 0%, var(--bg) 55%, #061122 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  /* Uniform square dotted grid (dark grey dots) */
  background-image: radial-gradient(circle, rgba(80,90,100,0.28) 1px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.72;
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 11, 24, 0.12), rgba(4, 11, 24, 0.36));
  pointer-events: none;
}

a {
  color: inherit;
}

button,
input,
textarea,
select {
  font: inherit;
}

[id] {
  scroll-margin-top: calc(var(--header-height) + 1.5rem);
}

.shell {
  width: var(--shell-width);
  margin: 0 auto;
}

.app {
  min-height: 100vh;
  padding: calc(var(--header-height) + 4.25rem) 0 0;
}

.site-header,
.site-footer {
  left: 0;
  right: 0;
  z-index: 20;
}

.site-header {
  position: fixed;
  top: 0;
  height: var(--header-height);
  background: var(--bg-header);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.site-footer {
  position: relative;
  min-height: var(--footer-height);
  margin-top: 3rem;
  padding: 1.5rem 0 1.25rem;
  background: var(--bg-footer);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
}

.header-shell {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
  justify-self: start;
}

.brand__mark {
  width: 2.9rem;
  height: 2.9rem;
  object-fit: contain;
  flex: 0 0 auto;
}

.brand__text {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.site-nav {
  justify-self: center;
}

.header-spacer {
  justify-self: end;
  width: 2.9rem;
  height: 2.9rem;
}

.nav-list {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
  margin: 0;
  padding: 0.45rem;
  list-style: none;
  background: #0d2749;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.24);
}

.nav-item {
  position: relative;
}

.nav-item.has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 0.85rem;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8.4rem;
  min-height: 2.75rem;
  padding: 0.75rem 1.2rem;
  border: 1px solid transparent;
  background: #13345f;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-item.is-open > .nav-link,
.nav-item:hover > .nav-link,
.nav-link.is-active {
  background: var(--accent);
  border-color: rgba(255, 255, 255, 0.16);
  outline: none;
}

.nav-link:active {
  transform: translateY(1px);
}

.nav-toggle {
  appearance: none;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 0;
  min-width: 13rem;
  display: grid;
  gap: 0.35rem;
  padding: 0.6rem;
  background: rgba(7, 19, 39, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.nav-dropdown a {
  display: block;
  padding: 0.8rem 0.9rem;
  text-decoration: none;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: var(--text);
  background: rgba(240, 106, 43, 0.14);
  border-color: rgba(240, 106, 43, 0.3);
  outline: none;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: dropdown-slide 180ms ease;
}

/* Set for the moment after a submenu choice, so a link that points at an anchor
   on the page already open -- which scrolls instead of navigating -- does not
   leave the menu sitting on top of the content just asked for. Cleared on the
   next mouseenter, in main.js.

   This has to come after the rule above: both match a dropdown with the same
   specificity, so source order is what decides between them. */
.nav-item.is-dismissed .nav-dropdown {
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
  animation: none;
}

.page-main {
  position: relative;
  z-index: 1;
  padding-top: 0.75rem;
}

.page-shell {
  display: grid;
  gap: 1.4rem;
}

.page-intro {
  display: grid;
  gap: 0.55rem;
  max-width: 44rem;
}

.kicker {
  margin: 0;
  color: #93b5df;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.page-title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 0.96;
  letter-spacing: -0.04em;
}

.page-summary {
  margin: 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.7;
}

.content-frame {
  position: relative;
  padding: clamp(1.5rem, 2.8vw, 2.5rem);
  background: linear-gradient(180deg, rgba(13, 35, 67, 0.82), rgba(7, 20, 40, 0.72));
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.applications-frame {
  margin-top: 10%;
}

.applications-layout {
  display: grid;
  gap: 1rem;
}

.product-stack {
  display: grid;
  gap: 1rem;
}

.product-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(18rem, 30rem);
  gap: 1rem;
  align-items: stretch;
  padding: 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.product-row__media {
  min-width: 0;
  align-self: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.product-row__media img {
  display: block;
  width: 100%;
  height: auto;
  /* Scaling from the default centre origin, so the animation grows in place
     rather than drifting toward a corner. The wrapper's overflow:hidden clips
     the overhang, which keeps the row's own box unchanged -- the text and the
     picker beside it never move. */
  transition: transform 200ms ease;
}

/* Only where a pointer can actually hover. On a touch screen :hover latches
   after a tap and the preview would stay enlarged until something else is
   tapped, which reads as a stuck image rather than a hover effect. */
@media (hover: hover) {
  .product-row__media:hover img {
    transform: scale(1.3);
  }
}

/* A 30% scale is motion in its own right. Snap to the end state instead of
   gliding to it, so the preview still responds but nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .product-row__media img {
    transition: none;
  }
}

.product-row__body {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
  align-self: center;
}

.product-row__body h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.product-row__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.product-row__action {
  display: flex;
  align-self: stretch;
  justify-content: center;
  align-items: center;
  min-width: 0;
  /* Capped and centred to the same width as .product-row__action--checkout
     below, so the two product rows line up. Left as plain flex this stretched
     to the whole grid track -- up to 30rem -- and the freemium column sat
     noticeably wider than the buy column underneath it. */
  width: min(100%, 24rem);
  margin-inline: auto;
  padding-left: 0.35rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

/*
 * The action column for a product row: for the Full version, which system,
 * what it costs, and the payment button; for the Free edition, which system and
 * the download button.
 *
 * A single vertical column rather than the flex row the other product rows use,
 * because these pieces are read in order -- pick your system, then pay or
 * download. Laid out as a row they would sit side by side and read as unrelated
 * things. The two share one rule so the columns cannot drift apart in width or
 * spacing.
 */
.product-row__action--checkout,
.product-row__action--freemium,
.product-row__action--manual {
  display: grid;
  align-content: center;
  justify-items: stretch;
  gap: 0.7rem;
  width: min(100%, 24rem);
  margin-inline: auto;
}

/* The manual's download is a link rather than a button, so it needs the things
   a button gets from the browser and an anchor does not: centred text, no
   underline, and box-sizing that keeps the 1px border inside the 100% width.
   Everything else -- radius, colours, hover -- is inherited from
   .product-download-button so the three rows stay identical. */
a.product-download-button {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

.os-picker {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.os-picker__legend {
  padding: 0;
  margin-bottom: 0.15rem;
  color: var(--muted);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.os-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.6rem;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease,
    color 140ms ease;
}

.os-option:hover {
  border-color: rgba(255, 255, 255, 0.2);
}

/* :has() highlights the chosen option without any JavaScript tracking which
   one is selected, so the two can never disagree. */
.os-option:has(input:checked) {
  border-color: rgba(240, 106, 43, 0.5);
  background: rgba(240, 106, 43, 0.12);
  color: var(--text);
}

.os-option input {
  margin: 0;
  accent-color: var(--accent);
}

.os-option:focus-within {
  outline: 2px solid rgba(240, 106, 43, 0.55);
  outline-offset: 2px;
}

.os-option__name {
  font-weight: 600;
}

/*
 * Deliberately small and low-contrast: it reports a guess about the visitor's
 * machine, and a guess should not compete with the price for attention.
 */
.os-picker__hint {
  margin: 0;
  color: rgba(237, 244, 255, 0.5);
  font-size: 0.75rem;
  line-height: 1.4;
}

.checkout-price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
}

.checkout-price__label {
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.checkout-price__value {
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

.checkout-buttons {
  width: 100%;
}

/*
 * Card payment. Deliberately the first thing offered: it is the method most
 * buyers reach for, and it does not require a Paypal account.
 *
 * A dark, solid button rather than a branded one. Stripe's checkout is reached
 * by redirect, so there is no embedded widget to match, and imitating Paypal's
 * own styling here would suggest a relationship the button does not have.
 */
.checkout-card {
  width: 100%;
}

.checkout-card__button {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: #0a1730;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease,
    transform 140ms ease;
}

.checkout-card__button:hover:not(:disabled),
.checkout-card__button:focus-visible:not(:disabled) {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}

/* Not dimmed to the point of looking broken: while a redirect is in flight the
   button is genuinely working, just no longer accepting clicks. */
.checkout-card__button:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Test mode takes no money while otherwise behaving like a live shop, so it is
   stated rather than left to be discovered. */
.checkout-card__test {
  margin: 0.4rem 0 0;
  color: #ffd2bb;
  font-size: 0.78rem;
  text-align: center;
}

/* The "or" between the card button and the Paypal buttons. Only shown when
   both are actually available. */
.checkout-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  color: rgba(237, 244, 255, 0.45);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.checkout-divider::before,
.checkout-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.checkout-status,
.checkout-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* Reserve the space only once there is something to say, so the button does not
   jump down the page at the moment a status appears. */
.checkout-status:not([hidden]) {
  min-height: 2.4rem;
}

.checkout-status[data-state="error"] {
  color: #ffb7a3;
}

/* Says the chosen build is not published yet. Warmer than the muted text,
   because it is the one line here that a buyer may need to act on. */
.checkout-note:not([hidden]) {
  padding: 0.5rem 0.65rem;
  border: 1px solid rgba(240, 106, 43, 0.28);
  border-radius: 0.6rem;
  background: rgba(240, 106, 43, 0.08);
  color: #ffd2bb;
}

.product-download-button {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.65rem 1rem;
  border: 1px solid rgba(240, 106, 43, 0.38);
  background: rgba(240, 106, 43, 0.14);
  color: var(--text);
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.product-download-button:hover:not(:disabled),
.product-download-button:focus-visible:not(:disabled) {
  background: rgba(240, 106, 43, 0.24);
  border-color: rgba(240, 106, 43, 0.62);
  outline: none;
}

/* Kept for a button that cannot act -- neither edition needs one today, but a
   build that is withdrawn or not yet published does, and it should not look
   pressable when pressing it does nothing. */
.product-download-button:disabled {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(237, 244, 255, 0.55);
  cursor: default;
}

/* .paypal-checkout, .paypal-button-container and .paypal-result-message were
   removed with the dead hosted-button markup they styled. Nothing in the site
   referenced them: the element main.js looked for never existed in the HTML. */

.applications-top-grid,
.applications-bottom-grid {
  display: grid;
  gap: 1rem;
}

.applications-top-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.applications-bottom-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.application-card,
.application-video-card {
  min-width: 0;
}

.application-card {
  display: grid;
  grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.application-card__media {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  place-items: center;
}

.application-card__media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Video previews sit in the same slot as the images, so they follow the same
   rule: full width of the column, natural aspect, never overflowing.
   object-fit keeps the frame intact rather than cropping it -- a cropped demo
   loses exactly the hand and the model it is meant to be showing. */
.application-card__media video {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

/* The images are portrait (4/5) but a screen recording is 16:9, so this card
   gets a landscape box. Without it a widescreen clip sits letterboxed inside a
   tall empty frame with ~100px of dead space above and below. */
.application-card__media--video {
  aspect-ratio: 16 / 9;
}

/* Hovering a tile's picture blows it up in place. The default centre origin is
   what keeps it on the same spot; any other origin would drag the frame toward
   a corner as it grows.

   Unlike the product rows, the overhang is deliberately left visible: the
   picture is meant to spill over the tile's own text and its neighbours so the
   detail can actually be read. Nothing in the layout moves -- transform is
   paint-only, so the card keeps its box and every other element stays put.
   z-index is what lets the spill paint on top instead of sliding underneath
   the cards that follow it in the document; only the hovered tile gets it, so
   at rest the stacking order is untouched. */
.application-card__media img,
.application-card__media video {
  transition: transform 200ms ease;
}

/* Only where a pointer can actually hover: on a touch screen :hover latches
   after a tap and the picture would stay enlarged until something else was
   tapped, which reads as a stuck image rather than a hover effect. */
@media (hover: hover) {
  .application-card__media:hover {
    overflow: visible;
    position: relative;
    z-index: 1;
  }

  .application-card__media:hover img,
  .application-card__media:hover video {
    transform: scale(2);
  }
}

/* A doubling is motion in its own right. Snap to the end state instead of
   gliding to it, so the picture still responds but nothing animates. */
@media (prefers-reduced-motion: reduce) {
  .application-card__media img,
  .application-card__media video {
    transition: none;
  }
}

.application-card__body {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.application-card__body h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.application-card__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.application-video-card {
  display: grid;
  gap: 0.9rem;
  /* Copy on top, player underneath, and the copy takes the slack.
     The two cards share a row, so an equal-width grid already makes the
     players the same size -- but only if their tops line up, which they do not
     while one paragraph is longer than the other. Letting the body absorb the
     difference keeps both videos at the bottom of the row, the same height and
     the same baseline, whatever either says. */
  grid-template-rows: 1fr auto;
}

.content-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent 45%);
  pointer-events: none;
}

.content-frame > * {
  position: relative;
  z-index: 1;
}

.home-grid,
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.content-copy h2,
.section-heading {
  margin: 0 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.15;
}

.content-copy p,
.section-text,
.contact-list,
.legal-list {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
}

.content-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

.action-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 12rem;
  padding: 0.9rem 1.2rem;
  background: var(--accent);
  border: 1px solid transparent;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.action-link:hover,
.action-link:focus-visible {
  background: #ff7a3f;
  outline: none;
}

.action-link--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
}

.action-link--secondary:hover,
.action-link--secondary:focus-visible {
  border-color: rgba(240, 106, 43, 0.35);
  background: rgba(240, 106, 43, 0.12);
}

.action-link:active {
  transform: translateY(1px);
}

.stats-grid,
.cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.info-card,
.feature-card,
.contact-card,
.video-card,
.legal-card {
  padding: 1.15rem;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
}

.info-label {
  display: block;
  margin-bottom: 0.45rem;
  color: #9db9dd;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.info-card p,
.feature-card p,
.contact-card p,
.legal-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.media-frame,
.video-wrap {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.media-frame {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.4rem;
}

/* The home tile carries the intro clip. It fills the frame's width instead of
   being capped the way the old still was: a 25rem cap left the video sitting in
   the middle of the tile with dead space either side of it, which is not what
   "the tile's picture" means. width/height come from the element's own
   attributes, so `height: auto` keeps the 16:9 ratio and the box is reserved
   before the first frame arrives. */
.hero-video {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  background: #000;
}

.cards-grid {
  margin-top: 0;
}

.feature-card {
  display: grid;
  gap: 0.9rem;
}

.feature-card h2,
.video-card h2,
.contact-card h2,
.legal-card h2 {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.feature-list,
.legal-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  line-height: 1.7;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.video-card {
  display: grid;
  gap: 0.9rem;
}

.video-wrap video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.contact-stack {
  display: grid;
  gap: 1rem;
}

.contact-list {
  display: grid;
  gap: 0.9rem;
}

.contact-row {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--text);
  text-decoration: none;
}

.contact-row i {
  color: var(--accent);
}

.contact-button {
  justify-content: flex-start;
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.contact-button:hover,
.contact-button:focus-visible,
.contact-row:hover,
.contact-row:focus-visible {
  color: #fff;
  outline: none;
}

.footer-shell {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

.footer-title {
  margin: 0 0 0.85rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-copy,
.footer-column a,
.footer-note {
  color: rgba(237, 244, 255, 0.64);
  line-height: 1.7;
  text-decoration: none;
}

.footer-column {
  display: grid;
  gap: 0.35rem;
}

.footer-column a:hover,
.footer-column a:focus-visible {
  color: #fff;
  outline: none;
}

.footer-note {
  margin-top: 0.85rem;
  font-size: 0.92rem;
}

.email-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 11, 24, 0.72);
  z-index: 40;
}

.email-dialog {
  width: min(30rem, 100%);
  padding: 1.4rem;
  background: #f7fafc;
  color: #08162f;
  border: 1px solid rgba(8, 22, 47, 0.12);
  box-shadow: var(--shadow);
}

.email-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #08162f;
  cursor: pointer;
}

.email-body {
  display: grid;
  gap: 0.5rem;
}

.email-label {
  margin: 0;
  color: #4a5568;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.email-text {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
}

@keyframes dropdown-slide {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 64rem) {
  :root {
    --footer-height: 12.5rem;
  }

  .header-shell {
    grid-template-columns: auto 1fr;
  }

  .site-nav {
    justify-self: end;
  }

  .header-spacer {
    display: none;
  }

  .nav-list {
    overflow-x: auto;
    max-width: 100%;
  }

  .home-grid,
  .contact-grid,
  .video-grid,
  .footer-shell {
    grid-template-columns: 1fr;
  }

  .applications-top-grid,
  .applications-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  :root {
    --header-height: 5.5rem;
    --footer-height: 17rem;
    --shell-width: min(100vw - 1rem, 76rem);
  }

  .app {
    padding-top: calc(var(--header-height) + 2.75rem);
  }

  .header-shell {
    gap: 0.75rem;
  }

  .brand__text {
    letter-spacing: 0.16em;
    font-size: 0.95rem;
  }

  .nav-list {
    gap: 0.35rem;
    padding: 0.35rem;
  }

  .nav-link {
    min-width: 7rem;
    padding-inline: 0.95rem;
    font-size: 0.74rem;
  }

  .nav-dropdown {
    left: auto;
    right: 0;
  }

  .stats-grid,
  .cards-grid {
    grid-template-columns: 1fr;
  }

  .product-row {
    grid-template-columns: 1fr;
  }

  .product-row__action {
    min-height: auto;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .paypal-checkout,
  .product-row__action--checkout {
    width: 100%;
  }

  .application-card {
    grid-template-columns: 1fr;
  }

  .application-card__media {
    aspect-ratio: 16 / 9;
  }

  .content-frame {
    padding: 1.2rem;
  }
}@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600;700;800&display=swap");

:root{
  --ink: 23 9 69; /* #170945 */
  --accent: 227 69 7; /* #e34507 */

  --bg: 11 6 26;
  --glass: 255 255 255;

  --r-lg: 1.125rem;
  --r-md: 0.875rem;

  --border: 255 255 255;
  --border-weak: 255 255 255;

  --shadow: 0 18px 40px rgba(0,0,0,.32);

  --app-pad-x: 2.25rem;
  --app-pad-y: 1.75rem;

  --frame-w: min(90vw, 87.5rem);
  --frame-h: min(45rem, calc(100vh - 13.125rem));
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  font-family: "Oxanium", "Orbitron", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: rgba(255,255,255,.92);

  background: #0a0a38;
}

/* Background artwork (blurred squares) */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-color: #0a0a38;
  background-image:
    linear-gradient(#020217, #020217),
    linear-gradient(#03034d, #03034d),
    linear-gradient(#111145, #111145);
  background-repeat: no-repeat;
  background-size:
    42vmin 42vmin,
    54vmin 54vmin,
    40vmin 22vmin;
  background-position:
    8vmin 8vmin,
    calc(100% - 60vmin) 22vmin,
    calc(100% - 46vmin) calc(100% - 26vmin);

  filter: blur(70px);
  transform: translateZ(0);
  pointer-events: none;
}

body::after{
  content: "";
  position: fixed;
  width: 30vmin;
  height: 30vmin;
  left: 42vw;
  top: 52vh;
  z-index: -2;
  background: #090769;

  transform: translate(-50%, -50%) rotate(60deg);
  filter: blur(70px);
  pointer-events: none;
}

.app{
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--app-pad-y) var(--app-pad-x);
  gap: 22px;
  position: relative;
}

.shell{
  width: var(--frame-w);
  margin: 0 auto;
}

.corner-logo{
  position: absolute;
  top: var(--app-pad-y);
  left: var(--app-pad-x);
  z-index: 1;
  width: clamp(5rem, 10vw, 8rem);
}

.corner-logo__img{
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

.topbar{ display:flex; justify-content:center; }

.topbar,
.stage,
.bottombar{
  position: relative;
  z-index: 2;
}

.bottombar{ display:flex; justify-content:center; }

.tabs{
  display: flex;
  align-items: center;
  gap: 2.125rem;
}

.glass{
  position: relative;
  border: 0px solid rgba(var(--ink), .18);
  background:
    linear-gradient(180deg, rgba(125,125,125,.25), rgba(50,50,50,.25));
  color: #e84d05;

  border-radius: 0.75rem;
  padding: 0.75rem 1.125rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .2px;

  box-shadow:
    0 0px 0 rgba(255,255,255,.54) inset,
    0 0px 0 rgba(255,255,255,.10) inset,
    -18px 24px 60px rgba(0,0,0,.34),
    -6px 10px 24px rgba(0,0,0,.24);

  -webkit-backdrop-filter: blur(2.125rem) saturate(175%);
  backdrop-filter: blur(2.125rem) saturate(175%);
}

.glass::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background:
    radial-gradient(7.5rem 5rem at 20% 20%, rgba(var(--accent), .38), transparent 60%),
    radial-gradient(10rem 6.875rem at 85% 30%, rgba(var(--ink), .45), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,0));
  opacity: .42;
  pointer-events: none;
  mix-blend-mode: normal;
}

.glass::after{
  content: "";
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 42%;
  border-radius: calc(12px - 2px);
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  opacity: .26;
  pointer-events: none;
}

.tab{
  cursor: pointer;
  font-size: clamp(1.25rem, 2.6vw, 2.75rem);
  padding: 0.6em 0.8em;
  text-decoration: none;
}

.tab.is-active{
  border-color: rgba(var(--accent), .55);
  box-shadow:
    0 1px 0 rgba(255,255,255,.60) inset,
    0 -1px 0 rgba(255,255,255,.22) inset,
    0 0 0 2px rgba(var(--accent), .22),
    -20px 28px 70px rgba(0,0,0,.36),
    -6px 12px 28px rgba(0,0,0,.26);
}

.tab:focus-visible,
.btn:focus-visible{
  outline: 2px solid rgba(var(--accent), .65);
  outline-offset: 3px;
}

.stage{
  display:flex;
  align-items: stretch;
  justify-content: center;
}

.stage > .shell{
  display: flex;
  align-items: stretch;
}

.panel{
  width: var(--frame-w);
  height: auto;
  min-height: 100%;
  z-index: 2;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
  box-shadow:
    0 1px 0 rgba(255,255,255,.22) inset,
    0 -1px 0 rgba(255,255,255,.10) inset,
    0 26px 70px rgba(0,0,0,.24);

  -webkit-backdrop-filter: blur(2.125rem) saturate(140%);
  backdrop-filter: blur(2.125rem) saturate(140%);
  position: relative;
  overflow: hidden;
}

/* Big rectangle: gradient + perlin-noise-like texture */
.panel__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 540px at 12% 42%, rgba(255,255,255,.18), transparent 62%),
    radial-gradient(1200px 820px at 76% 58%, rgba(255,255,255,.10), transparent 66%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
}

.panel__bg::before{
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  background-size: 340px 340px;
  opacity: .22;
  mix-blend-mode: overlay;
  transform: rotate(-8deg);
}

.panel__bg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0));
  opacity: .35;
}

.panel__content{
  position: relative;
  height: 100%;
  padding: 2rem 1.75rem;
  display: grid;
  grid-template-rows: 1fr auto;
}

.contact-stack{
  margin-top: 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.contact-row{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.90);
  font: inherit;
  font-size: clamp(1rem, 1.6vw, 1.375rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.contact-row i{
  color: #e84d05;
  font-size: 1em;
}

.contact-row:focus-visible{
  outline: 2px solid rgba(var(--accent), .65);
  outline-offset: 3px;
}

.panel__media{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1.25rem;
  align-items: start;
  justify-items: start;
  margin-top: 1.25rem;
}
.video-wrap{
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  border: 1px solid rgba(255,255,255,.14);
}
.video-wrap iframe,
.video-wrap video{
  width: 100%;
  height: 100%;
  display:block;
}

.video-wrap video{ object-fit: contain; }

@media (max-width: 57.5em){
  .video-wrap{ width: 100%; }
  .panel__content{ padding: 1.75rem; }
}

.copy{ max-width: 65ch; }

.panel--home .copy{
  width: 90%;
  max-width: none;
  margin-inline: auto;
  text-align: center;
}

/* About page: use more horizontal space (reduce empty right side) */
.panel--about .copy{
  max-width: 90ch;
}
.panel--about .video-wrap{
  max-width: 100%;
}
.title{
  margin: 0;
  font-size: clamp(44px, 5.4vw, 74px);
  letter-spacing: .3px;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.subtitle{
  margin: 14px 0 0 0;
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  opacity: .9;
}

.is-hidden{ display: none; }

.cta{
  display: flex;
  gap: 1.75rem;
  align-items: flex-end;
  justify-content: flex-start;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 10ch;
  font-size: clamp(1.25rem, 2.6vw, 2.75rem);
  padding: 0.6em 0.8em;
  text-decoration: none;
  cursor: pointer;
}

.btn:active,
.tab:active{
  transform: translateY(1px);
}

.info-row{
  display: flex;
  align-items: center;
  gap: 1.375rem;
}

.info-chip{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 400;
}

button.info-chip{ cursor: pointer; }

.info-chip:focus-visible{
  outline: 2px solid rgba(var(--accent), .65);
  outline-offset: 3px;
}

.info-chip i{
  color: currentColor;
  font-size: 1em;
}

/* Email modal styles */
.email-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.email-dialog{
  max-width: min(92vw, 32rem);
  width: 88%;
  border-radius: 0.875rem;
  overflow: hidden;
}
.email-inner{
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.88));
  color: #0a0a38;
  padding: 1.375rem;
  box-shadow: 0 18px 48px rgba(0,0,0,.36);
  border: 1px solid rgba(0,0,0,.06);
  -webkit-backdrop-filter: blur(0.375rem) saturate(120%);
  backdrop-filter: blur(0.375rem) saturate(120%);
}
.email-close{
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  position: absolute;
  right: 1.125rem;
  top: 1.125rem;
  cursor: pointer;
  color: #333;
}
.email-body{ padding-top: 6px; text-align: center; }
.email-text{ font-size: 1.25rem; font-weight: 700; letter-spacing: .4px; margin: 0; }

@media (max-width: 47.5em){
  :root{ --app-pad-x: 1rem; --app-pad-y: 1.125rem; }
  .app{ padding: var(--app-pad-y) var(--app-pad-x); gap: 14px; }
  .corner-logo{ width: clamp(4.5rem, 16vw, 7rem); }
  .tabs{ gap: 14px; flex-wrap: wrap; }
  .tab{ font-size: clamp(1.1rem, 5vw, 1.75rem); padding: 0.6em 0.8em; }
  .btn{ font-size: clamp(1.1rem, 5vw, 1.75rem); min-inline-size: 8ch; padding: 0.6em 0.8em; }
  .panel__content{ padding: 22px; }
  .info-row{ flex-wrap: wrap; gap: 12px; }
  .info-chip{ font-size: 1.125rem; padding: 0.625rem 0.75rem; }
}

/* Layout fixes: ensure footer is the true page bottom and nudge title down */
html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.app {
  /* allow main content to grow and keep footer at the bottom */
  flex: 1 0 auto;
  /* reset any conflicting min-height rules so flex sizing works */
  min-height: auto;
  /*
   * The header is fixed, so the page has to start below it.
   *
   * This is the last of three .app rules, and so the one that wins -- but it is
   * also the only one with no opinion about the top of the page, so the padding
   * fell to an earlier rule that is symmetric and predates the fixed header.
   * That left content starting 28px down while the header occupied the first
   * 80px: the line above the headline on the home page sat behind the header
   * and needed a scroll to be read.
   */
  padding-top: calc(var(--header-height) + var(--app-pad-y));
}
.site-footer {
  flex-shrink: 0;
}
.page-main {
  padding-top: 2rem; /* move title a little lower */
}

/* --- Licence key popup ------------------------------------------------------
   Shown immediately after a licence is issued, so the key can be copied or
   emailed without hunting for it in the panel. Fixed overlay, centred, with the
   key row first because that is the thing the customer came for. */

.key-overlay {
  position: fixed;
  inset: 0;
  z-index: 60; /* above the contact modal, which sits at 40 */
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 11, 24, 0.78);
  animation: key-fade-in 140ms ease-out;
}

.key-dialog {
  width: min(32rem, 100%);
  padding: 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 1rem;
  background: #0d1b36;
  box-shadow: var(--shadow);
  color: var(--text);
  animation: key-rise 160ms ease-out;
}

@keyframes key-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes key-rise {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Respect a reduced-motion preference rather than animating regardless. */
@media (prefers-reduced-motion: reduce) {
  .key-overlay,
  .key-dialog {
    animation: none;
  }
}

.key-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.key-dialog__title {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.key-dialog__close {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.key-dialog__close:hover,
.key-dialog__close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  outline: none;
}

/*
 * A line under the heading, e.g. "We have emailed this key to you@example.com."
 *
 * Why the key is on this screen at all matters to a buyer who has just paid:
 * it tells them the key is also in their inbox, so closing this window is safe.
 */
.key-dialog__note {
  margin: -0.4rem 0 0.9rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.key-dialog__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.key-dialog__icon {
  flex: none;
  color: var(--accent);
}

.key-dialog__value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.34);
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  user-select: all; /* one click selects the whole key */
}

/* The download sits directly under the key, because the key is useless
   without the app. */
.key-dialog__row--download {
  margin-top: 0.6rem;
}

.key-dialog__download {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0.7rem;
  background: rgba(0, 0, 0, 0.24);
  color: #9fc4ff;
  font-size: 0.78rem;
  text-decoration: none;
  /* Long URLs must not stretch the dialog; wrap them and keep the row intact. */
  overflow-wrap: anywhere;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.key-dialog__download:hover,
.key-dialog__download:focus-visible {
  border-color: rgba(159, 196, 255, 0.5);
  background: rgba(159, 196, 255, 0.12);
  color: #cfe0ff;
  text-decoration: underline;
  outline: none;
}

/*
 * The same box, for a platform whose build is not published yet.
 *
 * It keeps the shape of the download row so the popup looks the same either
 * way, but drops the link styling: there is nothing here to click, and making
 * it look clickable would be the bug.
 */
.key-dialog__download--pending {
  color: var(--muted);
  font-style: italic;
  cursor: default;
}

/*
 * What to do with the key.
 *
 * Placed last, after the key, the download and any resend button, because it
 * describes the step that comes after all of those. Separated by a rule so it
 * reads as closing advice rather than as another thing to act on here.
 */
.key-dialog__instructions {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}

.key-dialog__instructions strong {
  color: var(--text);
}

/*
 * The extracted path, set apart from the sentence around it.
 *
 * It is the one detail here a buyer may have to retype, so it should be
 * unmistakably a path and not a word in a sentence. Overflow breaks rather than
 * stretching the dialog: a long path is still shorter than the download URL
 * above it, but the dialog's width must not depend on which build was bought.
 */
.key-dialog__path {
  padding: 0.08rem 0.34rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 0.35rem;
  background: rgba(0, 0, 0, 0.3);
  color: var(--text);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.94em;
  overflow-wrap: anywhere;
  user-select: all;
}

.key-dialog__copy,
.key-dialog__send {
  flex: none;
  min-height: 2.6rem;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.key-dialog__copy {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
}

.key-dialog__copy:hover,
.key-dialog__copy:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.key-dialog__copy.is-done {
  border-color: rgba(143, 240, 176, 0.5);
  background: rgba(143, 240, 176, 0.16);
  color: #8ff0b0;
}

/* The toast keeps its line height at all times so the dialog does not jump
   when the message appears or fades. */
.key-dialog__toast {
  margin: 0.55rem 0 0;
  min-height: 1.15rem;
  color: var(--muted);
  font-size: 0.82rem;
  opacity: 0;
  transition: opacity 200ms ease;
}

.key-dialog__toast.is-visible {
  opacity: 1;
}

.key-dialog__toast[data-state="error"] {
  color: #ff9a8a;
}

.key-dialog__row--send {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.key-dialog__email {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.6rem;
  padding: 0.55rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
}

.key-dialog__email::placeholder {
  color: rgba(237, 244, 255, 0.38);
}

.key-dialog__email:focus-visible {
  border-color: rgba(240, 106, 43, 0.62);
  outline: none;
}

.key-dialog__send {
  border: 1px solid rgba(240, 106, 43, 0.4);
  background: rgba(240, 106, 43, 0.16);
  color: var(--text);
}

.key-dialog__send:hover:not(:disabled),
.key-dialog__send:focus-visible:not(:disabled) {
  background: rgba(240, 106, 43, 0.28);
  border-color: rgba(240, 106, 43, 0.66);
  outline: none;
}

/*
 * The resend button, which is the whole row rather than one half of it.
 *
 * The email field it sits beside in the test panel is absent here: the address
 * is the one the payment came from, not something the buyer chooses, so the
 * button takes the full width and reads as a single action.
 */
.key-dialog__send--wide {
  flex: 1 1 auto;
  width: 100%;
}

.key-dialog__send:disabled {
  cursor: progress;
  opacity: 0.6;
}

@media (max-width: 30rem) {
  /* Stack on a narrow screen so the key keeps a readable width. */
  .key-dialog__row--send {
    flex-direction: column;
    align-items: stretch;
  }

  .key-dialog__email,
  .key-dialog__send {
    width: 100%;
  }
}