/* ==========================================================================
   Krown — feature pages (/features, /features/<slug>; views/features/*).
   Built on krown-landing.css (tokens, nav, buttons, sections, FAQ, footer) — only the new pieces live here:
   device frames with REAL screenshots (browser + phone, overlapping), the steps, cards, hub grid, image viewer.
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; }
.kn-links a[aria-current="page"] { background: var(--k-sand); color: var(--k-ink); }

/* ---------- breadcrumbs ---------- */
.kf-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .86rem; color: var(--k-mute); margin-bottom: 18px; }
.kf-crumbs a { color: var(--k-mute); }
.kf-crumbs a:hover { color: var(--k-ink); }
.kf-crumbs i { font-size: .7rem; opacity: .7; }
.kf-crumbs span { color: var(--k-ink); font-weight: 600; }

/* ---------- hero ---------- */
.kf-hero { padding: 18px 0 44px; }
.kf-eyebrow { padding: .35rem .9rem; gap: .45rem; font-weight: 700; color: var(--k-accent-ink); }
.kf-eyebrow i { font-size: 1rem; }
.kf-title { font-size: clamp(2.1rem, 8vw, 3.7rem); }
.kf-points { margin-top: 20px; }
.kf-hero-grid { gap: 34px; }
@media (min-width: 992px) {
  .kf-hero { padding: 26px 0 72px; }
  .kf-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 56px; align-items: center; }
}

/* ---------- device frames (real screenshots) ---------- */
/* duo = browser (inline start) + phone overlapping its lower inline-end corner; flows naturally (no fixed heights) */
.kf-duo { position: relative; display: flex; flex-direction: column; }
.kf-duo figure { margin: 0; }
.kf-browser { width: 88%; align-self: flex-start; background: var(--k-paper); border: 1px solid var(--k-line-2); border-radius: 12px; overflow: hidden; box-shadow: var(--k-shadow-lg); }
.kf-browser-bar { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: var(--k-sand); border-bottom: 1px solid var(--k-line); direction: ltr; }
.kf-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--k-line-2); }
.kf-browser-bar span { margin-inline-start: 10px; font-size: 10px; font-family: var(--k-font-wordmark); color: var(--k-mute); background: var(--k-paper); border-radius: 6px; padding: 0 8px; line-height: 15px; }
.kf-browser img { display: block; width: 100%; height: auto; }
.kf-phone { position: relative; z-index: 2; width: 44%; align-self: flex-end; margin-top: -24%; padding: 5px; border-radius: 26px; background: var(--k-device); box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 30px 60px -24px rgba(20, 10, 38, .55); }
.kf-phone-screen { position: relative; border-radius: 21px; overflow: hidden; background: var(--k-screen); aspect-ratio: 390 / 844; }
.kf-phone-screen img, .kf-phone-screen video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.kf-duo-hero .kf-phone { width: 44%; margin-top: -30%; }
/* wider screens: the browser leads, the phone is a smaller companion */
@media (min-width: 768px) {
  .kf-phone { width: 30%; margin-top: -22%; }
  .kf-duo-hero .kf-phone { width: 34%; margin-top: -28%; }
}
@media (min-width: 992px) { .kf-phone { border-radius: 32px; padding: 7px; } .kf-phone-screen { border-radius: 26px; } }
.kf-zoom { display: block; cursor: zoom-in; }
.kf-zoom:focus-visible { outline-offset: -3px; }

/* ---------- how it works ---------- */
.kf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 54px; }
.kf-step { display: grid; gap: 22px; align-items: center; }
.kf-step-txt { position: relative; padding-inline-start: 58px; }
.kf-step-n { position: absolute; inset-inline-start: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--k-primary); color: var(--k-on-primary); font-family: var(--k-font-display); font-weight: 800; font-size: 1.15rem; }
.kf-step h3 { font-size: clamp(1.2rem, 4.2vw, 1.55rem); font-weight: 800; padding-top: 4px; }
.kf-step p { margin-top: 8px; color: var(--k-ink-2); font-size: 1.02rem; max-width: 30em; }
@media (min-width: 992px) {
  .kf-steps { gap: 84px; }
  .kf-step { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 56px; }
  .kf-step:nth-child(even) { grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); }
  .kf-step:nth-child(even) .kf-step-txt { order: 2; }
}

/* ---------- who / related / hub cards ---------- */
.kf-who { grid-template-columns: 1fr; }
@media (min-width: 768px) { .kf-who { grid-template-columns: repeat(3, 1fr); } }
.kf-cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .kf-cards { grid-template-columns: repeat(3, 1fr); } }
.kf-card, .kf-hub-card { display: flex; flex-direction: column; gap: 6px; background: var(--k-paper); border: 1px solid var(--k-line); border-radius: var(--k-r); padding: 20px; color: var(--k-ink-2); text-decoration: none !important; box-shadow: var(--k-shadow); transition: border-color .2s, transform .2s; }
.kf-card:hover, .kf-hub-card:hover { border-color: var(--k-accent-line); transform: translateY(-2px); }
.kf-card-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--k-accent-wash); color: var(--k-accent-ink); font-size: 1.25rem; margin-bottom: 6px; }
.kf-card-t { font-family: var(--k-font-display); font-weight: 800; color: var(--k-ink); font-size: 1.12rem; line-height: 1.4; }
.kf-card-d { color: var(--k-mute); font-size: .95rem; line-height: 1.65; }
.kf-card-go { margin-top: auto; padding-top: 8px; color: var(--k-accent-ink); font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: .35rem; }

.kf-hub-hero .kh-sub { max-width: 40em; }
.kf-hub-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kf-hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kf-hub-grid { grid-template-columns: repeat(4, 1fr); } }
.kf-hub-card { padding: 0; overflow: hidden; }
.kf-hub-shot { display: block; height: 260px; overflow: hidden; background: linear-gradient(160deg, var(--k-accent-wash), var(--k-sand)); border-bottom: 1px solid var(--k-line); padding: 18px 18px 0; }
.kf-hub-shot img { width: 62%; margin-inline: auto; border-radius: 18px 18px 0 0; border: 5px solid var(--k-device); border-bottom: 0; box-shadow: 0 18px 40px -22px rgba(20, 10, 38, .6); }
.kf-hub-body { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 20px; flex: 1; }
.kf-hub-more { margin-top: 26px; color: var(--k-mute); display: flex; gap: .5rem; align-items: baseline; font-size: .95rem; }

/* ---------- final CTA ---------- */
.kf-final-wrap { padding-top: 56px; }

/* ---------- image viewer ---------- */
.kf-lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1440px); max-height: 94vh; overflow: visible; }
.kf-lb::backdrop { background: rgba(20, 10, 38, .82); }
.kf-lb img { display: block; max-width: min(96vw, 1440px); max-height: 84vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.kf-lb.is-phone img { border-radius: 26px; border: 6px solid var(--k-device); }
.kf-lb p { margin-top: 10px; text-align: center; color: #F6F4FB; font-weight: 600; font-size: .95rem; }
.kf-lb-x { position: absolute; top: -14px; inset-inline-end: -10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--k-paper); color: var(--k-ink); font-size: 1.05rem; cursor: pointer; box-shadow: var(--k-shadow); }
@media (max-width: 575.98px) { .kf-lb-x { top: 6px; inset-inline-end: 6px; } }

@media (prefers-reduced-motion: reduce) { .kf-card, .kf-hub-card { transition: none; } }

/* ---------- «شرح بالفيديو»: YouTube short, loads on press (views/features/page.ejs #video; link from SA «صوت الفيديوهات») ---------- */
.kf-yt-eyebrow { display: inline-block; font-size: .8rem; font-weight: 700; color: var(--k-accent-ink); margin-bottom: 4px; }
.kf-yt { position: relative; display: block; width: min(360px, 100%); aspect-ratio: 9 / 16; margin: 0 auto; padding: 0; border: 1px solid var(--k-line-2); border-radius: 26px; overflow: hidden; cursor: pointer; background: var(--k-device); box-shadow: 0 30px 60px -28px rgba(42, 23, 69, .55); }
.kf-yt img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kf-yt-play { position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; background: var(--k-primary); color: var(--k-on-primary); display: grid; place-items: center; font-size: 2.2rem; box-shadow: 0 0 0 10px color-mix(in srgb, var(--k-accent) 35%, transparent); transition: transform .2s, background .2s; }
.kf-yt:hover .kf-yt-play, .kf-yt:focus-visible .kf-yt-play { transform: scale(1.08); background: var(--k-primary-2); }
.kf-yt:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 3px; }
.kf-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kf-yt-more { text-align: center; margin: 16px 0 0; }
.kf-yt-link { font-weight: 800; color: var(--k-accent-ink); text-decoration: none; }
.kf-yt-link:hover { color: var(--k-primary-2); text-decoration: underline; }