/* Features page: the product story around the retained folds. Scoped to .fj-*; shared
   navigation, buttons, badges and folds stay in style.css. Rhythm 8 / 13 / 21 / 34 / 55. */
.fj-wrap { max-width: 1160px; margin: 0 auto; }
.fj-center { text-align: center; }
.fj-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: #0f172a; margin: 0 auto 21px; max-width: 16ch; }
.fj-lede { font-size: 1.125rem; line-height: 1.55; color: #475569; max-width: 42rem; margin: 0 auto 34px; }
.fj-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 13px 34px; margin-bottom: 13px; }
.fj-small { font-size: 0.8125rem; color: #64748b; margin: 0 0 34px; }
.fj-link { color: #4338ca; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.fj-link:hover { color: #3730a3; }

/* Five steps: one row on desktop, a 2 + 3 wrap on tablets, a list on phones. */
.fj-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin: 0 auto 21px; max-width: 980px; text-align: left; }
.fj-steps a { display: flex; align-items: center; gap: 13px; padding: 13px 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; color: #0f172a; font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.fj-steps a:hover { border-color: #c7d2fe; transform: translateY(-2px); }
.fj-steps a:focus-visible { outline: 3px solid #4338ca; outline-offset: 3px; }
.fj-num { flex-shrink: 0; width: 34px; height: 34px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 0.8125rem; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; letter-spacing: 0.04em; }

/* Chapters: copy beside a real product frame; the folds sit underneath. */
.fj-chapter { padding: 89px 24px 55px; border-top: 1px solid rgba(15,23,42,0.06); }
.fj-chapter:nth-of-type(even) { background: #fff; }
.fj-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 55px; align-items: center; }
.fj-reverse .fj-grid .fj-copy { order: 2; }
.fj-reverse .fj-grid .fj-visual { order: 1; }
.fj-eyebrow { display: flex; align-items: center; gap: 13px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; margin: 0 0 13px; }
.fj-eyebrow span { width: 34px; height: 34px; border-radius: 999px; background: #eef2ff; color: #4338ca; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; letter-spacing: 0.04em; }
.fj-copy h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; color: #0f172a; margin: 0 0 13px; }
.fj-body { font-size: 1.0625rem; line-height: 1.6; color: #475569; margin: 0 0 21px; }
.fj-bullets { list-style: none; padding: 0; margin: 0 0 21px; display: grid; gap: 8px; }
.fj-bullets li { position: relative; padding-left: 28px; color: #334155; line-height: 1.5; }
.fj-bullets li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 16px; height: 16px; border-radius: 999px; background: #d1fae5; box-shadow: inset 0 0 0 1px #6ee7b7; }
.fj-bullets li::after { content: ""; position: absolute; left: 5px; top: calc(0.45em + 4px); width: 6px; height: 3px; border-left: 2px solid #047857; border-bottom: 2px solid #047857; transform: rotate(-45deg); }
.fj-links { display: flex; flex-wrap: wrap; gap: 8px 21px; font-size: 0.9375rem; }
.fj-visual { margin: 0; padding: 8px; background: #fff; border: 1px solid rgba(15,23,42,0.06); border-radius: 16px; box-shadow: 0 21px 55px -21px rgba(15,23,42,0.28); }
/* The reset above also zeroed the mt-8 the markup asks for under a bullet list (2026-10-01 audit). */
.fj-visual.mt-8 { margin-top: 2rem; }
/* Comparison table on phones (2026-10-01 audit): the row labels took 315px and left a sliver of the
   Vantage column. The label column now stays put and wraps, so a swipe moves the platforms under it. */
@media (max-width: 640px) {
    #compare table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; white-space: normal;
        width: 132px; min-width: 132px; max-width: 132px; box-shadow: 1px 0 0 #e2e8f0; }
    #compare thead th:first-child { background: #f8fafc; }
}
.fj-visual img { display: block; width: 100%; height: auto; border-radius: 10px; }
.fj-visual figcaption { font-size: 0.75rem; line-height: 1.4; color: #64748b; padding: 8px 8px 0; }
.fj-details { margin-top: 34px; display: grid; gap: 13px; }
.fj-sub { margin-top: 21px; padding-top: 21px; border-top: 1px dashed rgba(15,23,42,0.1); }
.fj-sub h3 { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 0 0 8px; }
.fj-sub p { color: #475569; margin: 0 0 13px; }

/* Next: the verticals, one row of links. */
.fj-next { padding: 55px 24px 89px; }
.fj-next h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; color: #0f172a; margin: 0 0 8px; }
.fj-vertical-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 21px; }
.fj-vertical-links a { padding: 8px 16px; border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #334155; font-weight: 600; font-size: 0.9375rem; text-decoration: none; }
.fj-vertical-links a:hover { border-color: #c7d2fe; color: #4338ca; }

@media (max-width: 1023px) {
    .fj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fj-grid { grid-template-columns: 1fr; gap: 34px; }
    .fj-reverse .fj-grid .fj-copy, .fj-reverse .fj-grid .fj-visual { order: initial; }
}
@media (max-width: 639px) {
    .fj-chapter { padding: 55px 16px 34px; }
    .fj-steps { grid-template-columns: 1fr; }
    .fj-hero h1 { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fj-steps a { transition: none; }
    .fj-steps a:hover { transform: none; }
}

/* The retained folds, sitting under their chapter: a card row each, the inner section's
   page-scale padding pulled in, so the detail reads as part of the chapter rather than as a
   second page beneath it. Selectors carry three classes to outrank the utility classes on the
   summary. */
.fj-details > .feature-fold { background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden; overflow: clip; min-width: 0; }
/* min-width: 0 since 2026-10-01: the open lifecycle fold widened its grid track to the table's width and
   gave the whole page a sideways scroll on phones. The table now scrolls inside its card. */
/* The "+" turns into a close cross while a fold is open, like .pro-item's chevron. */
.feature-fold > summary svg { transition: transform .2s ease; }
.feature-fold[open] > summary svg { transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { .feature-fold > summary svg { transition: none; } }
.fj-details > .feature-fold > summary { max-width: none; margin: 0; padding: 16px 21px; font-size: 1.0625rem; }
.fj-details > .feature-fold > summary:hover { color: #4338ca; }
.fj-details > .feature-fold > section { padding-top: 21px; padding-bottom: 34px; }
.fj-details > .feature-fold > section h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); }

/* The eighth card of the Communicate section: two cards centred under a row of three. Six columns
   with each card spanning two gives the same card width as the three-column grid beside it. */
@media (min-width: 768px) {
    .features-pair { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .features-pair > .card { grid-column: span 2; }
    .features-pair > .card:first-child { grid-column: 2 / span 2; }
}

/* Keep the first product chapter within reach; the five native anchors stay visible. */
.fj-hero h1 { max-width: 19ch; font-weight: 650; letter-spacing: -.045em; line-height: 1.08; }
.fj-copy h2, .fj-next h2 { font-weight: 650; letter-spacing: -.035em; }
.fj-steps a { font-weight: 600; border-color: #ded9e8; }
.fj-steps a:hover { border-color: #a89aca; background: #faf8ff; }
.fj-small { color: #586276; font-size: .875rem; line-height: 1.6; }
.fj-visual figcaption { color: #586276; font-size: .8125rem; line-height: 1.55; padding: 12px 8px 4px; }
.fj-chapter { scroll-margin-top: 90px; }
@media (max-width: 639px) {
    .fj-hero { padding-top: 112px; padding-bottom: 24px; }
    .fj-hero h1 { font-size: clamp(2rem, 8.5vw, 2.5rem); max-width: 19ch; }
    .fj-lede { font-size: 1rem; line-height: 1.65; margin-bottom: 24px; }
    .fj-hero .fj-small { margin-bottom: 24px; }
    .fj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .fj-steps a { gap: 8px; padding: 12px 10px; font-size: .8125rem; line-height: 1.5; border-radius: 12px; }
    .fj-steps a:last-child { grid-column: 1 / -1; }
    .fj-steps .fj-num { width: 26px; height: 26px; font-size: .6875rem; }
    .fj-chapter { padding-top: 40px; }
}