/* Overview-only layout. Feature hero and animation lifecycle reuse features-2027. */
.f27-features-index, .f27-features-index * { box-sizing:border-box; }
.f27-features-index .f27-section-container { width:100%; max-width:var(--f27-content-max,1600px); margin-inline:auto; }
.f27-features-index__section { padding:clamp(24px,3vw,48px) var(--f27-inner,1.05rem); }
.f27-features-index__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; list-style:none; margin:0; padding:0; }
.f27-features-index__item { min-width:0; }
.f27-features-index__card { position:relative; display:flex; flex-direction:column; width:100%; min-width:0; min-height:400px; aspect-ratio:4/5; box-sizing:border-box; border:1px solid var(--f27-line,#deded7); border-radius:8px; background:var(--f27-surface,#f1f1ec); color:var(--f27-ink,#292c2b); text-decoration:none; transition:border-color .2s; }
.f27-features-index__media { display:flex; position:relative; align-items:center; justify-content:center; flex:1; min-height:0; padding:36px 16px 0; }
.f27-features-index__art { position:relative; display:block; width:75%; aspect-ratio:8/5; }
.f27-features-index__media .f27-feature__poster { visibility:visible; }
.f27-features-index__media[data-ready="true"] .f27-feature__poster { visibility:hidden; }
.f27-features-index__media .f27-feature__fallback[hidden] { display:none!important; }
.f27-features-index .f27-features-index__title { max-width:100%; width:fit-content; margin:0 auto; min-height:120px; display:flex; align-items:center; justify-content:center; box-sizing:border-box; padding:24px clamp(24px,2.6vw,42px) 36px; color:inherit; font:400 clamp(1.125rem,1.8vw,1.5rem)/1.2 "DM Sans",sans-serif; letter-spacing:-.025em; text-align:left; text-wrap:pretty; }
.f27-features-index__icon { flex:none; font-size:clamp(1.3rem,2.3vw,1.85rem); display:inline-block; width:1em; height:1em; margin-right:.35em; vertical-align:-.04em; color:inherit; }
.f27-features-index__title-text { flex: 0 1 auto; min-width: 0; inline-size: fit-content; text-align: left; }
.f27-features-index__icon svg { display:block; width:100%; height:100%; }
.f27-features-index__arrow { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:38px; height:38px; border-radius:4px; background:var(--f27-paper, #F9F9F6); color:var(--f27-accent-text,#084834); transition:background-color .2s,color .2s; }
.f27-features-index__card:hover, .f27-features-index__card:focus-visible { border-color:var(--f27-ink,#292c2b); }
.f27-features-index__card:focus-visible { outline:2px solid var(--f27-focus,#438260); outline-offset:4px; }
.f27-features-index__card:is(:hover,:focus-visible) .f27-features-index__arrow { background:#084834; color:#f8f8f2; }
@media(max-width:991px) { .f27-features-index__grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 .f27-features-index__grid { grid-template-columns:minmax(0,1fr); gap:20px; }
 .f27-features-index__card { min-height:350px; aspect-ratio:4/5; }
 .f27-features-index .f27-features-index__title { min-height:100px; padding:20px 24px 28px; }
}
@media(prefers-reduced-motion:reduce) { .f27-features-index__card,.f27-features-index__arrow { transition:none; } }

/* The longest workflow label gets a compact two-line group on narrow grids.
   Its nonbreaking final phrase sets the text width, without a wide empty gap. */
@media (min-width: 601px) and (max-width: 850px), (min-width: 992px) and (max-width: 1439px) {
 .f27-features-index__card[href="/features/check-relevance"] .f27-features-index__title-text { inline-size: min-content; flex-shrink: 0; }
}