/* home2.css (5 Oct 2026)
   The measurement-first homepage: a phone in the hero playing real exports,
   "How it works" in three steps, and the two-up cards under it.
   New components only. Colours, type and buttons come from splash.css. */

/* ─── Hero: the headline is three short lines now, a size down so the action stays on the first screen ─── */
.fx-hero .fx-h1-stack { font-size: clamp(40px, 5.7vw, 76px); }
.fx-hero .fx-h1-stack > em { align-self: flex-start; }   /* as wide as its words, so the gradient covers all of them */
.fx-js .fx-hero .fx-clips { animation: fxRise .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: .54s; }
.fx-hero.is-settled .fx-clips { animation: none; }
@media (max-width: 560px) {
  .fx-hero .fx-h1-stack { font-size: clamp(30px, 9.4vw, 52px); }
  .fx-hero .fx-h1-stack > span, .fx-hero .fx-h1-stack > em { white-space: normal; }   /* never wider than the screen */
}

/* ─── Hero: the phone ─── */
.fx-hero .fx-hero-art.is-phone { gap: 18px; perspective: 1600px; }
.fx-phone-stage { position: relative; display: grid; place-items: center; padding: 8px 0 26px; width: 100%; }
.fx-phone-stage::before {            /* the pool of light the phone sits in */
  content: ""; position: absolute; left: 50%; top: 52%; width: 120%; aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(124, 58, 237, .42) 0%, rgba(34, 211, 238, .12) 46%, rgba(34, 211, 238, 0) 70%);
  filter: blur(6px); pointer-events: none;
}
.fx-phone {
  --w: clamp(212px, 23vw, 292px);
  position: relative; width: var(--w); aspect-ratio: 9 / 16.6;
  padding: calc(var(--w) * .034);
  border-radius: calc(var(--w) * .135);
  background: linear-gradient(145deg, #4a4366 0%, #1c1930 34%, #0e0c1a 70%, #2e2947 100%);
  transform: rotateY(-19deg) rotateX(7deg) rotateZ(2.2deg);
  transform-style: preserve-3d;
  /* the body's thickness, stacked away from the viewer, then the cast shadow */
  box-shadow:
    1px 1px 0 #3b3557, 2px 2px 0 #373150, 3px 3px 0 #322c4a, 4px 4px 0 #2d2843,
    5px 5px 0 #28233c, 6px 6px 0 #231f35, 7px 7px 0 #1f1b2f, 8px 8px 0 #1a1728,
    9px 9px 0 #161322, 10px 10px 0 #120f1c,
    34px 54px 70px rgba(5, 4, 12, .62), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: fx-phone-float 7s ease-in-out infinite;
  will-change: transform;
}
@keyframes fx-phone-float {
  0%, 100% { transform: rotateY(-19deg) rotateX(7deg) rotateZ(2.2deg) translateY(0); }
  50%      { transform: rotateY(-15deg) rotateX(5deg) rotateZ(1.6deg) translateY(-10px); }
}
.fx-phone-screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: calc(var(--w) * .104); background: #07060d;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
.fx-phone-screen video, .fx-phone-screen img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.fx-phone-screen video { opacity: 0; transition: opacity .45s ease; }
.fx-phone-screen video.is-on { opacity: 1; }
.fx-phone-screen::after {            /* glass: one soft highlight across the top corner */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(128deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 22%, rgba(255, 255, 255, 0) 40%);
}
.fx-phone-cam {
  position: absolute; left: 50%; top: calc(var(--w) * .058); z-index: 2;
  width: calc(var(--w) * .058); aspect-ratio: 1 / 1; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 38% 34%, #3a3560 0%, #0b0a14 62%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55);
}
.fx-phone-bar {                      /* progress of the clip that is playing */
  position: absolute; left: 12%; right: 12%; bottom: calc(var(--w) * .03); height: 3px; z-index: 2;
  border-radius: 99px; background: rgba(255, 255, 255, .18); overflow: hidden;
}
.fx-phone-bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; }

/* The three statements beside the phone. Each is also the switch for its clip. */
.fx-clips { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-clip {
  appearance: none; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0 14px;
  padding: 9px 14px 9px 12px; border-radius: 16px; width: 100%; max-width: 34em;
  transition: background .25s ease, opacity .25s ease;
  opacity: .46;
}
.fx-clip:hover { opacity: .8; }
.fx-clip[aria-pressed="true"] { opacity: 1; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10); }
.fx-clip:focus-visible { outline: 2px solid var(--fx-cyan); outline-offset: 2px; }
.fx-clip-k {
  font-family: "Barlow Condensed FX", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--fx-cyan); width: 5.4em;
}
.fx-clip-t { font-size: clamp(17px, 1.55vw, 21px); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; color: #fff; }
.fx-clip-t em { font-style: normal; color: var(--fx-onDark); font-weight: 600; display: none; }
.fx-clip[aria-pressed="true"] .fx-clip-t em { display: inline; }   /* the detail shows for the clip that is playing */
.fx-hero .fx-lede.is-tight { max-width: 31em; }

/* ─── How it works ─── */
.fx-how { scroll-margin-top: calc(var(--header-h, 64px) + 28px); }
.fx-how-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1.5px solid var(--fx-ink); }
.fx-how-head h2 { margin: 0; font-size: clamp(34px, 5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; color: var(--fx-ink); }
.fx-how-head p { margin: 0; max-width: 26em; font-size: 15.5px; line-height: 1.45; color: var(--fx-ink-soft); text-align: right; }
.fx-steps { margin-top: clamp(34px, 5vw, 56px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 30px); }
.fx-step {
  position: relative; padding: 16px 16px 26px; border-radius: 30px; background: #fff;
  box-shadow: 0 1px 0 rgba(13, 11, 22, .04), 0 22px 50px rgba(27, 24, 48, .10), inset 0 0 0 1px rgba(13, 11, 22, .06);
}
.fx-step-n {
  position: absolute; left: -10px; top: -14px; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 14px; background: #fff; color: var(--fx-ink);
  font-size: 21px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--fx-ink), 0 8px 18px rgba(13, 11, 22, .14);
}
.fx-step-art {
  position: relative; aspect-ratio: 1 / 1; border-radius: 20px; overflow: hidden;
  background: radial-gradient(90% 70% at 20% 0%, rgba(124, 58, 237, .5) 0%, rgba(124, 58, 237, 0) 60%), linear-gradient(162deg, #1b1830 0%, #2b2445 56%, #171427 100%);
}
.fx-step-art.is-cyan { background: radial-gradient(90% 70% at 80% 0%, rgba(34, 211, 238, .34) 0%, rgba(34, 211, 238, 0) 60%), linear-gradient(162deg, #171427 0%, #241f3c 56%, #1b1830 100%); }
.fx-step-art.is-mint { background: radial-gradient(90% 70% at 50% 100%, rgba(34, 211, 174, .30) 0%, rgba(34, 211, 174, 0) 60%), linear-gradient(162deg, #1b1830 0%, #2b2445 56%, #171427 100%); }
.fx-shot {                           /* an app screen, shown as a phone with no chrome */
  display: block; position: absolute; left: 50%; top: 9%; width: 52%; transform: translateX(-50%) rotate(-4deg);
  border-radius: 18px; overflow: hidden; background: #0d0b16;
  box-shadow: 0 0 0 5px #100e1c, 0 0 0 6px rgba(255, 255, 255, .14), 0 26px 50px rgba(5, 4, 12, .55);
}
.fx-step:nth-child(2) .fx-shot { transform: translateX(-50%) rotate(3deg); }
.fx-step:nth-child(3) .fx-shot { transform: translateX(-50%) rotate(-2deg); }
.fx-shot img { display: block; width: 100%; height: auto; }
.fx-step h3 { margin: 22px 6px 0; font-size: clamp(21px, 2vw, 26px); font-weight: 800; letter-spacing: -0.035em; color: var(--fx-ink); }
.fx-step p { margin: 8px 6px 0; font-size: 15.5px; line-height: 1.5; color: var(--fx-ink-soft); }

/* ─── The two-up: one dark card, two light ones ─── */
.fx-duo { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(16px, 2.4vw, 30px); align-items: stretch; }
.fx-duo-dark {
  position: relative; overflow: hidden; border-radius: 34px; color: #fff; min-height: 560px;
  padding: clamp(26px, 3.4vw, 44px);
  background: radial-gradient(80% 60% at 10% 0%, rgba(124, 58, 237, .46) 0%, rgba(124, 58, 237, 0) 62%), linear-gradient(165deg, #171427 0%, #0d0b16 100%);
}
.fx-duo-dark h2 { margin: 0; font-size: clamp(34px, 4.4vw, 58px); font-weight: 800; letter-spacing: -0.05em; line-height: .98; }
/* The outlined line. A stroke on see-through letters also draws the joins
   INSIDE each letter (this typeface builds an e, an a and an n from pieces
   that overlap), which reads as a rendering fault. So the letters are filled
   with the card's own dark violet and the fill is painted over the stroke:
   only the outer half of the stroke is left, and the inside is clean. */
.fx-duo-dark h2 em {
  font-style: normal; color: #221a42; letter-spacing: -0.03em;
  -webkit-text-stroke: .036em rgba(255, 255, 255, .92); paint-order: stroke fill;
}
.fx-duo-sub { margin: 12px 0 0; font-size: 16px; font-weight: 700; color: var(--fx-onDark); }
.fx-duo-body { margin-top: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; align-items: start; }
.fx-duo-shot { position: relative; margin-bottom: -40%; }
.fx-duo-shot .fx-shot { position: relative; left: auto; top: auto; width: 100%; transform: rotate(-7deg) translateY(4%); border-radius: 22px; }
.fx-duo-lines { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 34px); padding-top: 6px; }   /* above the phone, should the two ever meet */
.fx-duo-lines p { margin: 0; font-size: clamp(19px, 2vw, 25px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; color: rgba(255, 255, 255, .5); }
.fx-duo-lines p b { color: #fff; font-weight: 800; }
.fx-duo-lines p b.is-grad { background: linear-gradient(92deg, #fb923c, #a78bfa 55%, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-duo-right { display: grid; grid-template-rows: auto 1fr; gap: clamp(16px, 2.4vw, 30px); }
.fx-card {
  border-radius: 34px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 0 rgba(13, 11, 22, .04), 0 22px 50px rgba(27, 24, 48, .10), inset 0 0 0 1px rgba(13, 11, 22, .06);
}
.fx-card h3 { margin: 0; padding: clamp(24px, 3vw, 38px) clamp(24px, 3vw, 38px) 0; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--fx-ink); }
.fx-card h3.is-sm { font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.03em; line-height: 1.15; }
.fx-trio { margin-top: 22px; padding: 0 8px 8px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.fx-trio span { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #0d0b16; }
.fx-trio span:first-child { border-radius: 0 0 0 26px; }
.fx-trio span:last-child { border-radius: 0 0 26px 0; }
.fx-trio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; display: block; }
.fx-trio span:nth-child(2) img { object-position: 50% 84%; }
.fx-trio span:nth-child(3) img { object-position: 50% 16%; }
.fx-trio i {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 9px; border-radius: 99px; font-style: normal;
  font-size: 11.5px; font-weight: 800; color: #fff; background: rgba(13, 11, 22, .62); backdrop-filter: blur(6px);
}
.fx-kinds { padding: 18px clamp(14px, 2vw, 26px) clamp(20px, 2.6vw, 30px); display: flex; flex-wrap: wrap; gap: 10px; }
.fx-kind {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 16px 0 7px; border-radius: 99px;
  font-size: 14.5px; font-weight: 750; color: var(--fx-ink); background: #f5f3fb; box-shadow: inset 0 0 0 1px rgba(13, 11, 22, .06);
}
.fx-kind b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.fx-kind svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fx-kind.k1 b { background: #7c3aed; } .fx-kind.k2 b { background: #0891b2; } .fx-kind.k3 b { background: #059669; }
.fx-kind.k4 b { background: #ea580c; } .fx-kind.k5 b { background: #db2777; } .fx-kind.k6 b { background: #2563eb; }
.fx-kind.k7 b { background: #0d0b16; } .fx-kind.k8 b { background: #9333ea; } .fx-kind.k9 b { background: #0f766e; }
.fx-kind.k10 b { background: #556b2f; }   /* tactical kit: a ruck, vest, helmet or carried weapon counted in the load */
.fx-kind.is-more { background: none; box-shadow: none; color: var(--fx-ink-soft); padding-left: 6px; }

/* ─── Narrow screens ─── */
@media (max-width: 900px) {
  .fx-phone { --w: clamp(190px, 52vw, 250px); }
  .fx-clips { margin-top: 20px; }
  .fx-how-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fx-how-head p { text-align: left; }
  .fx-steps { grid-template-columns: 1fr; gap: 34px; max-width: 460px; margin-left: auto; margin-right: auto; }
  .fx-step-n { left: -6px; }
  .fx-duo { grid-template-columns: 1fr; }
  .fx-duo-dark { min-height: 0; padding-bottom: 0; }
  .fx-duo-shot { margin-bottom: -30%; }
}
@media (max-width: 480px) {
  .fx-clip { padding: 8px 10px; gap: 0 10px; }
  .fx-clip-k { width: 5em; font-size: 12px; }
  .fx-duo-body { grid-template-columns: 1fr; }
  .fx-duo-shot { order: 2; width: 62%; margin: 0 auto -34%; }
  .fx-kind { height: 42px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fx-phone { animation: none; }
  .fx-phone-screen video { transition: none; }
}

/* ─── Explore the features: tiles, all in view (5 Oct 2026)
   A grid, not a slide row: four across, two rows, every feature on screen at
   once. Each tile is a white card with its photo set into it. The top third
   of the card is plain white for the type, and the photo comes up out of that
   white through a long fade, so no edge of the picture shows at the top.
   The head matches "How it works"; the plus is the outlined square of the
   step numbers. ─── */
.fx-features .fx-features-head { padding-bottom: 18px; border-bottom: 1.5px solid var(--fx-ink); }
.fx-features .fx-features-head h2 { font-size: clamp(34px, 5vw, 60px); line-height: 1; }
.fx-features .fx-features-head .fx-eyebrow { margin-bottom: 10px; }
.fx-features .fx-features-nav { display: none; }                 /* nothing to slide */
.fx-features .fx-fcards {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(30px, 4vw, 48px) 0 0; padding: 0; overflow: visible; scroll-snap-type: none;
}
.fx-features .fx-fc {
  flex: none; width: auto; max-width: none; aspect-ratio: 3 / 4.25;
  border-radius: 30px; background: #fff;
  box-shadow: 0 1px 0 rgba(13, 11, 22, .04), 0 22px 50px rgba(27, 24, 48, .12), inset 0 0 0 1px rgba(13, 11, 22, .07);
}
.fx-features .fx-fc:hover { box-shadow: 0 1px 0 rgba(13, 11, 22, .04), 0 32px 64px rgba(27, 24, 48, .20), inset 0 0 0 1px rgba(13, 11, 22, .10); }
/* the photo, set into the card: a margin of white at the sides and the foot */
.fx-features .fx-fc-img {
  inset: auto 10px 10px 10px; top: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  border-radius: 22px;
}
/* The white the photo rises out of. Solid over the top third, then a long
   eased run to clear, wider than the card so it also covers the photo's top
   corners. No stop is abrupt, so there is no line to see. */
.fx-features .fx-fc-fade {
  inset: 0 0 auto 0; height: 78%;
  background: linear-gradient(180deg,
    #fff 0%, #fff 36%,
    rgba(255, 255, 255, .985) 41%, rgba(255, 255, 255, .94) 46%, rgba(255, 255, 255, .86) 51%,
    rgba(255, 255, 255, .74) 56%, rgba(255, 255, 255, .60) 61%, rgba(255, 255, 255, .45) 66%,
    rgba(255, 255, 255, .31) 71%, rgba(255, 255, 255, .19) 77%, rgba(255, 255, 255, .10) 83%,
    rgba(255, 255, 255, .04) 90%, rgba(255, 255, 255, .01) 96%, rgba(255, 255, 255, 0) 100%);
}
.fx-features .fx-fc-copy { left: 24px; right: 24px; top: 24px; }
.fx-features .fx-fc h3 { font-size: clamp(19px, 1.65vw, 24px); letter-spacing: -0.035em; }
.fx-features .fx-fc-data { left: 22px; right: 22px; }
.fx-features .fx-fc-data.is-low { bottom: 22px; right: 84px; }
.fx-features .fx-fc-plus {
  right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 14px;
  font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--fx-ink), 0 10px 22px rgba(0, 0, 0, .28);
}
.fx-features .fx-fc-plus:hover { box-shadow: inset 0 0 0 1.5px var(--fx-ink), 0 14px 28px rgba(0, 0, 0, .34); }
@media (max-width: 1100px) { .fx-features .fx-fcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .fx-features .fx-fcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* two across on a phone: the tile keeps its photo, its name and its plus;
     the small data panels would not be readable at this size */
  .fx-features .fx-fcards { gap: 12px; }
  .fx-features .fx-fc { border-radius: 22px; aspect-ratio: 3 / 4.6; }
  .fx-features .fx-fc-img { inset: auto 7px 7px 7px; top: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 16px; }
  .fx-features .fx-fc-copy { left: 14px; right: 14px; top: 14px; }
  .fx-features .fx-fc-k { font-size: 11px; margin-bottom: 4px; }
  .fx-features .fx-fc h3 { font-size: 15.5px; line-height: 1.14; }
  .fx-features .fx-fc-data, .fx-features .fx-sk, .fx-features .fx-sk-tag { display: none; }
  .fx-features .fx-fc-plus { right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
}

/* ─── The kit list, above the action (5 Oct 2026)
   Required and Optional sit directly over "Request access", on one line:
   the one thing you need, then the things you do not. The base rules lay it
   out as a full-width grid with a rule above it at the foot of the hero;
   here it is a compact row in the copy column. Each label sits beside its
   items, not above them, so the row costs one line of height. ─── */
.fx-hero .fx-kit.is-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px;
  width: auto; max-width: none; margin: 0 0 20px; padding: 0; border-top: 0;
  animation: none; opacity: 1; transform: none;
}
.fx-hero .fx-kit.is-cta .fx-kit-group { grid-column: auto; grid-row: auto; display: flex; align-items: center; gap: 12px; }
.fx-hero .fx-kit.is-cta .fx-kit-h { margin: 0; }
.fx-hero .fx-kit.is-cta .fx-kit-row { gap: 8px 14px; }
.fx-hero .fx-kit.is-cta .fx-kit-group.is-opt .fx-kit-row { flex-wrap: wrap; gap: 8px 14px; }
.fx-hero .fx-kit.is-cta .fx-kitline { gap: 7px; }
.fx-hero .fx-kit.is-cta .fx-kitline-ic { width: 28px; height: 28px; border-radius: 8px; }
.fx-hero .fx-kit.is-cta .fx-kitline-ic svg { width: 16px; height: 16px; }
.fx-hero .fx-kit.is-cta .fx-kitline-l { font-size: 13px; }
@media (max-width: 900px) { .fx-hero .fx-kit.is-cta { margin-bottom: 16px; } }
@media (max-width: 480px) {
  .fx-hero .fx-kit.is-cta { gap: 10px 20px; }
  .fx-hero .fx-kit.is-cta .fx-kit-group.is-opt { align-items: flex-start; }
  .fx-hero .fx-kit.is-cta .fx-kit-group.is-opt .fx-kit-h { padding-top: 7px; }
}
/* A short window (a laptop): take the air out of the top of the hero so the
   action stays on the first screen with the list above it. */
@media (min-width: 901px) and (max-height: 820px) {
  .fx-hero { padding-top: 34px; }
  .fx-hero .fx-h1-stack { font-size: clamp(38px, 4.9vw, 64px); }
  .fx-hero .fx-lede { margin-top: 16px; font-size: 17px; }
  .fx-clips { margin-top: 16px; }
  .fx-clip { padding-top: 7px; padding-bottom: 7px; }
  .fx-hero-cta { margin-top: 20px; }
}

/* ─── The free trial, said beside the action (5 Oct 2026) ─── */
.fx-trial {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--fx-onDark);
}
.fx-trial b { color: #fff; font-weight: 800; }
.fx-trial svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 50%; box-sizing: border-box;
  fill: none; stroke: var(--fx-mint); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  background: rgba(34, 211, 174, .14); box-shadow: inset 0 0 0 1px rgba(34, 211, 174, .5); }
.fx-hero-cta .fx-actions { align-items: center; gap: 12px 18px; }
.fx-trial.is-center { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 900px) { .fx-hero-cta .fx-actions { flex-direction: column; align-items: stretch; } .fx-hero-cta .fx-trial { justify-content: center; } }