/* ==========================================================================
   Evidence Surface product page - Full Elevate brand, BLUEBERRY theme
   (Surface wears its mega-menu pairing: blueberry blue / dark blueberry).
   Tokens from ../../../brand/elevate-tokens.css; chrome from ../../site.css.
   Spacing on the 4px grid per the brand rule.
   ========================================================================== */

/* ---------- shared page bits ---------- */
/* overflow guard on BODY (on main it would create a nested scroll container) */
body{overflow-x:hidden;}
.surf .hl{position:relative;z-index:-1;background:var(--blueberry);color:var(--blueberry-companion);font-family:var(--font-display);font-weight:700;border-radius:8px;padding:4px 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}   /* z-index:-1: the pill never covers the previous line's descenders */
.sf-h{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,4.6vw,56px);line-height:1.2;letter-spacing:-0.03em;color:var(--ink);margin:0;text-align:center;}
.sf-h .hl{font-size:inherit;line-height:1.2;}
.sf-sub{font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.4vw,28px);line-height:1.3;letter-spacing:-0.02em;color:var(--ink);margin:16px auto 0;text-align:center;}
.sf-p{font-size:18px;line-height:1.6;color:var(--ink);max-width:680px;margin:32px auto 0;text-align:center;}

/* ---------- 1 hero: the already-mapped internet ---------- */
.sfhero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:96px 24px;overflow:hidden;}
.sfhero__map{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.sfhero__scrim{position:absolute;inset:0;pointer-events:none;background:radial-gradient(54% 48% at 50% 46%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0) 78%);}
.sfhero__copy{position:relative;z-index:1;max-width:960px;}
.sfhero__h{font-family:var(--font-display);font-weight:700;font-size:clamp(38px,5.4vw,76px);line-height:1.1;letter-spacing:-0.035em;color:var(--ink);margin:0;}   /* no text glow - the scrim handles legibility */
.sfhero__lead{font-size:20px;line-height:1.6;color:var(--ink);max-width:44em;margin:28px auto 0;}
.sfhero__cta{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap;}

/* ---------- 2 evidence graph + the numbers ---------- */
.sfgraph{padding:var(--space-2xl) 0 var(--space-xl);}
.sfstats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1080px;margin:var(--space-lg) auto 0;}
@media(max-width:880px){.sfstats{grid-template-columns:repeat(2,1fr);}}
.sfstat{background:var(--fill-1);border-radius:var(--radius-card);padding:24px;text-align:center;}
.sfstat__n{font-family:var(--font-display);font-weight:700;font-size:clamp(32px,3.2vw,44px);line-height:1;letter-spacing:-0.03em;color:var(--blueberry-companion);font-variant-numeric:tabular-nums;}
.sfstat__l{font-size:15px;font-weight:600;color:var(--ink);margin-top:8px;}

/* ---------- 3 the 40% ---------- */
.sfmiss{padding:var(--space-xl) 0;text-align:center;}
.sfbar{display:flex;max-width:880px;height:64px;margin:40px auto 0;border-radius:var(--radius-pill);overflow:hidden;font-size:15px;font-weight:700;}
/* the bar tells its story on reveal: the light segment sweeps the full width ("tools think
   they see it all"), then the dark 40% pushes in from the right to claim what they miss */
.sfbar__seen{flex-grow:0.001;flex-basis:0;display:flex;align-items:center;justify-content:center;background:var(--blueberry);color:var(--blueberry-companion);padding:0 16px;transition:flex-grow .9s var(--ease-silk);}
.sfbar__miss{flex-grow:0.001;flex-basis:0;display:flex;align-items:center;justify-content:center;background:var(--blueberry-companion);color:var(--blueberry);padding:0 16px;transition:flex-grow .9s var(--ease-silk) .45s;}
.sfbar.in .sfbar__seen{flex-grow:60;}
.sfbar.in .sfbar__miss{flex-grow:40;}
.sfbar span{white-space:nowrap;opacity:0;transition:opacity .45s ease-out;}
.sfbar.in .sfbar__seen span{opacity:1;transition-delay:.7s;}
.sfbar.in .sfbar__miss span{opacity:1;transition-delay:1.3s;}
@media(max-width:680px){.sfbar{flex-direction:column;height:auto;}.sfbar__seen,.sfbar__miss{flex:none;padding:16px;}.sfbar span{opacity:1;transition:none;}}
@media(prefers-reduced-motion:reduce){
  .sfbar__seen{flex-grow:60;transition:none;}
  .sfbar__miss{flex-grow:40;transition:none;}
  .sfbar span{opacity:1;transition:none;}
}
/* the find/miss details sit under their own bar segment (same 60/40 split) */
.sfbar__notes{display:grid;grid-template-columns:60fr 40fr;gap:24px;max-width:880px;margin:24px auto 0;}
.sfbar__note{font-size:24px;line-height:1.4;color:var(--ink);margin:0;text-align:center;padding:0 16px;}
@media(max-width:680px){.sfbar__notes{grid-template-columns:1fr;}}

/* ---------- 4 the demo: a full-screen scroll takeover (the warranty-slide effect) ----------
   the blueberry card grows to overfill the viewport; headline, paragraph and the counter
   stage in under scroll; the counter rolls 0 -> 127,439 while the stopwatch runs to 1:08 */
.sfdemo{position:relative;min-height:280vh;}
.sfdemo__take{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;}
.sfdemo__bg{position:absolute;left:50%;top:50%;width:min(780px,90vw);height:440px;transform:translate(-50%,-50%) scale(1);transform-origin:center;background:var(--blueberry);border-radius:28px;}
.sfdemo__stage{position:relative;z-index:2;width:100%;max-width:960px;padding:0 24px;text-align:center;color:var(--blueberry-companion);display:flex;flex-direction:column;align-items:center;}
.sfdemo__h{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,48px);line-height:1.15;letter-spacing:-0.03em;margin:0;max-width:18ch;}   /* visible from the card's first frame (home-warranty pattern) */
.sfdemo__p{font-size:19px;line-height:1.6;max-width:600px;margin:24px auto 0;opacity:0;}
.sfdemo__count{position:relative;background:#fff;border-radius:24px;padding:40px 56px 48px;margin-top:36px;opacity:0;box-shadow:0 25px 50px -12px color-mix(in srgb, var(--blueberry-companion) 35%, transparent);}
.sfdemo__num{font-family:var(--font-display);font-weight:700;font-size:clamp(56px,9vw,128px);line-height:1;letter-spacing:-0.03em;color:var(--blueberry-companion);font-variant-numeric:tabular-nums;}
.sfdemo__numlab{font-size:16px;font-weight:600;color:var(--ink);margin-top:8px;}
.sfdemo__watch{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;background:var(--blueberry);color:var(--blueberry-companion);border-radius:var(--radius-pill);padding:4px 12px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}
.sfdemo__watch svg{width:16px;height:16px;stroke-width:2.6;}

/* ---------- 5 unique ---------- */
/* pulled up into the takeover's exit fade so no blank white sits between the slides */
.sfuniq{padding:var(--space-xl) 0;margin-top:-40vh;position:relative;}
.sfuniq__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--space-md);}
@media(max-width:880px){.sfuniq__grid{grid-template-columns:1fr;}}
.ucard{background:var(--fill-1);border-radius:var(--radius-card);padding:36px;}
.ucard__ic{display:inline-flex;width:44px;height:44px;border-radius:14px;background:var(--blueberry);color:var(--blueberry-companion);align-items:center;justify-content:center;margin-bottom:20px;}
.ucard__ic svg{width:36px;height:36px;stroke-width:2.4;}
.ucard h3{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-0.02em;color:var(--ink);margin:0 0 8px;}
.ucard p{font-size:16px;line-height:1.55;color:var(--ink);margin:0;}

/* ---------- 6 the pull quote ---------- */
.sfquote{padding:var(--space-lg) 0;}
.sfquote__box{background:var(--blueberry);color:var(--blueberry-companion);border-radius:var(--radius-card);max-width:800px;margin:var(--space-sm) auto 0;padding:32px 40px;font-family:var(--font-display);font-weight:700;font-size:clamp(22px,2.6vw,30px);line-height:1.3;letter-spacing:-0.02em;text-align:center;}
.sfquote__box strong{background:var(--blueberry-companion);color:var(--blueberry);border-radius:8px;padding:4px 12px;-webkit-box-decoration-break:clone;box-decoration-break:clone;}

/* ---------- 7 surface feeds everything (siblings wear their own pairings) ---------- */
.sffeeds{padding:var(--space-lg) 0;}
.sffeeds__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:var(--space-sm);}
@media(max-width:880px){.sffeeds__grid{grid-template-columns:1fr;}}
.fcard{display:block;border-radius:var(--radius-card);padding:24px;transition:transform .25s var(--ease-silk);}
.fcard:hover{transform:translateY(-4px);}
.fcard h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.02em;margin:0 0 8px;}
.fcard p{font-size:16px;line-height:1.55;margin:0;}
.fcard__ic{display:inline-flex;width:40px;height:40px;border-radius:12px;align-items:center;justify-content:center;margin-bottom:12px;}
.fcard__ic svg{width:32px;height:32px;stroke-width:2.4;}
.fcard--scan{background:var(--grapefruit);color:var(--grapefruit-companion);}
.fcard--scan .fcard__ic{background:var(--grapefruit-companion);color:var(--grapefruit);}
.fcard--rep{background:var(--lemon);color:var(--lemon-companion);}
.fcard--rep .fcard__ic{background:var(--lemon-companion);color:var(--lemon);}
.fcard--warr{background:var(--lime-300);color:var(--forest);}
.fcard--warr .fcard__ic{background:var(--forest);color:var(--lime-300);}

/* ---------- 8 who it's for ---------- */
.sffor{padding:var(--space-xl) 0;}
.sffor__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:var(--space-md);}
@media(max-width:1080px){.sffor__grid{grid-template-columns:1fr 1fr;}}
@media(max-width:680px){.sffor__grid{grid-template-columns:1fr;}}
.acard{background:var(--fill-1);border-radius:var(--radius-card);padding:32px;}
.acard__ic{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--blueberry);color:var(--blueberry-companion);align-items:center;justify-content:center;margin-bottom:16px;}
.acard__ic svg{width:32px;height:32px;stroke-width:2.4;}
.acard h3{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--ink);margin:0 0 8px;}
.acard p{font-size:15px;line-height:1.55;color:var(--ink);margin:0;}

/* ---------- 9 dark closer (bright blueberry on its dark companion) ---------- */
.sffinal{padding:var(--space-lg) 0 0;}
.sffinal__panel{background:var(--blueberry-companion);border-radius:var(--radius-card);padding:80px 56px;text-align:center;color:var(--blueberry);}
@media(max-width:880px){.sffinal__panel{padding:48px 24px;}}
.sffinal__h{font-family:var(--font-display);font-weight:700;font-size:clamp(36px,5vw,68px);line-height:1.05;letter-spacing:-0.03em;margin:0;}
.sffinal__p{font-size:18px;line-height:1.6;max-width:42em;margin:24px auto 0;}
.sffinal__btn{background:var(--blueberry);color:var(--blueberry-companion);margin-top:32px;}
.sffinal__btn:hover{background:#fff;}

/* ---------- reveal-on-scroll (the shared motion language) ---------- */
.r{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-silk),transform .6s var(--ease-silk);}
.r.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){
  .r{opacity:1;transform:none;transition:none;}
}