/* Features: a "slideshow of features" (founder, 2026-10-08). Each slide is
   just the feature's headline, its big picture with arrows on either side,
   and the details underneath - no page eyebrow, headline or intro. Same
   design language as the homepage: Inter, BML blue, soft blue ground, white
   framed pictures. */
.features-page { background: linear-gradient(180deg, #ffffff 0%, #f7faff 30%, #f7faff 100%); }

.fx-show { padding: 44px 0 56px; }
.fx-stage-row { position: relative; padding: 0 72px; }
.fx-stage { min-width: 0; }

.fx-arrow { position: absolute; top: 50%; z-index: 2; width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 1px solid #dbe4f1; border-radius: 50%; background: #fff; color: #0b55ff; box-shadow: 0 14px 30px -18px rgba(7, 23, 53, .45); cursor: pointer; transform: translateY(-50%); transition: border-color .15s ease, box-shadow .15s ease; }
.fx-prev { left: 0; }
.fx-next { right: 0; }
.fx-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fx-arrow:hover { border-color: #0b55ff; box-shadow: 0 16px 34px -16px rgba(11, 85, 255, .5); }
.fx-arrow:focus-visible { outline: 3px solid rgba(11, 85, 255, .3); outline-offset: 2px; }

.fx-slide { display: grid; justify-items: center; gap: 26px; }
.fx-slide[hidden] { display: none; }
.fx-slide.is-entering { animation: fx-in .3s cubic-bezier(.16, 1, .3, 1); }
@keyframes fx-in { from { opacity: 0; } to { opacity: 1; } }

.fx-product { margin: 0 0 -14px; color: #0b55ff; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.fx-slide > h2 { max-width: 820px; margin: 0; color: #071735; font-size: clamp(30px, 3.6vw, 46px); font-weight: 900; line-height: 1.04; letter-spacing: -.05em; text-align: center; text-wrap: balance; }

/* Each picture stands on its own (founder, 2026-10-08): no frame or box,
   its natural shape, capped so the details stay in view. */
.fx-shot { width: 100%; margin: 0; display: flex; justify-content: center; }
.fx-shot img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(64vh, 620px); border-radius: 14px; box-shadow: 0 30px 70px -42px rgba(7, 23, 53, .5); }

.fx-details { width: 100%; max-width: 920px; display: grid; gap: 22px; justify-items: center; }
.fx-details > p { max-width: 720px; margin: 0; color: #4b5b73; font-size: 17px; line-height: 1.6; text-align: center; }
/* Facts in the homepage's own style (founder, 2026-10-08: the boxed table
   didn't vibe) - no box, a blue check, a short bold title, a lighter line. */
/* Facts hidden (founder, 2026-10-08: "get rid of that entire section, keep the space") - markup kept for an easy return. */
.fx-facts { display: none !important; }
.fx-details { padding-bottom: 56px; }
.fx-facts-off { width: 100%; margin: 4px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.fx-facts div { position: relative; padding-left: 32px; }
.fx-facts dt { color: #071735; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.fx-facts dd { margin: 4px 0 0; color: #5b6b82; font-size: 13.5px; font-weight: 500; line-height: 1.45; }

.fx-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 30px 72px 0; }
.fx-index button { min-height: 32px; padding: 0 13px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #5b6b82; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.fx-index button:hover { color: #0b55ff; }
.fx-index button.is-active { border-color: #dbe6ff; background: #fff; color: #0b55ff; box-shadow: 0 6px 16px -12px rgba(7, 23, 53, .4); }

/* Phones (founder, 2026-10-08: "mobile's got to be cleaned up"): arrows
   flank the headline instead of covering the picture; the picture is a
   zoomed crop of the part that matters (tap to see it whole); the feature
   names become one swipeable row. */
@media (max-width: 860px) {
  .fx-show { padding: 22px 0 36px; }
  .fx-stage-row { padding: 0; }
  .fx-arrow { width: 38px; height: 38px; box-shadow: 0 8px 18px -12px rgba(7, 23, 53, .45); }
  .fx-arrow svg { width: 18px; height: 18px; }
  .fx-prev { left: 0; }
  .fx-next { right: 0; }
  .fx-slide { gap: 16px; }
  .fx-product { margin-bottom: -10px; font-size: 12px; }
  .fx-slide > h2 { padding: 0 46px; font-size: 27px; }
  .fx-shot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px; box-shadow: 0 22px 50px -34px rgba(7, 23, 53, .55); }
  .fx-shot img, .fx-shot.is-contain img, .fx-shot.is-soft.is-contain img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: var(--fx-focus, 0% 0%); border-radius: 0; box-shadow: none; }
  /* The builders show whole on phones (founder: no cropped sides) - smaller, nothing cut. */
  .fx-shot.is-whole { aspect-ratio: 1.84 / 1; background: #f5f8fe; }
  .fx-shot.is-whole img { object-fit: contain; object-position: center; }
  .fx-shot::after { content: "Tap to enlarge"; position: absolute; right: 10px; bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(7, 23, 53, .72); color: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
  .fx-details { gap: 18px; padding-bottom: 34px; }
  .fx-details > p { font-size: 15px; line-height: 1.55; }
  .fx-facts { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .fx-facts dt { font-size: 14px; }
  .fx-facts dd { font-size: 13px; }
  .fx-index { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 22px -16px 0; padding: 4px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .fx-index::-webkit-scrollbar { display: none; }
  .fx-index button { flex: 0 0 auto; border-color: #dbe4f1; background: #fff; }
}

/* A dash inside a tight headline gets its own room (founder headline, 2026-10-11). */
.fx-dash { margin: 0 .16em; }