/* ===========================================================================
   Feature pages (/features/{slug}) - layout and the product visuals in Views/Features/_Visual.cshtml.
   Site tokens only, so light and dark both follow the theme. Mockups that depict the Windows app keep
   its light look in both themes (see .app-window in site.css).
   =========================================================================== */

/* ── Hero: copy + product visual ─────────────────────────────────────────── */
.feature-hero { padding: clamp(2rem, 4vw, 3.25rem) 0 clamp(2.5rem, 5vw, 4rem); }
.feature-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.feature-hero .eyebrow i { font-size: .9em; }
.feature-hero h1 { margin-bottom: 1rem; }
.feature-hero .lead { font-size: 1.1rem; }
.feature-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: var(--ssp-text); background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); padding: .65rem .85rem; max-width: 560px; }
.feature-note i { color: var(--ssp-red); margin-top: .2rem; }
.feature-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.feature-hero-visual { min-width: 0; }
@media (max-width: 991px) {
    .feature-hero-grid { grid-template-columns: 1fr; }
    .feature-hero-visual { max-width: 640px; }
}
@media (max-width: 575px) { .feature-hero-actions .btn { flex: 1 1 100%; } }

/* ── Benefits ─────────────────────────────────────────────────────────────── */
.feature-benefit h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.feature-benefit p { font-size: .95rem; }

/* ── How it works: numbered steps joined by a line ───────────────────────── */
.feature-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; position: relative; }
.feature-step { position: relative; background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--ssp-shadow-xs); }
.feature-step h3 { font-size: 1.05rem; margin: .9rem 0 .35rem; }
.feature-step p { font-size: .94rem; color: var(--ssp-muted); }
.feature-step-num {
    width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center;
    font-family: var(--ssp-font-head); font-weight: 700; font-size: .95rem; color: #fff; background: var(--ssp-grad);
}
/* A connector between cards on wide screens; it says "sequence" without decoration. */
.feature-step:not(:last-child)::after {
    content: ""; position: absolute; top: calc(1.4rem + 16px); right: -1.25rem; width: 1.25rem; height: 2px;
    background: linear-gradient(90deg, var(--ssp-blue), var(--ssp-green));
}
@media (max-width: 767px) {
    .feature-steps { grid-template-columns: 1fr; gap: .9rem; }
    .feature-step { display: grid; grid-template-columns: 34px 1fr; column-gap: .9rem; padding: 1.1rem; }
    .feature-step-num { grid-row: span 2; }
    .feature-step h3 { margin: .3rem 0 .2rem; }
    .feature-step:not(:last-child)::after { top: auto; bottom: -.9rem; right: auto; left: calc(1.1rem + 16px); width: 2px; height: .9rem; }
}

/* ── Details ──────────────────────────────────────────────────────────────── */
.feature-details { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: start; }
.feature-details h2 { font-size: clamp(1.4rem, 2.2vw, 1.8rem); }
.feature-details-aside { background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg); padding: 1.3rem 1.4rem; }
.feature-details-aside h3 { font-family: var(--ssp-font-body); font-weight: 600; color: var(--ssp-muted); text-transform: none; margin-bottom: .8rem; }
.feature-chips { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .55rem; }
.feature-chips li { display: flex; gap: .6rem; align-items: center; font-size: .93rem; color: var(--ssp-heading); }
.feature-chips i { width: 18px; color: var(--ssp-success); }
@media (max-width: 767px) { .feature-details { grid-template-columns: 1fr; } }

.feature-related .badge-soon { font-size: .62rem; }
.feature-guide { display: flex; gap: .7rem; align-items: center; margin: 0 0 1rem; padding: .7rem .8rem; border-radius: var(--ssp-radius); background: var(--ssp-card); border: 1px solid var(--ssp-line); color: var(--ssp-heading); font-weight: 600; font-size: .92rem; line-height: 1.3; }
.feature-guide:hover { border-color: var(--ssp-red); color: var(--ssp-red); }
.feature-guide i { color: var(--ssp-red); }
.feature-guide small { display: block; font-weight: 500; font-size: .74rem; color: var(--ssp-muted); }

/* ── Visual frame shared by the mockups ──────────────────────────────────── */
.fv {
    margin: 0; position: relative;
    border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius-lg);
    background:
        radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--ssp-green) 10%, transparent), transparent 55%),
        radial-gradient(110% 90% at 0% 100%, color-mix(in srgb, var(--ssp-blue) 12%, transparent), transparent 60%),
        var(--ssp-card);
    padding: clamp(1rem, 2.5vw, 1.6rem);
    box-shadow: var(--ssp-shadow);
    font-size: .88rem;
}
.fv-image { width: 100%; height: auto; border-radius: var(--ssp-radius-lg); border: 1px solid var(--ssp-line); box-shadow: var(--ssp-shadow); }
.fv b { color: var(--ssp-heading); font-weight: 600; }
.fv small { color: var(--ssp-muted); }

/* File-type badges */
.fv-ext { flex: 0 0 auto; min-width: 2.7rem; text-align: center; font: 700 .64rem/1 var(--ssp-font-body); letter-spacing: .03em; padding: .32rem .3rem; border-radius: 5px; color: #fff; }
.fv-ext-pdf { background: #DC2626; } .fv-ext-docx { background: #2563EB; } .fv-ext-xlsx { background: #15803D; }
.fv-ext-zip { background: #B45309; } .fv-ext-png { background: #7C3AED; } .fv-ext-mp4 { background: #0E7490; }

/* ── File transfer: Local ↔ Encrypted ↔ Remote ───────────────────────────── */
.fv-transfer { display: grid; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: .5rem; }
.fv-machine { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); overflow: hidden; box-shadow: var(--ssp-shadow-xs); }
.fv-machine-head { display: flex; align-items: center; gap: .45rem; padding: .6rem .75rem; border-bottom: 1px solid var(--ssp-line); font-weight: 600; color: var(--ssp-heading); background: var(--ssp-bg-alt); }
.fv-machine-head span { margin-left: auto; font-size: .7rem; font-weight: 600; color: var(--ssp-muted); }
.fv-files, .fv-progress { list-style: none; margin: 0; padding: .4rem; }
.fv-files li, .fv-progress li { display: flex; align-items: center; gap: .55rem; padding: .42rem .35rem; border-radius: 6px; min-width: 0; }
.fv-files li + li, .fv-progress li + li { border-top: 1px solid color-mix(in srgb, var(--ssp-line) 70%, transparent); }
.fv-fname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ssp-text); font-size: .82rem; }
.fv-files small, .fv-progress small { flex: 0 0 auto; font-size: .72rem; }
.fv-progress li { flex-wrap: wrap; }
.fv-progress .fv-fname { flex-basis: calc(100% - 3.5rem); }
.fv-bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--ssp-bg-soft); overflow: hidden; margin-left: 3.25rem; }
.fv-bar i { display: block; height: 100%; background: var(--ssp-grad); border-radius: 3px; }
.fv-ok { color: var(--ssp-success-text) !important; }
.fv-pipe { position: relative; display: grid; justify-items: center; gap: .55rem; }
.fv-pipe-line { position: relative; width: 100%; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ssp-blue), var(--ssp-green)); }
.fv-pipe-line i { position: absolute; top: -3px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--ssp-blue); animation: fv-packet 2.4s linear infinite; }
.fv-pipe-line i:nth-child(2) { animation-delay: .8s; }
.fv-pipe-line i:nth-child(3) { animation-delay: 1.6s; }
@keyframes fv-packet { from { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { left: calc(100% - 9px); opacity: 0; } }
.fv-lock { display: grid; justify-items: center; text-align: center; font-weight: 600; font-size: .74rem; color: var(--ssp-heading); background: var(--ssp-card); border: 1px solid color-mix(in srgb, var(--ssp-green) 45%, var(--ssp-line)); border-radius: var(--ssp-radius-sm); padding: .4rem .5rem; line-height: 1.25; }
.fv-lock i { color: var(--ssp-success); margin-bottom: .15rem; }
.fv-lock small { font-weight: 500; font-size: .68rem; }
@media (max-width: 575px) {
    .fv-transfer { grid-template-columns: 1fr; }
    .fv-pipe { grid-template-columns: auto; padding: .2rem 0; }
    .fv-pipe-line { width: 3px; height: 54px; background: linear-gradient(180deg, var(--ssp-blue), var(--ssp-green)); }
    .fv-pipe-line i { left: -3px; animation-name: fv-packet-v; }
    .fv-lock { position: absolute; left: calc(50% + 14px); top: 50%; transform: translateY(-50%); }
    .fv-files li:nth-child(n+5) { display: none; } /* four files say it on a phone */
}
@keyframes fv-packet-v { from { top: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } to { top: calc(100% - 9px); opacity: 0; } }

/* ── Multi monitor ───────────────────────────────────────────────────────── */
.fv-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; align-items: end; padding-top: .5rem; }
.fv-screen { display: grid; justify-items: center; gap: .3rem; opacity: .6; transition: opacity .3s ease; }
.fv-screen.is-active { opacity: 1; }
.fv-screen-glass { width: 100%; aspect-ratio: 16 / 10; border-radius: 6px; border: 3px solid #1F2A44; background: #0E1A38; padding: 8%; display: grid; gap: 8%; align-content: start; }
.fv-screen-glass span { display: block; height: 7px; border-radius: 3px; background: #2A3D6E; }
.fv-screen-glass span:first-child { width: 60%; background: #3B82FF; }
.fv-screen-glass span:last-child { width: 80%; }
.fv-screen.is-active .fv-screen-glass { border-color: var(--ssp-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ssp-blue) 22%, transparent); }
.fv-screen-stand { width: 22%; height: 8px; background: #1F2A44; border-radius: 0 0 4px 4px; }
.fv-screen small { font-size: .74rem; }
.fv-switcher { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.1rem; padding: .55rem .7rem; background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); }
.fv-switcher > span { color: var(--ssp-muted); font-size: .78rem; margin-right: .2rem; }
.fv-switcher b { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--ssp-line); background: var(--ssp-card); font-size: .82rem; }
.fv-switcher b.is-active { background: var(--ssp-red); border-color: var(--ssp-red); color: #fff; }
.fv-switcher em { font-style: normal; margin-left: auto; font-size: .78rem; color: var(--ssp-text); }
.fv-switcher em i { color: var(--ssp-red); }
@media (max-width: 575px) { .fv-switcher em { margin-left: 0; flex-basis: 100%; } }

/* ── UAC / secure desktop ────────────────────────────────────────────────── */
.fv-uac { padding: 0; overflow: hidden; }
.fv-uac-desk { background: linear-gradient(160deg, rgba(6, 11, 26, .78), rgba(6, 11, 26, .9)), linear-gradient(135deg, #1D4ED8, #0E4A43); display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 3rem) 1rem 3.5rem; }
.fv-uac-dialog { width: min(380px, 100%); border-radius: 8px; overflow: hidden; background: #F3F4F6; color: #111827; box-shadow: 0 20px 50px rgba(0, 0, 0, .5); font-family: "Segoe UI", var(--ssp-font-body); }
.fv-uac-bar { background: #0B5CAD; color: #fff; font-size: .78rem; padding: .45rem .8rem; }
.fv-uac-body { padding: .9rem 1rem 1rem; }
.fv-uac-body p { color: #111827; font-size: .98rem; font-weight: 600; line-height: 1.3; margin-bottom: .8rem; }
.fv-uac-app { display: flex; gap: .65rem; align-items: center; margin-bottom: 1rem; }
.fv-uac-app b { color: #111827; display: block; font-size: .85rem; }
.fv-uac-app small { color: #4B5563; font-size: .74rem; }
.fv-uac-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 6px; background: #DBEAFE; color: #1D4ED8; }
.fv-uac-actions { display: flex; gap: .5rem; }
.fv-uac-actions span { flex: 1; text-align: center; padding: .4rem; border: 1px solid #9CA3AF; border-radius: 4px; background: #fff; font-size: .82rem; color: #111827; }
.fv-uac-actions span.is-yes { background: #0B5CAD; border-color: #0B5CAD; color: #fff; }
.fv-badge { position: absolute; left: 50%; bottom: .9rem; transform: translateX(-50%); white-space: nowrap; display: inline-flex; gap: .45rem; align-items: center; padding: .4rem .8rem; border-radius: var(--ssp-radius-pill); background: rgba(6, 11, 26, .85); border: 1px solid rgba(34, 197, 94, .55); color: #E5F7EC; font-size: .78rem; font-weight: 600; }
.fv-badge i { color: #22C55E; }
@media (max-width: 420px) { .fv-badge { white-space: normal; text-align: center; width: calc(100% - 1.5rem); justify-content: center; } }

/* ── Recording ───────────────────────────────────────────────────────────── */
.fv-rec-window { border-radius: var(--ssp-radius); overflow: hidden; border: 1px solid var(--ssp-line); background: #0E1A38; }
.fv-rec-bar { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; background: #08112A; color: #C9D5EA; font-size: .8rem; }
.fv-rec-live { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: #FCA5A5; font-variant-numeric: tabular-nums; }
.fv-rec-live i { width: 9px; height: 9px; border-radius: 50%; background: #EF4444; animation: fv-blink 1.6s ease-in-out infinite; }
@keyframes fv-blink { 50% { opacity: .35; } }
.fv-rec-screen { aspect-ratio: 16 / 6.5; padding: 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 6%; }
.fv-rec-screen span { border-radius: 6px; background: #13234A; border: 1px solid #1F3466; }
.fv-rec-screen span:first-child { grid-column: span 2; height: 22%; background: #1D3A7A; }
.fv-rec-file { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; padding: .65rem .8rem; background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); box-shadow: var(--ssp-shadow-sm); }
.fv-rec-file div { min-width: 0; flex: 1; }
.fv-rec-file b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.fv-rec-file small { font-size: .74rem; }
.fv-rec-file > i { color: var(--ssp-success); }

/* ── Shared pointers ─────────────────────────────────────────────────────── */
.fv-ptr-screen { position: relative; border-radius: var(--ssp-radius); overflow: hidden; border: 1px solid var(--ssp-line); background: #F8FAFC; aspect-ratio: 16 / 9.5; }
.fv-ptr-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #E5E7EB; font-size: .78rem; }
.fv-ptr-bar span { width: 9px; height: 9px; border-radius: 50%; background: #CBD5E1; }
.fv-ptr-bar b { margin-left: 8px; color: #1E293B !important; font-weight: 600; }
.fv-ptr-doc { padding: 6% 7%; display: grid; gap: 10px; position: relative; }
.fv-ptr-line { height: 8px; border-radius: 4px; background: #E2E8F0; }
.fv-ptr-line.w80 { width: 80%; } .fv-ptr-line.w60 { width: 60%; } .fv-ptr-line.w70 { width: 70%; }
.fv-ptr-menu { position: absolute; left: 52%; top: 46%; display: grid; min-width: 9.5rem; background: #fff; border: 1px solid #E2E8F0; border-radius: 8px; box-shadow: 0 10px 24px rgba(15, 23, 42, .14); padding: 4px; font-size: .74rem; }
.fv-ptr-menu > i { font-style: normal; color: #334155; padding: 5px 8px; border-radius: 5px; }
.fv-ptr-menu > i.is-hover { background: #DBEAFE; color: #1D4ED8; font-weight: 600; position: relative; }
/* Asha holds the real cursor, so her pointer sits ON the item it is hovering - anchored to it, not to the screen, so it lines up at every width. Her label hangs to the right, clear of the text. */
.fv-ptr-menu .fv-ptr-anchored { left: auto; right: -4px; top: 55%; z-index: 1; }
.fv-ptr-anchored em { position: absolute; left: 14px; top: 16px; margin-left: 0; }
.fv-ptr { position: absolute; display: grid; justify-items: start; gap: 2px; transform: translate(-2px, -2px); }
.fv-ptr i { font-size: 1.15rem; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); -webkit-text-stroke: 1px #fff; }
.fv-ptr em { font-style: normal; font-size: .66rem; font-weight: 700; color: #fff; padding: 1px 6px; border-radius: 4px; margin-left: 10px; white-space: nowrap; }
.fv-ptr-host i { color: #0F172A; } .fv-ptr-host em { background: #0F172A; }
.fv-ptr-a i { color: #2563EB; } .fv-ptr-a em { background: #2563EB; }
.fv-ptr-b i { color: #15803D; } .fv-ptr-b em { background: #15803D; }
.fv-ptr-status { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-top: .9rem; padding: .55rem .8rem; background: var(--ssp-bg-alt); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); font-size: .8rem; color: var(--ssp-text); }
.fv-ptr-status i { color: var(--ssp-red); margin-right: .25rem; font-size: .8em; }
.fv-ptr-status span:first-child i { color: var(--ssp-muted); font-size: .55em; vertical-align: middle; }
@media (max-width: 575px) { .fv-ptr-menu { left: 34%; } .fv-ptr-b { left: 68% !important; top: 18% !important; } .fv-ptr-host { left: 5% !important; top: 70% !important; } }

/* ── Clipboard ───────────────────────────────────────────────────────────── */
.fv-clip { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; }
.fv-clip-card { background: var(--ssp-card); border: 1px solid var(--ssp-line); border-radius: var(--ssp-radius); padding: .8rem .9rem; display: grid; gap: .5rem; box-shadow: var(--ssp-shadow-xs); }
.fv-clip-card.is-target { border-color: color-mix(in srgb, var(--ssp-green) 50%, var(--ssp-line)); }
.fv-clip-card small { font-size: .74rem; }
.fv-clip-card code { color: var(--ssp-heading); background: var(--ssp-bg-alt); border-radius: 6px; padding: .45rem .55rem; font-size: .8rem; }
.fv-clip-arrow { display: grid; justify-items: center; color: var(--ssp-red); gap: .2rem; }
.fv-clip-arrow small { font-size: .68rem; }
@media (max-width: 575px) { .fv-clip { grid-template-columns: 1fr; } .fv-clip-arrow i { transform: rotate(90deg); } }

/* ── Saved hosts list (unattended / saved / Wake-on-LAN / restart) ───────── */
.fv-hosts { padding: 0; overflow: hidden; }
.fv-hosts-head { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--ssp-line); font-weight: 600; color: var(--ssp-heading); background: var(--ssp-bg-alt); }
.fv-hosts-head span { margin-left: auto; font-size: .72rem; color: var(--ssp-muted); background: var(--ssp-bg-soft); border-radius: var(--ssp-radius-pill); padding: .1rem .5rem; }
.fv-hosts-list { list-style: none; margin: 0; padding: .5rem; }
.fv-hosts-list li { display: flex; align-items: center; gap: .75rem; padding: .7rem .6rem; border-radius: var(--ssp-radius-sm); }
.fv-hosts-list li + li { border-top: 1px solid color-mix(in srgb, var(--ssp-line) 70%, transparent); }
.fv-hosts-list li.is-hi { background: var(--ssp-red-soft); border-top-color: transparent; }
.fv-hosts-list li.is-hi + li { border-top-color: transparent; }
.fv-hosts-list div { flex: 1; min-width: 0; display: grid; }
.fv-hosts-list small { font-size: .76rem; display: inline-flex; gap: .35rem; align-items: center; }
.fv-hosts-list small i { font-size: .62rem; }
.fv-hosts-list small.is-on, .fv-hosts-list small.is-on i { color: var(--ssp-success-text); }
.fv-hosts-list small.is-wake, .fv-hosts-list small.is-wake i { color: var(--ssp-warning-text); }
.fv-hosts-list small.is-off i { color: var(--ssp-muted); }
.fv-host-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: var(--ssp-bg-soft); color: var(--ssp-slate); }
.fv-host-btn { font-size: .78rem; font-weight: 600; color: #fff; background: var(--ssp-grad); padding: .35rem .75rem; border-radius: var(--ssp-radius-sm); }
.fv-hosts-list li.is-hi small.is-wake i { animation: fv-blink 1.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .fv-pipe-line i, .fv-rec-live i, .fv-hosts-list li.is-hi small.is-wake i { animation: none; }
    /* One still packet in the middle of the line says "in transit" without moving. */
    .fv-pipe-line i { left: calc(50% - 4.5px); opacity: 1; }
    .fv-pipe-line i:nth-child(n+2) { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 575px) {
    .fv-pipe-line i { left: -3px; top: calc(50% - 4.5px); }
}