/* ViralFindIt — funnel.css (v2.6.0)
   Editorial search-funnel styles, moved out of public.css to reduce
   collisions (roadmap #20). Loaded on funnel pages only; still relies on
   the shared homepage design tokens (--ink, --green, --card, etc.) that
   public.css defines on :root, so public.css must load first. */

/* ── Editorial search funnels ─────────────────────────────────────────
   Intentionally quieter than the social product pages. These are useful
   entry documents first; the existing product page supplies the reveal. */
.seo-funnel-view{background:#f7f6f2;color:#20231f}
.seo-funnel-view .mast.slim{background:#fff;border-bottom:1px solid #e7e4dc}
.seo-funnel-view .site-nav,.seo-funnel-view .nav-search-row{display:none}
.seo-entry{width:min(100% - 32px,920px);margin:0 auto;padding:clamp(42px,7vw,82px) 0 72px}
.seo-article{width:min(100%,740px);margin:0 auto}
.seo-article-head{padding-bottom:30px;border-bottom:1px solid #dcd8ce}
.seo-back{display:inline-block;color:#526454;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;margin-bottom:36px}
.seo-kicker{color:#6d776d;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin:0 0 14px}
.seo-article h1,.seo-hub h1{font-family:Inter,system-ui,sans-serif;font-size:clamp(2.1rem,7vw,4.4rem);font-weight:800;letter-spacing:-.055em;line-height:.98;margin:0;max-width:850px}
.seo-dek{font-size:clamp(1.08rem,2.3vw,1.35rem);line-height:1.55;color:#4f554f;max-width:700px;margin:22px 0 0}
.seo-reviewed{color:#777d76;font-size:.76rem;margin:18px 0 0}
.seo-product-figure{margin:38px 0 42px;background:#fff;border:1px solid #e4e1d8;border-radius:18px;padding:20px}
.seo-product-figure img{display:block;width:100%;max-height:430px;object-fit:contain;border-radius:10px}
.seo-product-figure figcaption{font-size:.78rem;color:#6d726c;margin-top:12px}
.seo-prose{font-size:1.05rem;line-height:1.75}
.seo-section{padding:6px 0 24px}
.seo-section h2,.seo-decision h2,.seo-related h2{font-family:Inter,system-ui,sans-serif;font-size:clamp(1.25rem,3vw,1.65rem);letter-spacing:-.025em;margin:0 0 10px}
.seo-section p{margin:0;color:#343934}
.seo-section ul{padding-left:1.2em;margin:12px 0 0}
.seo-section li{padding:4px 0 4px 5px}
.seo-decision{margin:30px 0;padding:28px;background:#fff;border:1px solid #dedbd2;border-radius:18px;box-shadow:0 12px 40px rgba(31,35,29,.06)}
.seo-decision>span{display:block;color:#647164;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:8px}
.seo-decision p{color:#5e635d;margin:0 0 18px}
.seo-cta{display:inline-flex;align-items:center;gap:10px;background:#244e36;color:#fff!important;border-radius:10px;padding:13px 18px;text-decoration:none;font-weight:800}
.seo-cta:hover{background:#183c29}
.seo-decision small{display:block;color:#787d77;font-size:.7rem;margin-top:13px}
.seo-related{margin-top:34px;padding-top:26px;border-top:1px solid #dcd8ce}
.seo-related>a{display:flex;justify-content:space-between;gap:20px;color:#253128;text-decoration:none;padding:14px 0;border-bottom:1px solid #e3dfd6;font-weight:700}
.seo-hub{max-width:900px;margin:auto}
.seo-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:42px}
.seo-hub-card{display:block;background:#fff;border:1px solid #e3dfd6;border-radius:16px;padding:18px;color:#252925;text-decoration:none}
.seo-hub-card img{width:100%;aspect-ratio:16/10;object-fit:contain;border-radius:10px;background:#faf9f6;margin-bottom:16px}
.seo-hub-card>span{color:#647164;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.seo-hub-card h2{font:800 1.2rem/1.2 Inter,system-ui,sans-serif;letter-spacing:-.02em;margin:7px 0}
.seo-hub-card p{font-size:.88rem;line-height:1.5;color:#656b64;margin:0}
@media(max-width:640px){
  .seo-entry{width:min(100% - 24px,920px);padding-top:34px}
  .seo-hub-grid{grid-template-columns:1fr}
  .seo-decision{padding:22px}
}
[data-theme="dark"] body.seo-funnel-view{background:#151814;background-image:none;color:#ecefe9}
[data-theme="dark"] .seo-funnel-view .mast.slim,
[data-theme="dark"] .seo-product-figure,
[data-theme="dark"] .seo-decision,
[data-theme="dark"] .seo-hub-card{background:#1d211d;border-color:#343a34}
[data-theme="dark"] .seo-article-head,
[data-theme="dark"] .seo-related,
[data-theme="dark"] .seo-related>a{border-color:#343a34}
[data-theme="dark"] .seo-funnel-view .seo-dek,
[data-theme="dark"] .seo-funnel-view .seo-section p,
[data-theme="dark"] .seo-funnel-view .seo-decision p,
[data-theme="dark"] .seo-funnel-view .seo-hub-card p{color:#bdc5bb}
[data-theme="dark"] .seo-funnel-view .seo-related>a,
[data-theme="dark"] .seo-funnel-view .seo-hub-card{color:#edf1eb}
[data-theme="dark"] .seo-funnel-view .seo-cta{background:#72a987;color:#102018!important}

/* ── v2.1.0 — funnel entry pages ─────────────────────────────────────────
   v2.0 rendered every block as h2 + p + ul, which is what made these read as
   filler regardless of the words in them. Each block type now has its own
   shape, and the product appears early enough to be believable. */
.fn-wrap{max-width:760px;margin:0 auto;padding:26px 18px 90px}
.fn-article{display:flex;flex-direction:column;gap:26px}

.fn-head .fn-kicker{font-family:var(--body);font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green);margin:0 0 8px}
.fn-head h1{font-family:var(--disp);font-size:clamp(1.9rem,6vw,2.9rem);line-height:1.05;letter-spacing:.01em;margin:0}
.fn-dek{margin:12px 0 0;font-size:1.06rem;line-height:1.55;color:var(--mut)}

/* The answer the searcher came for, given its own weight. */
.fn-answer{background:var(--card);border:3.5px solid var(--ink);border-radius:16px;box-shadow:var(--hard-sm);padding:20px 22px}
.fn-answer-tag{display:inline-block;font-family:var(--body);font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.fn-answer p{margin:0;font-size:1.14rem;line-height:1.55;font-weight:600}

/* Product card, once, above the fold-ish. */
.fn-pick{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;
background:linear-gradient(180deg,#FFF9E4,var(--card));border:3.5px solid var(--ink);border-radius:18px;box-shadow:var(--hard);padding:18px}
.fn-pick-img{display:block;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff}
.fn-pick-img img{display:block;width:100%;height:132px;object-fit:contain}
.fn-pick-tag{display:inline-block;font-family:var(--body);font-size:.64rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--green)}
.fn-pick-body h2{font-family:var(--disp);font-size:1.42rem;line-height:1.12;margin:6px 0 6px}
.fn-pick-body p{margin:0 0 12px;font-size:.94rem;line-height:1.5;color:var(--mut)}
.fn-pick-cta{width:100%;justify-content:center}

.fn-body{display:flex;flex-direction:column;gap:24px}
.fn-body h2{font-family:var(--disp);font-size:1.5rem;line-height:1.14;margin:0 0 10px}
.fn-body p{margin:0 0 10px;font-size:1.02rem;line-height:1.62}
.fn-body p:last-child{margin-bottom:0}

.fn-text ul{margin:10px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px}

.fn-check{background:var(--card);border:3px solid var(--ink);border-radius:14px;padding:18px 20px;box-shadow:var(--hard-sm)}
.fn-check ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.fn-check li{position:relative;padding-left:30px;font-size:.99rem;line-height:1.5}
.fn-check li::before{content:"✓";position:absolute;left:0;top:-1px;width:21px;height:21px;border-radius:50%;
background:var(--green);color:#fff;font-size:.72rem;font-weight:900;display:grid;place-items:center}

.fn-specs dl{margin:0;display:flex;flex-direction:column;gap:0}
.fn-specs dl>div{display:grid;grid-template-columns:minmax(110px,34%) minmax(0,1fr);gap:14px;padding:11px 2px;border-top:2px solid var(--ink)}
.fn-specs dl>div:last-child{border-bottom:2px solid var(--ink)}
.fn-specs dt{font-weight:800;font-size:.86rem}
.fn-specs dd{margin:0;font-size:.96rem;color:var(--mut)}

.fn-compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fn-compare table{width:100%;border-collapse:collapse;min-width:420px}
.fn-compare th{text-align:left;font-size:.84rem;font-weight:800;padding:11px 12px;border-top:2px solid var(--ink);width:32%}
.fn-compare td{font-size:.94rem;padding:11px 12px;border-top:2px solid var(--ink);color:var(--mut)}
.fn-compare tr:last-child th,.fn-compare tr:last-child td{border-bottom:2px solid var(--ink)}

.fn-callout{margin:0;background:#FFF3C9;border-left:6px solid var(--yellow);border-radius:0 12px 12px 0;
padding:14px 18px;font-size:1rem;line-height:1.55;font-weight:600}

.fn-close{background:var(--card);border:3.5px solid var(--ink);border-radius:18px;box-shadow:var(--hard);padding:24px 22px;text-align:center}
.fn-close h2{font-family:var(--disp);font-size:1.72rem;margin:0 0 6px}
.fn-close p{margin:0 0 16px;color:var(--mut)}
.fn-close-cta{width:100%;justify-content:center}
.fn-close small{display:block;margin-top:14px;font-size:.76rem;color:var(--mut)}

.fn-related{display:flex;flex-direction:column;gap:8px}
.fn-related h2{font-family:var(--disp);font-size:1.2rem;margin:0 0 4px}
.fn-related a{display:flex;justify-content:space-between;gap:12px;align-items:center;text-decoration:none;color:var(--ink);
background:var(--card);border:2.5px solid var(--ink);border-radius:12px;padding:12px 15px;font-weight:600;font-size:.95rem}
.fn-related a:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.fn-related a span{color:var(--green);font-weight:900}

/* Sticky bar — revealed past the product card, hidden again at the closer. */
.fn-sticky{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));z-index:40;
display:flex;align-items:center;gap:12px;background:var(--card);border:3px solid var(--ink);border-radius:14px;
box-shadow:0 6px 0 var(--ink),0 14px 30px rgba(0,0,0,.22);padding:9px 10px 9px 15px;max-width:720px;margin:0 auto}
.fn-sticky.is-in{animation:fnStickyIn .22s ease both}
@keyframes fnStickyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fn-sticky.is-in{animation:none}}
.fn-sticky-name{flex:1;min-width:0;font-weight:700;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Deliberately smaller than a page CTA — it is a shortcut for someone already
   reading, not the main ask. */
.fn-sticky .btn-buy{flex:none;font-size:.86rem;letter-spacing:.03em;padding:7px 15px;min-height:38px;
border-width:2.5px;box-shadow:0 3px 0 var(--ink)}
.fn-sticky .btn-buy:hover{box-shadow:0 5px 0 var(--ink)}
.fn-sticky .btn-buy:active{box-shadow:0 1px 0 var(--ink)}

.fn-related-alt{margin-top:14px}

@media (max-width:640px){
  .fn-wrap{padding:20px 14px 96px}
  .fn-article{gap:20px}
  .fn-pick{grid-template-columns:1fr;gap:14px;text-align:center}
  .fn-pick-img img{height:168px}
  .fn-answer p{font-size:1.06rem}
  .fn-specs dl>div{grid-template-columns:1fr;gap:2px}
  .fn-sticky{padding:8px 9px 8px 13px}
  .fn-sticky-name{font-size:.8rem}
  .fn-sticky .btn-buy{font-size:.82rem;padding:6px 13px;min-height:36px}
}

/* ── v2.6.0 additions ──────────────────────────────────────────────── */
/* Streamlined breadcrumb (replaces the homepage nav that used to sit above
   the article). Blog → Category → current guide. */
.fn-crumbs{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 18px;font-size:.82rem;font-weight:700;color:var(--mut)}
.fn-crumbs a{color:var(--green);text-decoration:none}
.fn-crumbs a:hover{text-decoration:underline}
.fn-crumbs span[aria-hidden]{opacity:.5;font-weight:900}
.fn-crumb-current{color:var(--mut);font-weight:600}

/* Comparison table now carries a caption and a real header row so the two
   options are named instead of shown as bare A/B columns (roadmap #5). */
.fn-compare-cap{caption-side:top;text-align:left;font-family:var(--body);font-size:.72rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--green);padding:0 12px 10px}
.fn-compare thead th{background:var(--ink);color:var(--paper,#fff);font-weight:800;font-size:.8rem;
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.fn-compare thead th:first-child{border-top-left-radius:8px}
.fn-compare thead th:last-child{border-top-right-radius:8px}
.fn-compare tbody th{font-weight:800}
[data-theme="dark"] .fn-compare thead th{background:#2b332c;color:#eef3ee}

/* Sticky bar thumbnail (roadmap #12: small thumb + short name + view details). */
.fn-sticky-thumb{flex:none;width:34px;height:34px;object-fit:contain;border:2px solid var(--ink);
  border-radius:8px;background:#fff}