/* ==========================================================================
   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.5;}   /* taller line: the line above's descenders clear the pill */
.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;}
/* the world map is a FIXED, viewport-sized layer (surface.js): it holds through the hero,
   dims + zooms over the graph slide, and grows as it fades into the third slide */
.surf-map{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.sfhero,.sfgraph,.sfmiss{position:relative;z-index:1;}   /* sit above the fixed map while it's visible */
.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-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);max-width:30em;margin:24px auto 0;}   /* H3 / subhead - same as .sf-sub */
.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:17px;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-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:0;text-align:center;padding:0 16px;}   /* H3 / subhead - same as .sf-sub */
@media(max-width:680px){.sfbar__notes{grid-template-columns:1fr;}}

/* ---------- 4 the demo: interactive "check exposure" form -> live scan counter ----------
   A deck slide: copy left, the low-fi form right. Click "Start scan" and the form shrinks
   out while the counter fades in and rolls 0 -> 127,439 over a full 34s. */
.sfdemo__grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;width:100%;}
@media(max-width:880px){.sfdemo__grid{grid-template-columns:1fr;gap:40px;}}
.sfdemo__copy{text-align:left;}
.sfdemo__h{font-family:var(--font-display);font-weight:700;font-size:clamp(34px,4.4vw,60px);line-height:1.1;letter-spacing:-0.03em;color:var(--ink);margin:0;}
.sfdemo__p{font-size:19px;line-height:1.6;color:var(--ink);max-width:34em;margin:24px 0 0;}
.sfdemo__viz{position:relative;min-height:380px;}

/* state 1 - the low-fi form (placeholder bars instead of text, dashed "fill me in" frame) */
.sfx{background:var(--fill-1);border:2px dashed var(--slate-300);border-radius:var(--radius-card);padding:40px;transition:opacity .5s var(--ease-silk),transform .5s var(--ease-silk);}
.sfx__h{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:-0.02em;color:var(--ink);text-align:center;margin:0 0 28px;}
.sfx__field{margin-bottom:24px;}
.sfx__lab{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:8px;}
.sfx__input{display:flex;gap:12px;align-items:center;background:#fff;border-radius:var(--radius-input);padding:16px 20px;min-height:52px;}
.sfx__bar{height:12px;border-radius:var(--radius-pill);background:var(--slate-200);}
.sfx__bar--sub{display:block;height:8px;margin-top:12px;}
.sfx__btn{position:relative;display:block;margin:32px auto 0;background:var(--forest);color:var(--lime);font-family:var(--font-body);font-weight:700;font-size:16px;padding:16px 40px;border:0;border-radius:var(--radius-pill);cursor:pointer;transition:background .25s var(--ease-silk);}
.sfx__btn:hover{background:var(--green-900);}   /* colour only - the button never scales or shifts */
/* the blip: a soft lime ring emanates from the button and fades, echoing the FIRE
   detection-ring pulse. On a pseudo-element, so the button itself stays perfectly still. */
.sfx__btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:sfxping 2.8s var(--ease-silk) infinite;}
@keyframes sfxping{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lime) 55%, transparent);}55%,100%{box-shadow:0 0 0 14px color-mix(in srgb, var(--lime) 0%, transparent);}}
@media(prefers-reduced-motion:reduce){.sfx__btn::after{animation:none;}}

/* state 2 - the live counter (overlays the form's slot; crossfades in on scan) */
.sfx-count{position:absolute;left:0;right:0;top:50%;background:#fff;border-radius:var(--radius-card);padding:28px 32px 44px;box-shadow:0 25px 50px -12px color-mix(in srgb, var(--blueberry-companion) 35%, transparent);opacity:0;transform:translateY(-50%) scale(0.92);pointer-events:none;transition:opacity .5s var(--ease-silk),transform .5s var(--ease-silk);}   /* content-height card, centred in the slot */
.sfdemo__viz.is-scanning .sfx{opacity:0;transform:scale(0.9);pointer-events:none;}
.sfdemo__viz.is-scanning .sfx-count{opacity:1;transform:translateY(-50%) scale(1);pointer-events:auto;}
.sfx-count__main{display:flex;align-items:center;justify-content:center;gap:28px;}
.sfx-globe{position:relative;width:120px;height:120px;flex:none;}
.sfx-globe__c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}
.sfx-globe__ring{position:absolute;inset:0;width:120px;height:120px;transform:rotate(-90deg);}   /* start the bar at 12 o'clock */
.sfx-globe__track{fill:none;stroke:var(--slate-200);stroke-width:6;}
.sfx-globe__bar{fill:none;stroke:var(--blueberry-companion);stroke-width:6;stroke-linecap:round;stroke-dasharray:339.29;stroke-dashoffset:339.29;transition:stroke-dashoffset .2s linear;}
.sfx-count__readout{text-align:left;}
.sfx-count__num{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-0.03em;color:var(--blueberry-companion);font-variant-numeric:tabular-nums;}
.sfx-count__lab{font-size:16px;font-weight:600;color:var(--ink);margin-top:8px;}
.sfx-count__rate{position:absolute;left:16px;bottom:16px;background:var(--fill-1);color:var(--blueberry-companion);border-radius:var(--radius-pill);padding:4px 12px;font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}
.sfx-count__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;}
.sfx-count__watch svg{width:16px;height:16px;stroke-width:2.6;}
.sfx-count__restart{position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:var(--radius-pill);background:var(--fill-1);color:var(--blueberry-companion);cursor:pointer;opacity:0;pointer-events:none;transition:opacity 1s var(--ease-silk),background .2s ease;}
.sfx-count__restart svg{width:16px;height:16px;stroke-width:2.4;}
.sfx-count.is-done .sfx-count__restart{opacity:0.5;pointer-events:auto;}
.sfx-count.is-done .sfx-count__restart:hover{opacity:1;background:var(--blueberry);}
@media(prefers-reduced-motion:reduce){.sfx-globe__bar{transition:none;}.sfx-count__restart{transition:none;}}

/* ---------- 5 unique ---------- */
.sfuniq{padding:var(--space-xl) 0;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.5;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;background:var(--fill-1);color:var(--ink);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;}
/* color-code the icon only, not the whole card */
.fcard--scan .fcard__ic{background:var(--grapefruit-companion);color:var(--grapefruit);}
.fcard--rep .fcard__ic{background:var(--lemon-companion);color:var(--lemon);}
.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;}
}