/* Product photography: original pixels and approved school vectors. */
.product-image{display:block;width:100%;height:auto;border-radius:10px}
.photo-hero{position:relative;margin-top:32px;padding:0;isolation:isolate;overflow:hidden;border-radius:14px;background:#f7f5f0;text-align:left}
.photo-hero picture{display:block;width:100%;position:relative;z-index:-1}
.photo-hero .hero-copy{position:absolute;left:5%;top:15%;width:36%;max-width:440px}
.photo-hero h1{font-size:clamp(36px,5.4vw,68px);line-height:1.04;margin:0 0 24px}
.photo-hero .lede{font-size:clamp(15px,1.5vw,18px);line-height:1.65;margin:0}
.reference-detail{max-width:580px;margin:32px auto 0}
.reference-detail img{max-height:430px;object-fit:contain}
.tagmedia{width:clamp(300px,40vw,500px)}
.tagmedia:not(:has(.tagphoto)) .fbrow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tagmedia .fbrow .fbitem img{width:100%;height:auto;max-width:none;max-height:none;filter:none;border-radius:10px}
.tagmedia .fbrow .fbitem span{font-size:11px}
.school-examples{padding-top:16px;padding-bottom:48px}
.school-examples h2{font-size:clamp(36px,5vw,60px);margin-top:12px}
.school-examples .lede{margin-top:18px}
.school-examples figure{margin:30px 0 0}
.school-examples figcaption,.school-detail figcaption{font-size:13px;line-height:1.65;color:#51677a;margin-top:14px}
.school-detail{margin:0;width:100%;max-width:600px;justify-self:center}
.anat{grid-template-columns:minmax(150px,1fr) minmax(300px,520px) minmax(150px,1fr)}
.verified-collection{max-width:700px;margin-inline:auto}
.vet-stage .product-image{width:min(100%,560px);height:auto;max-height:none;transform:none;filter:none}
.vet-face .product-image,.vet-backshot .product-image,.closeshot .product-image{filter:none;border-radius:10px}
@media(max-width:700px){
 .photo-hero{margin:24px 16px 0;max-width:calc(100% - 32px)}
 .photo-hero .hero-copy{position:relative;left:auto;top:auto;width:auto;max-width:none;padding:30px 24px 8px}
 .photo-hero h1{font-size:46px;margin-bottom:18px}
 .photo-hero .lede{font-size:16px}
 .photo-hero picture{z-index:0}
 .photo-hero picture img{aspect-ratio:6/7;object-fit:contain}
 .tagmedia{width:100%;max-width:480px}
 .school-examples picture img{aspect-ratio:976/1490;object-fit:contain}
 .school-detail{max-width:480px}
 .anat{grid-template-columns:1fr}
}
/* Product shots are cut out on transparent backgrounds (2026-10-21, Steve: the
   off-white photo blocks looked wrong on the white and dark pages). Keep page
   colour behind them; a soft shadow keeps the tags grounded. */
.photo-hero{background:transparent;border-radius:0;overflow:visible}
.product-image:not(.tagphoto){border-radius:0;filter:drop-shadow(0 10px 14px rgba(0,0,0,.16))}
.vet-stage .product-image,.vet-face .product-image,.vet-backshot .product-image,.closeshot .product-image,.verified-collection .product-image{filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))}

/* How-it-works tap diagram (Steve 2026-10-21: a drawing, not another product photo) */
.nfcdiagram{margin:clamp(34px,4.5vw,52px) auto 0;max-width:640px}
.nfcdiagram svg{display:block;width:100%;height:auto}
.nfcdiagram .td-h{font:700 15px Montserrat,sans-serif;letter-spacing:.18em;fill:var(--ink)}
.nfcdiagram .td-c{font:500 15px Montserrat,sans-serif;fill:var(--ink-2)}
.nfcdiagram .td-phone{fill:#fff;stroke:var(--ink);stroke-width:3}
.nfcdiagram .td-cam{fill:none;stroke:var(--ink);stroke-width:2.5}
.nfcdiagram .td-zone{fill:var(--accent);opacity:.16}
.nfcdiagram .td-tag{fill:#fff;stroke:var(--ink-2);stroke-width:2.5}
.nfcdiagram .td-hole{fill:none;stroke:var(--ink-2);stroke-width:2}
.nfcdiagram .td-wave{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.nfcdiagram .td-arrow{stroke:var(--accent);stroke-width:3}
.nfcdiagram .td-div{stroke:var(--rule);stroke-width:1.5;stroke-dasharray:4 6}
.nfcdiagram figcaption{margin-top:14px;font-size:14.5px;line-height:1.6;text-align:center;color:var(--ink-2)}
.nfcdiagram figcaption strong{color:var(--band-ink)}
.nfcdiagram .td-screen{fill:#E3E8EC}
.nfcdiagram .td-edge{stroke:var(--accent);stroke-width:7;stroke-linecap:round}

/* "What a tap can open" phone screens (Steve 2026-10-21) */
.whatopens{margin-top:clamp(44px,6vw,72px)}
.whatopens h3{text-align:center;font-size:clamp(26px,3.4vw,38px);margin:0 0 24px}
.opengrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.6vw,36px);max-width:1040px;margin:0 auto}
.opencard{margin:0;text-align:center}
.opencard svg{display:block;width:100%;max-width:220px;height:auto;margin:0 auto}
.opencard figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-2)}
.opencard figcaption b{display:block;color:var(--ink);font-size:15px;margin-bottom:2px}
.oc-phone{fill:#fff;stroke:var(--ink);stroke-width:3}
.oc-notch{fill:var(--ink)}
.oc-to{font:600 12px Montserrat,sans-serif;fill:var(--ink)}
.oc-rule{stroke:var(--rule);stroke-width:1}
.oc-bubble{fill:#E9EEF2}
.oc-b{font:500 12px Montserrat,sans-serif;fill:var(--ink)}
.oc-field{fill:none;stroke:var(--rule);stroke-width:1.5}
.oc-send{fill:var(--accent)}
.oc-arrowup{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.oc-name{font:600 18px Montserrat,sans-serif;fill:var(--ink)}
.oc-num{font:500 13px Montserrat,sans-serif;fill:var(--ink-2)}
.oc-call{fill:#2E9E5B}
.oc-handset{fill:#fff}
@media(max-width:820px){.opengrid{grid-template-columns:1fr 1fr}}
.oc-dark{fill:#14110A}
.oc-yk{font:700 9px Montserrat,sans-serif;letter-spacing:.04em;fill:#9C9684}
.oc-yh{font:400 28px "Bebas Neue","Arial Narrow",Impact,sans-serif;fill:#F2C200}
.oc-ybtn{fill:none;stroke:#F2C200;stroke-width:1.5}
.oc-yt{font:700 13px Montserrat,sans-serif;fill:#F2C200}
.oc-yf{font:500 11px Montserrat,sans-serif;fill:#9C9684;text-decoration:underline}

/* Shop shelf sits inside How it works, under the phone screens (Steve 2026-10-21) */
.shopmid{margin:clamp(44px,6vw,72px) auto 0;text-align:center;scroll-margin-top:80px}
.shopmid>h3{font-size:clamp(30px,4vw,44px);margin:0}
.shopmid>.lede{margin:10px auto 24px;max-width:56ch}
.shopmid .stockgrid{text-align:left}
.shopmid .stockempty{text-align:center}
/* Lifestyle photos. Full frame, square corners, no fade or crop, so nobody loses
   a head. Each photo sits on the side of its block where its tag faces inward,
   and the front/back cut-outs line up under the tag, so the eye goes person,
   tag in the photo, the real tag, then the words. */
img.life{display:block;width:100%;height:auto;border-radius:0;filter:none}
.tagblock:has(img.life) .tagmedia{width:clamp(300px,48vw,600px);align-items:stretch;gap:18px}
.tagblock:has(img.life) .fbrow{justify-content:flex-end;padding-inline:4%}
.tagblock.reverse:has(img.life) .fbrow{justify-content:flex-start}
.tagblock:has(img.life) .fbrow .fbitem img{max-width:120px;max-height:120px}
#iffound .fbrow{justify-content:center}
.c988-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.c988-life{margin:0}
.vet-left{display:flex;flex-direction:column;gap:22px}
.vet-prod:not(.vet-row2){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.vet-left .vet-faces{width:100%}
.vet-lifeshot{margin:0}
.vet-row2{margin-top:clamp(40px,6vw,88px);align-items:center}
.school-life{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,36px);margin-top:32px}
.school-life figure{margin:0}
@media (max-width:900px){.c988-top,.vet-prod:not(.vet-row2){grid-template-columns:1fr}.vet-left .vet-faces{width:100%}}
@media (max-width:700px){.school-life{grid-template-columns:1fr}}
.school-life{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:8px}
.teamask{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.teamshot{margin:0}
@media (max-width:700px){.school-life{grid-template-columns:1fr 1fr}.teamask{grid-template-columns:1fr}}
.teamask .cta-row{justify-content:flex-start;margin-top:24px}
/* Labels in plain readable text: sentence case, normal spacing, no tiny caps
   (Steve, 2026-10-21). Buttons and the top bar keep their own style. */
.eyebrow,h2.eyebrow{font-family:inherit;font-size:16px;font-weight:600;letter-spacing:0;text-transform:none}
.fbrow .fbitem span,.taptext .tapcap,.c988-tags figcaption,.c988-ways .k,.vet-face figcaption,.anat-tags figcaption,.range figcaption{
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.tagmedia .fbrow .fbitem span{font-size:14px}
/* Veterans: flat colour changes between sections, no fading bands. */
.melt{padding-top:clamp(64px,8vw,120px)}
.melt::before{display:none}
.tapquote .cap,.way .k,.vpl,.backname,.vet-plate{font-family:inherit;letter-spacing:0;text-transform:none;font-size:14px;font-weight:600}
.vet-left .vet-face img{transform:scale(1.25)}
.vet-left .vet-faces{margin-block:18px 6px}
.vet-left .vet-face figcaption{margin-top:20px}
.shoppage{padding-block:clamp(36px,5vw,64px) clamp(48px,6vw,88px)}
.shoppage .shopmid{margin-top:0}
.shoph1{font-size:clamp(40px,6vw,72px);line-height:.94}