/* AgencyKit feature pages - shared styles */
    /* No announcement ribbon on feature pages, so the nav sits at the very top */
    #nav { top: 0 !important; }

    .feat-hero { position: relative; background: linear-gradient(180deg,#0B0A1F 0%,#15123A 55%,#0E0C26 100%); color:#fff; padding: 128px 0 78px; overflow:hidden; }
    .feat-hero::before { content:''; position:absolute; top:-140px; left:50%; transform:translateX(-50%); width:820px; height:820px; background:radial-gradient(circle, rgba(99,102,241,.26) 0%, transparent 62%); pointer-events:none; }
    .feat-hero .container { position:relative; z-index:1; }
    .feat-grid { display:grid; grid-template-columns: 1.02fr .98fr; gap:52px; align-items:center; }
    .feat-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:#A5B4FC; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.3); padding:6px 14px; border-radius:999px; margin-bottom:22px; }
    .feat-h1 { font-size:46px; line-height:1.1; font-weight:900; letter-spacing:-.03em; margin-bottom:20px; }
    .feat-h1 .hl { background:linear-gradient(120deg,#818CF8,#C7D2FE); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
    .feat-sub { font-size:18px; line-height:1.7; color:rgba(255,255,255,.74); margin-bottom:28px; max-width:560px; }
    .feat-cta-row { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
    .feat-trust { display:flex; gap:12px; flex-wrap:wrap; margin-top:18px; font-size:13px; color:rgba(255,255,255,.5); }
    .feat-trust span { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }

    /* Browser-style frame so any screenshot looks crisp and never stretched */
    .shot-frame { background:#0F0E24; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden; box-shadow:0 28px 70px -24px rgba(0,0,0,.65); }
    .shot-bar { display:flex; align-items:center; gap:7px; padding:11px 14px; background:#15132E; border-bottom:1px solid rgba(255,255,255,.08); }
    .shot-bar i { width:11px; height:11px; border-radius:50%; display:inline-block; }
    .shot-bar .r{background:#FF5F57}.shot-bar .y{background:#FEBC2E}.shot-bar .g{background:#28C840}
    .shot-frame img { width:100%; height:auto; display:block; }

    .section { padding: 84px 0; }
    .section.alt { background: var(--slate-50); }
    .answer-box { max-width:820px; margin:0 auto; background:#fff; border:1px solid var(--slate-200); border-left:4px solid var(--indigo); border-radius:14px; padding:24px 26px; box-shadow:0 8px 24px -16px rgba(15,23,42,.25); }
    .answer-box h2 { font-size:18px; margin-bottom:8px; color:var(--slate-900); }
    .answer-box p { font-size:16px; line-height:1.7; color:var(--slate-600); }

    .benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px; }
    .benefit-card { background:#fff; border:1px solid var(--slate-200); border-radius:16px; padding:26px; transition:transform .18s, box-shadow .18s; }
    .benefit-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px -22px rgba(15,23,42,.35); }
    .benefit-ico { width:42px; height:42px; border-radius:11px; background:rgba(99,102,241,.1); color:var(--indigo); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
    .benefit-card h3 { font-size:17px; font-weight:700; margin-bottom:7px; color:var(--slate-900); }
    .benefit-card p { font-size:14.5px; line-height:1.6; color:var(--slate-500); }

    /* Product tour: auto-playing walkthrough */
    .wt { max-width:1000px; margin:44px auto 0; }
    .wt-slides { position:relative; aspect-ratio:16/10; background:#0F0E24; }
    .wt-slide { position:absolute; inset:0; opacity:0; transition:opacity .55s ease; pointer-events:none; }
    .wt-slide.is-active { opacity:1; pointer-events:auto; }
    .wt-slide img { width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
    .wt-share { width:100%; height:100%; background:linear-gradient(180deg,#EEF1FF 0%,#F8FAFF 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; padding:24px; }
    .wt-share .bar { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--slate-200); border-radius:999px; padding:12px 16px; width:min(560px,92%); box-shadow:0 14px 36px -18px rgba(15,23,42,.4); }
    .wt-share .url { font-family:ui-monospace,Menlo,monospace; font-size:13px; color:var(--slate-600); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .wt-share .copy { margin-left:auto; background:var(--indigo); color:#fff; font-size:12px; font-weight:700; padding:7px 13px; border-radius:999px; white-space:nowrap; }
    .wt-share .toast { display:inline-flex; align-items:center; gap:9px; background:#0F172A; color:#fff; font-size:13.5px; font-weight:600; padding:11px 17px; border-radius:11px; box-shadow:0 16px 40px -18px rgba(15,23,42,.5); }
    .wt-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
    .wt-step { text-align:left; background:#fff; border:1px solid var(--slate-200); border-radius:12px; padding:14px 16px; cursor:pointer; position:relative; overflow:hidden; display:flex; gap:11px; align-items:flex-start; transition:border-color .2s, box-shadow .2s; font-family:inherit; }
    .wt-step.is-active { border-color:var(--indigo); box-shadow:0 10px 26px -16px rgba(99,102,241,.55); }
    .wt-num { width:24px; height:24px; border-radius:7px; background:var(--slate-100); color:var(--slate-500); font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .wt-step.is-active .wt-num { background:var(--indigo); color:#fff; }
    .wt-step b { display:block; font-size:14.5px; color:var(--slate-900); margin-bottom:2px; }
    .wt-step em { font-style:normal; font-size:12.5px; color:var(--slate-500); line-height:1.45; }
    .wt-bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--indigo); }
    .wt-step.is-active .wt-bar { animation:wtfill 4s linear forwards; }
    @keyframes wtfill { from{width:0} to{width:100%} }

    .spotlight { background:linear-gradient(135deg,#4F46E5,#7C3AED); color:#fff; border-radius:22px; padding:48px; display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:center; }
    .spotlight h2 { font-size:30px; font-weight:900; letter-spacing:-.02em; line-height:1.18; margin-bottom:14px; }
    .spotlight p { font-size:16px; line-height:1.7; color:rgba(255,255,255,.85); margin-bottom:22px; }
    .spotlight-visual { background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); border-radius:14px; padding:22px; }
    .flow { display:flex; align-items:center; gap:10px; font-weight:700; font-size:14px; }
    .flow .pill { background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.25); padding:9px 14px; border-radius:10px; }
    .flow .arrow { opacity:.7; }

    .vtable-wrap { overflow-x:auto; border:1px solid var(--slate-200); border-radius:16px; margin-top:40px; }
    .vtable { width:100%; border-collapse:collapse; min-width:560px; }
    .vtable th, .vtable td { padding:14px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--slate-100); }
    .vtable thead th { background:var(--slate-50); font-weight:700; color:var(--slate-700); }
    .vtable .us { background:rgba(99,102,241,.05); font-weight:700; color:var(--slate-900); }
    .vtable .yes { color:#059669; font-weight:700; }
    .vtable .no { color:var(--slate-400); }

    .takeaways { max-width:820px; margin:0 auto; background:#0F172A; color:#fff; border-radius:18px; padding:32px 34px; }
    .takeaways h2 { font-size:20px; margin-bottom:16px; }
    .takeaways li { display:flex; gap:10px; align-items:flex-start; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.82); padding:7px 0; }
    .takeaways li svg { flex-shrink:0; margin-top:2px; color:#34D399; }

    .related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px; }
    .related-card { display:block; background:#fff; border:1px solid var(--slate-200); border-radius:14px; padding:20px; text-decoration:none; transition:border-color .15s, transform .15s; }
    .related-card:hover { border-color:var(--indigo-l); transform:translateY(-2px); }
    .related-card .rc-t { font-weight:700; color:var(--slate-900); font-size:15px; margin-bottom:4px; }
    .related-card .rc-d { font-size:13.5px; color:var(--slate-500); line-height:1.5; }

    @media (max-width: 880px) {
      .feat-grid { grid-template-columns:1fr; gap:40px; }
      .feat-h1 { font-size:33px; }
      .benefit-grid, .tour-steps, .related-grid { grid-template-columns:1fr; }
      .spotlight { grid-template-columns:1fr; padding:32px; }
      .section { padding:60px 0; }
    }