/*!
 * Viewnamic Site — features overview (/features/) and feature detail pages (/features/<slug>/).
 * Loads on the features, feature and home templates. Classes: .vn-fx-*.
 * Illustrations (.vn-fx-visual) are styled in feature-visuals.css.
 */

/* ---------- Anchors and focus below the sticky header (+ in-page navigation) ----------
   With the sticky in-page navigation (.vn-fx-toc) the scroll padding covers the header plus
   the navigation, so anchor targets and elements focused with (Shift+)Tab are never hidden
   under it (WCAG 2.4.11). features.js measures the navigation (--vn-fx-toc-h); 4rem is
   its one-row height. */
html:has(.vn-fx-toc) { scroll-padding-top: calc(var(--vnm-header-height) + var(--vn-fx-toc-h, 4rem) + 1rem); }
@media (min-width: 783px) {
    html:has(body.admin-bar .vn-fx-toc) { scroll-padding-top: calc(var(--vnm-header-height) + 32px + var(--vn-fx-toc-h, 4rem) + 1rem); }
}
.vn-fx-row, .vn-fx-detail { scroll-margin-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
    html:has(.vn-fx-toc, .vn-fx-jump) { scroll-behavior: smooth; }
}

/* ---------- Shared: icon tiles, icon panel ---------- */
.vn-fx-row__icon, .vn-fx-seg__icon, .vn-fx-mini__icon, .vn-fx-detail__icon, .vn-fx-seglink__icon, .vn-fx-trust__icon, .vn-fx-type__icon {
    display: inline-grid; place-items: center; flex: none;
    border-radius: 12px; background: var(--vnm-bg-secondary); color: var(--vnm-primary-strong);
}
.vn-fx-iconpanel {
    display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%;
    border-radius: var(--vnm-radius-xl); border: 1px solid var(--vnm-border);
    background: radial-gradient(70% 70% at 30% 20%, rgba(0, 161, 146, .16), transparent 70%), var(--vnm-bg-tint);
    color: var(--vnm-primary-strong);
}

/* ---------- Detail hero ---------- */
.vn-fx-hero__title { font-size: clamp(2rem, 1.45rem + 2.4vw, 3.25rem); }
.vn-fx-hero__media { min-width: 0; }
.vn-fx-hero__media .vn-media { margin: 0; }

/* ---------- Sticky in-page navigation ---------- */
.vn-fx-toc {
    position: sticky; top: var(--vnm-header-height); z-index: 50;
    margin-top: .75rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--vnm-border);
}
.admin-bar .vn-fx-toc { top: calc(var(--vnm-header-height) + 32px); }
@media (max-width: 782px) { .admin-bar .vn-fx-toc { top: var(--vnm-header-height); } }
.vn-fx-toc__list {
    list-style: none; margin: 0; padding: .6rem 0; display: flex; gap: .4rem;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 2rem), transparent);
}
.vn-fx-toc__list li { flex: none; scroll-snap-align: start; }
.vn-fx-toc__link {
    display: inline-flex; align-items: center; min-height: 44px; padding: .4rem .95rem;
    border: 1px solid var(--vnm-border-strong); border-radius: var(--vnm-radius-pill); background: #fff;
    font-family: var(--vnm-font-heading); font-size: .9rem; font-weight: 600; white-space: nowrap;
    color: var(--vnm-secondary) !important; text-decoration: none !important;
    transition: background-color .15s, border-color .15s;
}
.vn-fx-toc__link:hover { background: var(--vnm-bg-secondary); border-color: var(--vnm-secondary); }
@media (min-width: 1100px) {
    .vn-fx-toc__list { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Feature rows (detail page) ---------- */
.vn-fx-rows .vn-split { align-items: center; }
.vn-fx-rows .vn-split + .vn-split { margin-top: clamp(4rem, 3rem + 5vw, 7.5rem); }
.vn-fx-row__label, .vn-fx-seg__label {
    display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem;
    font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 700; color: var(--vnm-secondary);
}
.vn-fx-row__icon, .vn-fx-seg__icon { width: 38px; height: 38px; }
.vn-fx-row__title { font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem); }
.vn-fx-row__text { font-size: var(--vnm-fs-lg); color: var(--vnm-text-muted); }
.vn-fx-row__media { min-width: 0; }
.vn-fx-row__media .vn-media { margin: 0; }

/* Facts: formats + typical uses */
.vn-fx-facts { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--vnm-border); border-radius: var(--vnm-radius-md); background: var(--vnm-bg-tint); }
.vn-fx-facts__row { display: grid; gap: .3rem; }
@media (min-width: 520px) { .vn-fx-facts__row { grid-template-columns: 8.5rem 1fr; align-items: baseline; } }
.vn-fx-facts dt { margin: 0; font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vnm-secondary); }
.vn-fx-facts dd { margin: 0; font-size: var(--vnm-fs-sm); color: var(--vnm-text); }
.vn-fx-formats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.vn-fx-formats li {
    padding: .15rem .55rem; border-radius: var(--vnm-radius-sm); border: 1px solid var(--vnm-border-strong); background: #fff;
    font-family: var(--vnm-font-mono); font-size: .8125rem; font-weight: 600; line-height: 1.5; color: var(--vnm-secondary);
}
.vn-fx-formats--dark li { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: var(--vnm-text-on-dark); }

.vn-fx-note { display: flex; gap: .5rem; align-items: flex-start; margin: 1.1rem 0 0; font-size: var(--vnm-fs-sm); color: var(--vnm-secondary); font-weight: 600; }
.vn-fx-note .vn-icon { flex: none; margin-top: .15em; }

/* "Included in the … plans" notes (from the pricing catalog) */
.vn-fx-plan {
    display: flex; gap: .5rem; align-items: flex-start; margin: 1rem 0 0;
    font-size: var(--vnm-fs-sm); line-height: 1.5; color: var(--vnm-text-muted);
}
.vn-fx-plan .vn-icon { flex: none; margin-top: .15em; color: var(--vnm-primary-strong); }
.vn-fx-plan-link {
    font-weight: 600; white-space: nowrap;
    color: var(--vnm-primary-strong) !important; text-decoration: underline; text-underline-offset: .2em;
}
.vn-fx-plan-link:hover { color: var(--vnm-secondary) !important; }

/* "See it in a real document" */
.vn-fx-example { margin: 1.5rem 0 0; }
.vn-fx-example a {
    position: relative; display: inline-grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center;
    min-height: 44px; max-width: 100%; padding: .7rem 1rem .7rem 1.1rem;
    border: 1px solid var(--vnm-border-strong); border-left: 4px solid var(--vnm-primary); border-radius: var(--vnm-radius-md);
    background: #fff; color: var(--vnm-text-strong) !important; text-decoration: none !important;
    transition: box-shadow .2s, border-color .2s;
}
.vn-fx-example a:hover { box-shadow: var(--vnm-shadow-md); border-color: var(--vnm-secondary); border-left-color: var(--vnm-primary); }
.vn-fx-example__kicker { grid-column: 1; font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vnm-primary-strong); }
.vn-fx-example__title { grid-column: 1; font-family: var(--vnm-font-heading); font-weight: 600; line-height: 1.35; }
.vn-fx-example__icon { grid-column: 2; grid-row: 1 / span 2; color: var(--vnm-primary-strong); }

/* Embed code sample */
.vn-fx-code { margin: 0; border-radius: var(--vnm-radius-lg); overflow: hidden; background: var(--vnm-bg-dark); box-shadow: var(--vnm-shadow-lg); }
.vn-fx-code__label { display: flex; align-items: center; gap: .5rem; padding: .75rem 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, .12); font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 600; color: #fff; }
.vn-fx-code__label .vn-icon { color: #7FD8CE; }
.vn-fx-code__pre { margin: 0; padding: 1.25rem 1.1rem 1.5rem; white-space: pre-wrap; word-break: break-all; font-size: .875rem; line-height: 1.7; color: #CDEBE6; }
.vn-fx-code__pre code { font-family: var(--vnm-font-mono); }

/* ---------- Remaining features (detail cards) ---------- */
.vn-fx-details { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .vn-fx-details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vn-fx-details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn-fx-detail {
    padding: clamp(1.25rem, 1rem + .8vw, 1.75rem); border-radius: var(--vnm-radius-lg);
    background: #fff; border: 1px solid var(--vnm-border); box-shadow: var(--vnm-shadow-sm);
}
.vn-fx-detail__icon { width: 44px; height: 44px; margin-bottom: 1rem; }
.vn-fx-detail__title { margin: 0 0 .4rem; font-size: 1.1875rem; line-height: 1.3; }
.vn-fx-detail__text { margin: 0; color: var(--vnm-text-muted); font-size: var(--vnm-fs-sm); line-height: 1.6; }
.vn-fx-detail__note { margin: .6rem 0 0; font-size: var(--vnm-fs-sm); font-weight: 600; color: var(--vnm-secondary); }

/* ---------- Comparison ---------- */
.vn-fx-compare { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); }
.vn-fx-compare__text { display: grid; gap: 0 clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
@media (min-width: 960px) { .vn-fx-compare__text { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.vn-fx-compare__intro .vn-lead { margin-bottom: 0; }
.vn-fx-compare__text .vn-checklist { margin-top: 1.25rem; }
.vn-fx-compare__table { min-width: 0; }
.vn-section--mint .vn-compare { background: #fff; border-radius: var(--vnm-radius-lg); }

/* ---------- Cards: examples, use cases, articles ---------- */
.vn-fx-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); }
@media (min-width: 640px) { .vn-fx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .vn-fx-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .vn-fx-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.vn-fx-cards > li { display: flex; }
.vn-fx-card {
    position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
    border-radius: var(--vnm-radius-lg); background: #fff; border: 1px solid var(--vnm-border); box-shadow: var(--vnm-shadow-sm);
    transition: transform .25s var(--vnm-ease), box-shadow .25s var(--vnm-ease), border-color .25s;
}
.vn-fx-card:hover, .vn-fx-card:focus-within { box-shadow: var(--vnm-shadow-lg); border-color: var(--vnm-border-strong); }
@media (prefers-reduced-motion: no-preference) { .vn-fx-card:hover { transform: translateY(-3px); } }
.vn-fx-card:has(.vn-fx-card__link:focus-visible) { box-shadow: var(--vnm-focus); }
.vn-fx-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--vnm-bg-secondary); }
.vn-fx-card__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.vn-fx-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: 1.15rem 1.25rem 1.3rem; }
.vn-fx-card__tag { margin: 0; font-size: var(--vnm-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--vnm-primary-strong); }
.vn-fx-card__title { margin: 0; font-size: 1.125rem; line-height: 1.3; }
.vn-fx-card__link { color: inherit !important; text-decoration: none !important; }
.vn-fx-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.vn-fx-card__link:focus-visible { box-shadow: none; outline: none; }
.vn-fx-card__text { margin: 0; font-size: var(--vnm-fs-sm); line-height: 1.6; color: var(--vnm-text-muted); }
.vn-fx-card__more { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--vnm-font-heading); font-size: var(--vnm-fs-sm); font-weight: 600; color: var(--vnm-primary-strong); }

/* Designed document cover when there is no thumbnail */
.vn-fx-cover {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; height: 100%;
    padding: 1.1rem 1.25rem;
    background:
        radial-gradient(90% 80% at 100% 0%, rgba(0, 161, 146, .28), transparent 60%),
        linear-gradient(160deg, var(--vnm-bg-secondary), #fff 75%);
}
.vn-fx-cover::before {
    content: ""; position: absolute; top: 14%; right: 12%; width: 34%; aspect-ratio: 3 / 4;
    border-radius: 6px; background: #fff; border: 1px solid var(--vnm-border); box-shadow: var(--vnm-shadow-md);
    transform: rotate(4deg);
}
.vn-fx-cover__icon { position: absolute; top: 1rem; left: 1.1rem; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--vnm-secondary); color: #fff; }
.vn-fx-cover__type { position: relative; font-family: var(--vnm-font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--vnm-secondary); max-width: 60%; }
.vn-fx-cover__org { position: relative; font-size: var(--vnm-fs-xs); color: var(--vnm-text-muted); max-width: 60%; }
.vn-fx-cover__lines { position: absolute; top: calc(14% + 1.1rem); right: calc(12% + .9rem); display: grid; gap: 6px; width: calc(34% - 1.8rem); transform: rotate(4deg); }
.vn-fx-cover__lines span { height: 5px; border-radius: 3px; background: rgba(0, 102, 102, .16); }
.vn-fx-cover__lines span:first-child { width: 70%; background: rgba(0, 161, 146, .5); }

/* ---------- Segment and use-case link tiles ---------- */
.vn-fx-seglinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 720px) { .vn-fx-seglinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .vn-fx-seglinks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vn-fx-seglinks > li { display: flex; }
.vn-fx-seglink {
    display: flex; align-items: flex-start; gap: .9rem; width: 100%; min-height: 44px; padding: 1.1rem 1.15rem;
    border-radius: var(--vnm-radius-lg); background: #fff; border: 1px solid var(--vnm-border);
    color: var(--vnm-text) !important; text-decoration: none !important;
    transition: border-color .2s, box-shadow .2s;
}
.vn-fx-seglink:hover { border-color: var(--vnm-border-strong); box-shadow: var(--vnm-shadow-md); }
.vn-fx-seglink__icon { width: 44px; height: 44px; }
.vn-fx-seglink__text { display: grid; gap: .2rem; flex: 1; min-width: 0; }
.vn-fx-seglink__title { font-family: var(--vnm-font-heading); font-weight: 700; line-height: 1.3; color: var(--vnm-secondary); }
.vn-fx-seglink__desc { font-size: var(--vnm-fs-sm); line-height: 1.5; color: var(--vnm-text-muted); }
.vn-fx-seglink__arrow { flex: none; margin-top: .25rem; color: var(--vnm-primary-strong); transition: transform .2s var(--vnm-ease); }
@media (prefers-reduced-motion: no-preference) { .vn-fx-seglink:hover .vn-fx-seglink__arrow { transform: translateX(3px); } }

/* ---------- Overview: jump links ---------- */
.vn-fx-jump { padding-block: 1.5rem .25rem; }
.vn-fx-jump__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.vn-fx-jump__link {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .45rem 1rem .45rem .8rem;
    border: 1px solid var(--vnm-border-strong); border-radius: var(--vnm-radius-pill); background: #fff;
    font-family: var(--vnm-font-heading); font-size: .9375rem; font-weight: 600;
    color: var(--vnm-secondary) !important; text-decoration: none !important; transition: background-color .15s, border-color .15s;
}
.vn-fx-jump__link .vn-icon { color: var(--vnm-primary-strong); }
.vn-fx-jump__link:hover { background: var(--vnm-bg-secondary); border-color: var(--vnm-secondary); }

/* ---------- Overview: segment sections ---------- */
.vn-fx-seg { display: grid; gap: clamp(2.25rem, 1.5rem + 3vw, 4.5rem); align-items: center; }
@media (min-width: 1000px) {
    .vn-fx-seg { grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); }
    .vn-fx-seg--reverse { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); }
    .vn-fx-seg--reverse .vn-fx-seg__text { order: 2; }
}
.vn-fx-seg__title { margin-bottom: .5em; }
.vn-fx-seg__lead { font-size: var(--vnm-fs-lg); line-height: 1.6; color: var(--vnm-text-muted); }
.vn-fx-seg__media { min-width: 0; }
.vn-fx-seg__media .vn-media { margin: 0; }
.vn-fx-seg__explore { margin-top: 1.75rem; }

.vn-fx-mini { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .35rem 1.5rem; }
@media (min-width: 600px) { .vn-fx-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vn-fx-mini__item { position: relative; display: flex; gap: .7rem; align-items: flex-start; padding: .6rem .5rem .6rem 0; border-radius: var(--vnm-radius-md); }
.vn-fx-mini__icon { width: 34px; height: 34px; border-radius: 10px; }
.vn-fx-mini__body { min-width: 0; }
.vn-fx-mini__title { margin: 0 0 .1rem; font-size: 1rem; line-height: 1.35; }
.vn-fx-mini__title a { color: var(--vnm-heading) !important; text-decoration: none !important; }
.vn-fx-mini__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vn-fx-mini__title a:focus-visible { box-shadow: none; outline: none; }
.vn-fx-mini__item:has(a:focus-visible) { box-shadow: var(--vnm-focus); }
.vn-fx-mini__item:hover .vn-fx-mini__title a { color: var(--vnm-primary-strong) !important; text-decoration: underline !important; text-underline-offset: .18em; }
.vn-fx-mini__text { margin: 0; font-size: var(--vnm-fs-sm); line-height: 1.5; color: var(--vnm-text-muted); }

/* ---------- Overview: media types band ---------- */
.vn-fx-types { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 640px) { .vn-fx-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .vn-fx-types { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.vn-fx-type {
    position: relative; display: flex; flex-direction: column; gap: .55rem; padding: 1.35rem 1.25rem;
    border-radius: var(--vnm-radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14);
    transition: background-color .2s, border-color .2s;
}
.vn-fx-type:hover { background: rgba(255, 255, 255, .09); border-color: rgba(127, 216, 206, .5); }
.vn-fx-type:has(a:focus-visible) { box-shadow: 0 0 0 3px var(--vnm-bg-dark), 0 0 0 5px #7FD8CE; }
.vn-fx-type__icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(127, 216, 206, .14); color: #7FD8CE; }
.vn-fx-type__title { margin: .35rem 0 0; font-size: 1.125rem; line-height: 1.3; color: #fff; }
.vn-fx-type__title a { color: #fff !important; text-decoration: none !important; }
.vn-fx-type__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.vn-fx-type__title a:focus-visible { box-shadow: none; outline: none; }
.vn-fx-type__text { margin: 0; flex: 1; font-size: var(--vnm-fs-sm); line-height: 1.55; color: rgba(233, 244, 242, .82); }
.vn-fx-type__formats { margin: 0; font-size: var(--vnm-fs-xs); font-weight: 600; color: #7FD8CE; }
.vn-fx-types__note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.75rem 0 0; color: rgba(233, 244, 242, .88); }
.vn-fx-types__note .vn-icon { flex: none; margin-top: .15em; color: #7FD8CE; }
.vn-fx-types__note a { position: relative; z-index: 2; margin-left: .25rem; font-weight: 600; }

/* ---------- Overview: privacy & security strip ---------- */
.vn-fx-trust {
    display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.35rem;
    border-radius: var(--vnm-radius-lg); border: 1px solid var(--vnm-border); background: var(--vnm-bg-tint);
    color: var(--vnm-text) !important; text-decoration: none !important; transition: border-color .2s, box-shadow .2s;
}
.vn-fx-trust:hover { border-color: var(--vnm-border-strong); box-shadow: var(--vnm-shadow-md); }
.vn-fx-trust__icon { width: 52px; height: 52px; border-radius: 16px; background: #fff; }
.vn-fx-trust__text { display: grid; gap: .1rem; flex: 1; min-width: 0; }
.vn-fx-trust__text strong { font-family: var(--vnm-font-heading); color: var(--vnm-secondary); }
.vn-fx-trust__text span { font-size: var(--vnm-fs-sm); color: var(--vnm-text-muted); }
.vn-fx-trust__arrow { flex: none; color: var(--vnm-primary-strong); }

/* ---------- Small screens ---------- */
@media (max-width: 420px) {
    .vn-fx-example a { padding-inline: .9rem .8rem; }
    .vn-fx-trust { align-items: flex-start; }
    .vn-fx-trust__arrow { display: none; }
}

@media print {
    .vn-fx-toc, .vn-fx-jump { display: none !important; }
}