/* ═══ v2 layer — the scanner, the shelf, and the atmosphere ═══
   Loaded after site.css. Everything here is additive. */

/* paper grain over the whole page — subtle tooth, not noise */
body::before{content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  mix-blend-mode:multiply}
.hd,main,footer{position:relative;z-index:2}

/* ══ THE SCANNER ══════════════════════════════════════════ */
.scanner{position:relative;background:#100D0B;padding:0;border-top:0!important;overflow:hidden}
.scanner-head{position:relative;z-index:3;max-width:1180px;margin:0 auto;
  padding:clamp(56px,7vw,92px) 24px clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:16px}
.scanner-head .kick{color:var(--tang)}
.scanner-head h2{color:#F7F3EF;font-size:clamp(34px,5vw,64px)}
.scanner-head p{color:rgba(247,243,239,.72);max-width:58ch;font-size:clamp(16px,1.6vw,19px)}

.table-wrap{position:relative;max-width:1560px;margin:0 auto;padding:0 12px clamp(40px,5vw,72px)}
.table{position:relative;border-radius:18px;overflow:hidden;cursor:none;
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9)}
.table>img{width:100%;display:block}
/* darkening veil that lifts as you scan */
.table .veil{position:absolute;inset:0;background:rgba(10,8,7,.5);
  transition:opacity .6s var(--ease);pointer-events:none}
.table.hot .veil{opacity:.25}

.hot-spot{position:absolute;cursor:none;background:transparent;border:0;padding:0;
  border-radius:8px;-webkit-tap-highlight-color:transparent}
.hot-spot::after{content:'';position:absolute;inset:-6%;border-radius:10px;
  box-shadow:0 0 0 2px rgba(255,106,46,0);transition:box-shadow .25s var(--ease)}
.hot-spot[aria-pressed="true"]::after{box-shadow:0 0 0 2px rgba(255,106,46,.55)}
.hot-spot:focus-visible{outline:3px solid var(--tang);outline-offset:4px}

/* corner reticle that snaps to the item */
.reticle{position:absolute;pointer-events:none;opacity:0;z-index:4;
  transition:all .32s cubic-bezier(.34,1.2,.64,1)}
.reticle.on{opacity:1}
.reticle i{position:absolute;width:20px;height:20px;border:3px solid var(--tang)}
.reticle i:nth-child(1){top:-3px;left:-3px;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:-3px;right:-3px;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:-3px;left:-3px;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:-3px;right:-3px;border-left:0;border-top:0}
.reticle::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--tang),transparent);
  animation:sweepdown 1.4s var(--ease) infinite}
@keyframes sweepdown{0%{top:0;opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%;opacity:0}}

/* the ID card that materialises */
.idcard{position:absolute;z-index:6;pointer-events:none;min-width:212px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
  border-radius:13px;padding:13px 15px;box-shadow:0 24px 60px -12px rgba(0,0,0,.7);
  opacity:0;transform:translateY(8px) scale(.96);transition:all .26s cubic-bezier(.34,1.3,.64,1)}
.idcard.on{opacity:1;transform:none}
.idcard .r1{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.idcard .r1 img{width:19px;height:19px}
.idcard .cat{font:700 9.5px JBMono,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--tang)}
.idcard .nm{font:700 15.5px/1.25 InterV,sans-serif;color:var(--ink);margin-bottom:9px}
.idcard .r2{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding-top:9px;border-top:1px solid rgba(15,15,15,.1)}
.idcard .val{font:700 19px JBMono,monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.idcard .up{font:700 12.5px JBMono,monospace;color:var(--good)}
.idcard .gr{font:600 10.5px InterV,sans-serif;color:var(--ink3);letter-spacing:.05em}

/* live tally */
.tally{position:relative;z-index:3;max-width:1560px;margin:0 auto;padding:0 24px clamp(52px,6vw,86px);
  display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,60px);align-items:flex-end}
.tally div span{display:block;font:700 10.5px JBMono,monospace;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(247,243,239,.5);margin-bottom:6px}
.tally div b{font:700 clamp(28px,4vw,46px)/1 JBMono,monospace;color:#F7F3EF;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tally div b.money{color:var(--tang)}
.tally .done{font-family:Fraunces,serif;font-variation-settings:'SOFT' 100,'opsz' 40,'wght' 600;
  font-style:italic;font-size:clamp(15px,1.7vw,19px);color:rgba(247,243,239,.62);
  letter-spacing:.02em;margin-left:auto;max-width:30ch;opacity:0;transition:opacity .5s var(--ease)}
.tally .done.on{opacity:1}
.scan-hint{display:none;font:600 13px InterV,sans-serif;color:rgba(247,243,239,.55);
  padding:0 24px 20px;max-width:1560px;margin:0 auto}
@media(pointer:coarse){.scan-hint{display:block}.table{cursor:default}}

/* loupe cursor that follows over the table */
.cursor-loupe{position:fixed;width:74px;height:74px;pointer-events:none;z-index:70;
  opacity:0;transition:opacity .2s;margin:-37px 0 0 -37px}
.cursor-loupe.on{opacity:1}
.cursor-loupe svg{width:100%;height:100%;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5))}

/* ══ THE SHELF (horizontal, draggable) ═══════════════════ */
.shelf-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 24px 30px;margin:0 -24px;scrollbar-width:none;cursor:grab}
.shelf-scroll::-webkit-scrollbar{display:none}
.shelf-scroll.drag{cursor:grabbing;scroll-snap-type:none}
.shelf-card{flex:0 0 clamp(232px,26vw,282px);scroll-snap-align:start;
  background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--sh);transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  transform-style:preserve-3d}
.shelf-card:hover{transform:translateY(-6px) rotateX(3deg) rotateY(-3deg);box-shadow:var(--sh-lg)}
.shelf-card .ph{position:relative;aspect-ratio:1;background:
  radial-gradient(120% 90% at 50% 22%,#FFF 0%,#F0EBE6 62%,#E4DDD5 100%);
  display:flex;align-items:center;justify-content:center;padding:16px}
.shelf-card .ph img{max-width:82%;max-height:82%;width:auto;
  filter:drop-shadow(0 14px 20px rgba(20,12,6,.28))}
.shelf-card .ph::after{content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(112deg,transparent 34%,rgba(255,255,255,.72) 47%,rgba(255,106,46,.34) 55%,transparent 68%)}
.shelf-card:hover .ph::after{opacity:1;animation:sweep .7s var(--shimmer-ease)}
.shelf-card .meta{padding:15px 17px 18px;display:flex;flex-direction:column;gap:5px}
.shelf-card .nm{font:700 16px InterV,sans-serif;color:var(--ink)}
.shelf-card .sub{font:600 11.5px JBMono,monospace;color:var(--ink3);letter-spacing:.04em}
.shelf-card .row{display:flex;align-items:baseline;justify-content:space-between;
  margin-top:8px;padding-top:11px;border-top:1px solid var(--line)}
.shelf-card .pv{font:700 19px JBMono,monospace;color:var(--ink);font-variant-numeric:tabular-nums}
.shelf-card .up{font:700 12.5px JBMono,monospace;color:var(--good)}
.shelf-rail{display:flex;align-items:center;gap:10px;margin-top:4px}
.shelf-rail .bar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.shelf-rail .bar i{display:block;height:100%;background:var(--tang);border-radius:2px;width:22%}

/* ══ STEPS (sticky phone) ════════════════════════════════ */
.steps{display:grid;gap:clamp(30px,5vw,72px)}
@media(min-width:960px){.steps{grid-template-columns:.85fr 1.15fr;align-items:start}}
.steps-phone{position:sticky;top:110px;justify-self:center}
@media(max-width:959px){.steps-phone{display:none}}
.steps-list{display:flex;flex-direction:column;gap:clamp(20px,3vw,34px)}
.step{display:flex;gap:20px;padding:26px 28px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  transition:border-color .3s var(--ease)}
.step.act{border-color:var(--tang)}
.step b{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background:var(--sunk);
  color:var(--ink3);display:flex;align-items:center;justify-content:center;
  font:700 16px JBMono,monospace;transition:all .3s var(--ease)}
.step.act b{background:var(--tang);color:#fff}
.step .tx h3{margin-bottom:7px}
.step .tx p{font-size:15.5px;color:var(--ink2)}
.step-shot{display:none}
@media(max-width:959px){.step-shot{display:block;margin-top:16px;border-radius:14px;overflow:hidden;
  border:1px solid var(--line);max-width:210px}}

/* ══ PROOF strip ═════════════════════════════════════════ */
.proof{background:var(--ink);border-top:0!important}
.proof .kick{color:var(--tang)}
.proof h2{color:#F7F3EF}
.proof-grid{display:grid;gap:1px;background:rgba(255,255,255,.12);border-radius:var(--r-lg);
  overflow:hidden;margin-top:clamp(30px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.proof-grid div{background:var(--ink);padding:clamp(24px,3vw,34px)}
.proof-grid b{display:block;font:700 clamp(30px,4vw,48px)/1 JBMono,monospace;color:#F7F3EF;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.proof-grid span{display:block;margin-top:9px;font-size:13px;color:rgba(247,243,239,.6);line-height:1.4}

/* ══ FAQ ═════════════════════════════════════════════════ */
.faq{display:grid;gap:12px;max-width:900px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;transition:border-color .2s var(--ease)}
.faq details[open]{border-color:var(--line2)}
.faq summary{cursor:pointer;padding:22px 26px;font:650 17.5px InterV,sans-serif;
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';flex:0 0 auto;width:11px;height:11px;
  border-right:2.5px solid var(--tang);border-bottom:2.5px solid var(--tang);
  transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq .ans{padding:0 26px 24px;color:var(--ink2);font-size:16px;max-width:64ch}

/* ══ hero tweaks for v2 ══════════════════════════════════ */
.hero-mini{display:flex;gap:26px;flex-wrap:wrap;margin-top:4px}
.hero-mini div b{display:block;font:700 21px JBMono,monospace;color:var(--ink);
  font-variant-numeric:tabular-nums}
.hero-mini div span{font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}

@media (prefers-reduced-motion:reduce){
  .reticle::before{animation:none}
  .shelf-card:hover{transform:none}
  .shelf-card:hover .ph::after{animation:none;opacity:0}
  .cursor-loupe{display:none!important}
  .table .veil{opacity:.25}
}

/* ═══ v3: density, bulk section, feature cards, band CTA, capture ═══ */

/* global: sections were far too airy */
section{padding:clamp(60px,6.5vw,92px) 0}
.sec-head{margin-bottom:clamp(28px,3vw,40px)}
.hero{padding:clamp(30px,3.5vw,52px) 0 clamp(44px,5vw,72px)}
.hero-mark{width:44px;height:44px;display:none}

/* hero: proof strip fills the dead band under the CTA */
.hero-proof{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line)}
.hero-proof .st{display:flex;align-items:center;gap:7px;font:600 13.5px InterV,sans-serif;color:var(--ink2)}
.hero-proof .st b{font:700 15px JBMono,monospace;color:var(--ink)}
.hero-proof .dot{width:5px;height:5px;border-radius:50%;background:var(--tang);flex:0 0 auto}

/* ── BULK section: the numbers are the story ── */
.bulk-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:clamp(26px,3vw,38px)}
.bulk-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 24px;box-shadow:var(--sh);position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.bulk-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.bulk-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--tang)}
.bulk-card .n{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.bulk-card .n b{font:700 clamp(38px,4.4vw,54px)/1 JBMono,monospace;color:var(--tang);letter-spacing:-.03em}
.bulk-card .n span{font:600 12.5px InterV,sans-serif;color:var(--ink3);letter-spacing:.04em}
.bulk-card h3{font-size:19px;margin:10px 0 8px}
.bulk-card p{font-size:14.5px;color:var(--ink2);line-height:1.55}

/* ── FEATURES: scannable, not a wall ── */
.feats{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.feat{padding:26px 26px 24px;position:relative}
.feat .fh{display:flex;align-items:center;gap:11px;margin-bottom:6px}
.feat .fi{width:34px;height:34px;border-radius:10px;background:var(--tang);flex:0 0 auto;
  display:flex;align-items:center;justify-content:center}
.feat .fi svg{width:19px;height:19px;stroke:#fff;stroke-width:2.1;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-family:Fraunces,serif;font-variation-settings:'SOFT' 100,'opsz' 60,'wght' 780;
  font-size:20px;letter-spacing:-.01em;color:var(--ink);text-transform:none}
.feat .cnt{margin-left:auto;font:700 11px JBMono,monospace;color:var(--tang);
  background:var(--tang-soft,rgba(255,106,46,.1));border-radius:999px;padding:4px 10px;letter-spacing:.06em}
.feat ul{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);line-height:1.5}
.feat li{padding:5px 0 5px 20px;position:relative;font-size:14.5px;color:var(--ink2)}
.feat li::before{content:'';position:absolute;left:0;top:12px;width:7px;height:7px;
  border-radius:2px;background:var(--line2)}
.feat li:first-child{color:var(--ink);font-weight:650}
.feat li:first-child::before{background:var(--tang)}

/* ── cards3 with photos ── */
.card.has-img{padding:0;overflow:hidden}
.card.has-img .cimg{width:100%;aspect-ratio:3/2;object-fit:cover}
.card.has-img .ctx{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px}

/* ── overlays sit OUTSIDE the clipped frame ──
   .photo-card stays overflow:visible so the phone/seal can hang off the edge;
   the photo + shimmer live in .frame which does the clipping. */
.photo-card{overflow:visible;background:none;box-shadow:none}
.photo-card>.frame{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-lg)}
.photo-card>.frame>img{width:100%;height:100%;object-fit:cover}
.photo-card>.frame>.sweep{position:absolute;inset:-20%;pointer-events:none;opacity:0;
  background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.6) 45%,rgba(255,106,46,.4) 55%,transparent 70%);
  transform:translateX(-80%)}
.photo-card.play>.frame>.sweep{opacity:1;animation:sweep .6s var(--shimmer-ease) forwards}
.shelf-device{position:absolute;right:-3%;bottom:-7%;width:32%;max-width:180px;z-index:3;
  filter:drop-shadow(0 26px 40px rgba(20,12,6,.45))}
/* the seal is an overlay, never a fill */
.photo-card>.stamp{width:clamp(84px,9vw,126px);height:auto;object-fit:contain;z-index:4}

/* ── band: scrim + CTA ── */
.band-photo::after{background:linear-gradient(to top,rgba(12,9,7,.9),rgba(12,9,7,.45) 42%,rgba(12,9,7,.12))}
.band-cta{display:inline-flex;align-items:center;gap:9px;margin-top:8px;align-self:flex-start;
  background:var(--tang);color:#fff;text-decoration:none;font:700 15px InterV,sans-serif;
  padding:13px 26px;border-radius:999px}
.band-copy p{max-width:52ch;font-size:clamp(16px,1.7vw,19px)}

/* ── compare: Trovetto column highlighted ── */
table th:nth-child(2),table td:nth-child(2){background:rgba(255,106,46,.055)}
table th.tv{border-bottom:2px solid var(--tang)}
td.x{color:var(--stone)}

/* ── scout: two columns, no dead half ── */
.scout-grid{grid-template-columns:1fr}
@media(min-width:900px){.scout-grid{grid-template-columns:.78fr 1.22fr;gap:clamp(30px,4vw,56px)}}

/* ── FAQ: two columns so the right half isn't empty ── */
@media(min-width:980px){
  .faq-wrap{display:grid;grid-template-columns:34% 1fr;gap:clamp(36px,5vw,72px);align-items:start}
  .faq-wrap .sec-head{margin-bottom:0;position:sticky;top:104px}
}
.faq summary{padding:20px 24px;font-size:16.5px}
.faq .ans{padding:0 24px 22px;font-size:15.5px}

/* ── pictos: image stretches to the grid ── */
@media(min-width:980px){.picto-wrap{align-items:stretch}
  .picto-panel{position:static;height:100%}
  .picto-panel img{height:100%}}

/* ── CTA: real capture instead of a dead end ── */
.cta-capture{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;width:100%;max-width:520px}
.cta-capture input{flex:1 1 240px;border:0;border-radius:999px;padding:15px 22px;
  font:500 16px InterV,sans-serif;color:var(--ink);background:#fff;min-width:0}
.cta-capture input::placeholder{color:var(--ink3)}
.cta-capture button{background:var(--ink);color:#fff;border:0;border-radius:999px;
  padding:15px 28px;font:700 15px InterV,sans-serif;cursor:pointer;white-space:nowrap}
.cta-capture button:hover{background:#000}
.cta-or{font:600 12px JBMono,monospace;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin-top:4px}
.storebtn{padding:9px 20px;opacity:.92}

/* ── marquee of categories ── */
.marq{padding:0;border-top:1px solid var(--line)!important;border-bottom:1px solid var(--line);
  overflow:hidden;background:var(--surface)}
.marq-track{display:flex;gap:34px;padding:16px 0;width:max-content;
  animation:marq 48s linear infinite}
.marq-track span{display:flex;align-items:center;gap:9px;white-space:nowrap;
  font:650 14.5px InterV,sans-serif;color:var(--ink2)}
.marq-track img{opacity:.75}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq-track{animation:none}}

/* ── footer: legal spans the width ── */
.notices{max-width:none}
.notices p{max-width:none;columns:2;column-gap:44px}
@media(max-width:760px){.notices p{columns:1}}
.ft img{height:34px}
.shelf-card .paid{font:600 12.5px JBMono,monospace;color:var(--ink3);margin-top:2px}
.hero-proof{gap:12px 22px}
.hero-proof .st{font-size:13px}
/* mosaic panel: 4 photos showing real breadth, not another pile of cards */
.picto-panel.mosaic{display:grid;grid-template-columns:1fr 1fr;gap:8px;aspect-ratio:auto;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);background:none}
.picto-panel.mosaic img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;border-radius:10px}
@media(max-width:979px){.picto-panel.mosaic{display:grid;margin-top:22px}}
/* 6-up mosaic */
@media(min-width:980px){.picto-panel.mosaic{grid-template-columns:1fr 1fr}}
.picto-panel.mosaic img{aspect-ratio:4/3}

/* ═══ responsive hardening ═══════════════════════════════ */

/* 320px: steps were forcing a 354px scroll */
@media(max-width:400px){
  .step{padding:20px 18px;gap:14px}
  .step b{width:34px;height:34px;font-size:14px}
  .step .tx h3{font-size:19px}
  .step .tx p{font-size:14.5px}
  .wrap{padding:0 18px}
  .shelf-scroll{padding-left:18px;padding-right:18px;margin:0 -18px}
  .bulk-card{padding:22px 20px}
  .bulk-card .n b{font-size:34px}
  .feat{padding:22px 20px}
  .hero h1{font-size:clamp(34px,10vw,44px)}
  .scanner-head h2,.proof h2{font-size:clamp(28px,8.5vw,36px)}
  .cta-capture input,.cta-capture button{flex:1 1 100%}
}

/* tap targets: nothing interactive under 44px on touch */
@media(max-width:820px){
  footer .ft a{display:inline-block;padding:11px 0;min-height:44px;line-height:22px}
  .hd-logo{display:flex;align-items:center;min-height:44px}
  .lang{min-height:44px;display:inline-flex;align-items:center}
  .crumb{min-height:44px;display:inline-flex;align-items:center}
  .bar nav a,.hd nav a{min-height:44px;display:inline-flex;align-items:center}
  .storebtn{min-height:48px;justify-content:center}
  .picto{min-height:48px}
  .faq summary{min-height:52px}
}

/* legibility floor: nothing under 12px */
.tally div span,.idcard .cat,.scan-live .hint,.stat span,.mini div span,
.proof-grid span,.hero-proof .st,.shelf-card .sub,.bulk-card .n span{font-size:12px}
.feat .cnt{font-size:11.5px}
.idcard .gr{font-size:11.5px}
.kick{font-size:12px}
@media(min-width:700px){.kick{font-size:12.5px}}

/* tablet: two-up feature/bulk grids read better than three */
@media(min-width:700px) and (max-width:1000px){
  .feats,.bulk-grid{grid-template-columns:1fr 1fr}
  .picto-grid{grid-template-columns:repeat(3,1fr)}
}

/* very wide: stop the hero photo ballooning */
@media(min-width:1600px){
  .wrap{max-width:1240px}
  .table-wrap{max-width:1500px}
}