:root{
  --brand:#D33C2D; --brand-dark:#B22F23; --ink:#111; --muted:#667085;
  --bg:#fff; --panel:#f7f7f8; --ring:rgba(211,60,45,.25); --radius:16px;
}
*{box-sizing:border-box} 
html,body{margin:0; padding:0}
body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink); background:var(--bg); line-height:1.55; overflow-x:hidden}
.container{max-width:1128px; margin-inline:auto; padding:clamp(16px,4vw,32px)}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
.site-header{position:sticky; top:0; backdrop-filter:saturate(160%) blur(6px);
  background:color-mix(in srgb, var(--bg) 85%, transparent); border-bottom:1px solid #ececec; z-index:40}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:clamp(8px,2vw,16px); flex-wrap:wrap}
.logo{display:flex; align-items:center; gap:8px; font-weight:800; letter-spacing:.3px; color:inherit; font-size:clamp(14px,2.5vw,16px)}
.logo-img{width:clamp(24px,4vw,28px); height:clamp(24px,4vw,28px); display:block}
.logo-mark{width:clamp(24px,4vw,28px); height:clamp(24px,4vw,28px); border-radius:50%; background:#222; box-shadow:inset 0 0 0 2px #000, inset 0 0 0 5px #222}
nav ul{list-style:none; display:flex; gap:clamp(8px,2vw,18px); margin:0; padding:0; flex-wrap:wrap}
nav a{color:#1f2937; font-weight:600; font-size:clamp(13px,2vw,15px)}
.btn{display:inline-flex; align-items:center; gap:8px; padding:clamp(10px,2vw,12px) clamp(12px,3vw,16px); border-radius:999px; border:1px solid #e7e7e9; background:#fff; font-weight:700; font-size:clamp(13px,2vw,15px); white-space:nowrap}
.btn.primary{border-color:transparent; background:var(--brand); color:#fff; box-shadow:0 10px 18px -8px var(--ring)}
.btn.primary:hover{background:var(--brand-dark)}
.hero{padding:clamp(32px,8vw,56px) 0 clamp(16px,4vw,24px)}
.hero-grid{display:grid; grid-template-columns:1fr; gap:clamp(24px,6vw,36px); align-items:center}
/* Hero video section */
.hero-video-section{
  position:relative;
  width:100%;
  min-height:clamp(500px,60vh,650px);
  max-height:70vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
  -webkit-appearance:none;
  appearance:none;
}
.hero-overlay{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  width:100%;
  height:100%;
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(80px,15vw,120px) 0;
  background:linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
  color:#fff;
  text-align:center;
}
.hero-overlay .container{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  width:100%;
  max-width:1128px;
}
.hero-overlay .eyebrow{color:#fff}
.hero-overlay h1{
  font-size:clamp(32px,6vw,64px);
  line-height:1.05;
  margin:clamp(12px,3vw,20px) 0 clamp(16px,4vw,24px);
  color:#fff;
}
.hero-overlay .sub{
  color:rgba(255,255,255,0.9);
  font-size:clamp(16px,2.5vw,20px);
  margin-bottom:clamp(16px,4vw,24px);
}
.hero-overlay .badges{
  justify-content:center;
}
.hero-overlay .badge{
  color:var(--ink);
  background:#fff;
}
/* Hero CTA section below hero video */
.hero-cta{
  padding:32px 0 !important;
  text-align:center;
}
.hero-cta .badges{
  justify-content:center;
  gap:clamp(6px,1.5vw,10px) !important;
}
.eyebrow{display:inline-flex; gap:8px; font-weight:700; color:var(--brand); font-size:clamp(14px,2.5vw,16px)}
.hero h1{font-size:clamp(28px,6vw,60px); line-height:1.05; margin:clamp(8px,2vw,10px) 0 clamp(6px,1.5vw,8px)}
.sub{color:#4b5563; font-size:clamp(15px,2.5vw,18px); margin-bottom:clamp(12px,3vw,18px)}
.badges{display:flex; flex-wrap:wrap; gap:clamp(8px,2vw,10px); margin:clamp(12px,3vw,18px) 0 clamp(6px,1.5vw,8px)}
.badge{display:inline-flex; align-items:center; gap:clamp(6px,1.5vw,10px); padding:clamp(8px,2vw,10px) clamp(10px,2.5vw,12px); border:1px solid #e8e8ea; border-radius:12px; background:#fff; font-size:clamp(12px,2vw,14px)}
.badge img{width:clamp(36px,6vw,44px); height:clamp(36px,6vw,44px)}
.product-shot{background:radial-gradient(60% 60% at 50% 42%, #efefef, #ffffff 60%);
  border-radius:clamp(16px,4vw,24px); border:none; padding:0; min-height:clamp(420px,75vw,570px); display:block; overflow:hidden; margin-top:clamp(16px,4vw,24px)}
.product-shot img{width:100%; height:100%; display:block; object-fit:cover}
.section{padding:clamp(32px,8vw,64px) 0}
.section h2{font-size:clamp(24px,4vw,38px); margin:0 0 clamp(6px,1.5vw,8px)}
.section p.lead{color:var(--muted); margin:0 0 clamp(16px,4vw,26px); font-size:clamp(15px,2.5vw,18px)}
.grid{display:grid; gap:clamp(12px,3vw,18px)}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(clamp(200px,40vw,230px),1fr))}
@media (min-width: 900px){
  .grid.cards{grid-template-columns:repeat(3,1fr)}
}
.card{background:var(--panel); border:1px solid #ececf0; border-radius:var(--radius); overflow:hidden}
.card img{display:block; width:100%; aspect-ratio:4/3; object-fit:cover}
.card .cap{padding:clamp(10px,2.5vw,12px) clamp(12px,3vw,14px); font-weight:600; font-size:clamp(13px,2vw,15px)}
.steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(240px,45vw,260px),1fr)); gap:clamp(12px,3vw,18px)}
.step{border:1px solid #ececf0; border-radius:var(--radius); padding:clamp(12px,3vw,16px); background:#fff; font-size:clamp(13px,2vw,15px)}
.video-wrap{display:grid; grid-template-columns:1fr; gap:clamp(16px,4vw,24px)}
.video{
  aspect-ratio:16/9;
  width:100%;
  background:#fff;
  border-radius:clamp(12px,3vw,16px);
  overflow:hidden;
  border:none;
  display:block;
  object-fit:cover;
}
/* How it works video - has native controls and poster */
.video-wrap > div{
  position:relative;
}
.instructions{background:#fff; border:1px solid #ececf0; border-radius:clamp(12px,3vw,16px); padding:clamp(14px,3.5vw,18px)}
.price-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(clamp(240px,45vw,260px),1fr)); gap:clamp(12px,3vw,18px)}
.price-card{position:relative; border:1px solid #ececf0; border-radius:clamp(16px,4vw,20px); padding:clamp(16px,4vw,22px); background:#fff}
.price-thumbnail{
  position:absolute;
  top:clamp(12px,3vw,16px);
  right:clamp(12px,3vw,16px);
  width:clamp(100px,12vw,140px);
  height:auto;
  border-radius:8px;
  object-fit:contain;
  z-index:1;
}
.price{font-size:clamp(24px,4vw,36px); font-weight:800}
.price small{font-weight:600; color:var(--muted); font-size:clamp(12px,2vw,14px)}
.features{margin:clamp(8px,2vw,12px) 0 0; padding:0; list-style:none}
.features li{margin:clamp(6px,1.5vw,8px) 0; font-size:clamp(13px,2vw,15px)}
.contact{display:grid; grid-template-columns:1fr; gap:clamp(16px,4vw,24px)}
.panel{background:#fff; border:1px solid #ececf0; border-radius:clamp(12px,3vw,16px); padding:clamp(14px,3.5vw,18px)}
.site-footer{padding:clamp(24px,6vw,40px) 0; border-top:1px solid #ececec; color:#6b7280}
.footer-row{display:flex; justify-content:space-between; gap:clamp(8px,2vw,16px); flex-wrap:wrap; font-size:clamp(13px,2vw,15px)}
.fine{font-size:clamp(11px,2vw,13px); color:#98a2b3; margin-top:clamp(8px,2vw,12px)}
/* Precision section */
.precision-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.1fr;
  gap:36px;
  align-items:center;
}
.precision .xxl{
  font-size:clamp(30px,5vw,56px);
  line-height:1.06;
  margin:0 0 10px;
}
.precision .brand{color:var(--brand)}
.precision .lead{color:#4b5563}
.phone-shot{
  background:transparent;
  border-radius:24px; border:none; padding:0;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  position:relative;
  cursor:pointer;
}
.phone-shot img{width:100%; height:100%; object-fit:cover; filter:drop-shadow(0 30px 35px rgba(0,0,0,.16))}
.ticks{margin:14px 0 0; padding-left:18px}
.ticks li{margin:8px 0}
@media (max-width:900px){ .precision-grid{grid-template-columns:1fr} }

/* Precision video - seamless image-like styling */
.precision-video{
  width:100%;
  height:auto;
  display:block;
  border:0;
  outline:0;
  border-radius:16px;
  background:#fff;
  /* Hide all native video controls */
  -webkit-appearance:none;
  appearance:none;
  object-fit:cover;
  /* Make it clickable for fullscreen */
  cursor:pointer;
  position:relative;
  /* Ensure smooth playback */
  will-change:auto;
  transition:opacity 0.2s;
}
.precision-video:hover{
  opacity:0.95;
}
/* Precision video - seamless with sound on click */
/* Add subtle sound icon indicator on hover - only for videos */
.phone-shot:has(video)::after{
  content:'🔊 Click for sound + fullscreen';
  position:absolute;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  color:#fff;
  border-radius:20px;
  font-size:12px;
  white-space:nowrap;
  opacity:0;
  transition:opacity 0.2s;
  pointer-events:none;
  z-index:10;
}
.phone-shot:has(video):hover::after{
  opacity:1;
}
/* Hide native video control styling only for precision videos */
video.precision-video::-webkit-media-controls-panel,
video.precision-video::-webkit-media-controls-play-button,
video.precision-video::-webkit-media-controls-current-time-display,
video.precision-video::-webkit-media-controls-time-remaining-display,
video.precision-video::-webkit-media-controls-timeline,
video.precision-video::-webkit-media-controls-volume-slider,
video.precision-video::-webkit-media-controls-mute-button,
video.precision-video::-webkit-media-controls-fullscreen-button {
  display:none !important;
}
video.precision-video::-webkit-media-controls-enclosure {
  display:none !important;
}
/* Also hide controls for other browsers (precision video only) */
video.precision-video::-moz-media-controls,
video.precision-video::-moz-media-controls-panel {
  display:none !important;
}
/* Hero layout adjustments */
.hero-top{margin:0}
.hero-bottom{margin:0}
/* Mobile-first responsive breakpoints */
@media (min-width: 768px) {
  .hero-grid{grid-template-columns:1.2fr 1fr; grid-template-rows:auto auto}
  .hero-top{grid-column:1; grid-row:1}
  .hero-bottom{grid-column:1; grid-row:2}
  .product-shot{grid-column:2; grid-row:1/3; align-self:center}
  .video-wrap{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1.2fr 1fr}
}

@media (min-width: 1024px) {
  .container{padding:clamp(24px,3vw,32px)}
  .hero{padding:clamp(48px,6vw,56px) 0 clamp(20px,3vw,24px)}
  .section{padding:clamp(48px,6vw,64px) 0}
  .hero-grid{text-align:left}
  .badges{justify-content:flex-start}
  .topbar{text-align:left}
}

/* Mobile-specific improvements */
@media (max-width: 767px) {
  .hero-overlay{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
  }
  .site-header{padding-top:calc(env(safe-area-inset-top, 0px) + 24px) !important; padding-bottom:24px !important; margin-bottom:32px !important}
  .container{padding:60px !important}
  .site-header .container{padding:0 60px !important}
  .topbar{flex-direction:row !important; align-items:center !important; justify-content:space-between !important; gap:0 !important; text-align:left !important; padding:0 60px !important; margin-bottom:0 !important}
  .topbar nav{display:none !important}
  .topbar .btn{padding:10px 16px !important; font-size:14px !important; margin:0 !important}
  .hero{padding-top:0 !important; min-height:100vh; display:flex; align-items:center; margin:0 !important}
  .hero .container{padding:60px !important; padding-top:32px !important}
  .hero-grid{text-align:center !important; gap:24px}
  .hero h1{font-size:40px !important; line-height:1.1; margin:20px 0 24px; text-align:center !important}
  .product-shot{margin-top:0 !important; min-height:400px}
  .hero-bottom{margin-top:24px}
  .sub{font-size:18px !important; margin-bottom:30px; text-align:center !important}
  .badges{justify-content:center !important; gap:16px; margin:24px 0}
  .badge{font-size:18px !important; padding:12px 16px}
  .steps{grid-template-columns:1fr; gap:24px}
  .step{padding:24px; font-size:16px !important}
  .price-grid{grid-template-columns:1fr; gap:24px}
  .price-card{padding:32px}
  .grid.cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px}
  .card .cap{padding:20px; font-size:16px !important}
  .section{padding:80px 0; text-align:center}
  .section h2{font-size:24px !important; margin-bottom:24px}
  .section p.lead{font-size:16px !important; margin-bottom:28px}
  .btn{padding:16px 24px; font-size:16px !important; display:inline-block !important; margin:0 auto !important}
  .video-wrap{gap:28px}
  .video{border-radius:20px}
  .instructions{padding:24px; font-size:16px !important}
  .contact{gap:28px}
  .panel{padding:24px; font-size:16px !important}
  .site-footer{padding:60px 0; font-size:16px !important}
  .footer-row{justify-content:center}
  .fine{font-size:12px !important}
}

@media (max-width: 480px) {
  .site-header{padding-top:calc(env(safe-area-inset-top, 0px) + 24px) !important; padding-bottom:24px !important; margin-bottom:32px !important}
  .container{padding:50px !important}
  .site-header .container{padding:0 50px !important}
  .topbar{padding:0 50px !important; margin-bottom:0 !important}
  .hero{padding-top:0 !important; min-height:100vh; margin:0 !important}
  .hero .container{padding:50px !important; padding-top:32px !important}
  .section{padding:60px 0}
  .hero h1{font-size:40px !important; text-align:center !important}
  .sub{font-size:18px !important; text-align:center !important}
  .btn{padding:14px 20px; font-size:16px !important; display:inline-block !important; margin:0 auto !important}
  .badge{padding:10px 14px; font-size:18px !important}
  .card .cap{padding:16px; font-size:16px !important}
  .step{padding:20px; font-size:16px !important}
  .price-card{padding:28px}
  .panel{padding:20px; font-size:16px !important}
  .section h2{font-size:24px !important}
  .section p.lead{font-size:16px !important}
  .fine{font-size:12px !important}
}

/* Features section with light grey background - unified section */
#features,
#packaging{
  background:#f7f7f8;
  margin:0;
}
#features .features-section{
  padding-top:clamp(32px,8vw,56px);
  padding-bottom:clamp(24px,6vw,32px);
  text-align:center;
}
#features .features-section .steps{
  grid-template-columns:repeat(3, 1fr);
  justify-items:center;
  max-width:1000px;
  margin:0 auto;
}
@media (max-width:900px){
  #features .features-section .steps{
    grid-template-columns:1fr;
  }
}
#packaging .packaging-section{
  padding-top:0;
  padding-bottom:clamp(32px,8vw,56px);
}

/* Packaging section (centered image) */
.packaging-section{
  display:flex;
  justify-content:center;
  align-items:center;
}
.packaging-image{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.packaging-image img{
  width:min(100%,600px);
  height:auto;
  display:block;
}

/* Wallet Card section (no borders) */
.wallet-card-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.1fr; /* text left, image right */
  gap:36px;
  align-items:center;
}
.wallet-card .xxl{font-size:clamp(28px,5vw,48px); line-height:1.08; margin:0 0 10px}
.wallet-card .lead{color:#4b5563}
.wallet-card .device-shot{display:flex; align-items:center; justify-content:center; padding:0}
.wallet-card .device-shot.no-chrome{border:none; background:none} /* ensure NO border/background */
.wallet-card .device-shot img{width:min(100%,560px); height:auto; filter:drop-shadow(0 30px 35px rgba(0,0,0,.16))}
@media (max-width:900px){
  .wallet-card-grid{grid-template-columns:1fr}
}

/* Use cases section with light grey background */
#use-cases{
  background:#f7f7f8;
  margin:0;
}

/* Ping it. Find it. (no borders) */
.ping-grid{
  display:grid;
  grid-template-columns:minmax(280px,1fr) 1.1fr; /* text left, image right */
  gap:36px;
  align-items:center;
}
.ping-find .xxl{font-size:clamp(28px,5vw,48px); line-height:1.08; margin:0 0 10px}
.ping-find .lead{color:#4b5563; margin-bottom:clamp(20px,4vw,28px)}
/* Icon grid for ping-find section */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:clamp(12px,3vw,20px);
  margin-top:clamp(20px,4vw,28px);
}
.icon-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
}
.icon-item .icon{
  font-size:clamp(24px,4vw,32px);
  line-height:1;
  display:block;
}
.icon-item .icon-label{
  font-size:clamp(12px,2vw,14px);
  color:var(--muted);
  font-weight:500;
}
@media (min-width: 600px){
  .icon-grid{
    grid-template-columns:repeat(5,1fr);
  }
}
@media (max-width: 599px){
  .icon-grid{
    grid-template-columns:repeat(3,1fr);
  }
}
.pf-shot{display:flex; align-items:center; justify-content:center; padding:0; background:none; border:none}
.pf-shot img{width:min(100%,520px); height:auto; display:block; filter:drop-shadow(0 24px 30px rgba(0,0,0,.12))}
/* Ping video - seamless image-like styling */
.ping-video{
  width:min(100%,520px);
  height:auto;
  display:block;
  border:0;
  outline:0;
  border-radius:16px;
  background:#fff;
  -webkit-appearance:none;
  appearance:none;
  object-fit:cover;
  cursor:pointer;
  position:relative;
  will-change:auto;
  transition:opacity 0.2s;
}
.ping-video:hover{
  opacity:0.95;
}
/* Hide native video controls for ping video */
video.ping-video::-webkit-media-controls-panel,
video.ping-video::-webkit-media-controls-play-button,
video.ping-video::-webkit-media-controls-current-time-display,
video.ping-video::-webkit-media-controls-time-remaining-display,
video.ping-video::-webkit-media-controls-timeline,
video.ping-video::-webkit-media-controls-volume-slider,
video.ping-video::-webkit-media-controls-mute-button,
video.ping-video::-webkit-media-controls-fullscreen-button {
  display:none !important;
}
video.ping-video::-webkit-media-controls-enclosure {
  display:none !important;
}
video.ping-video::-moz-media-controls,
video.ping-video::-moz-media-controls-panel {
  display:none !important;
}
@media (max-width:900px){
  .ping-grid{grid-template-columns:1fr}
  .ping-grid > div:first-child{order:2}
  .ping-grid > .pf-shot{order:1}
}

/* Full-width video section at bottom */
.video-fullwidth-section{
  width:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}
.fullwidth-video{
  width:100%;
  height:auto;
  display:block;
  border:0;
  outline:0;
  /* Hide native controls styling */
  -webkit-appearance:none;
  appearance:none;
  object-fit:cover;
  cursor:pointer;
  position:relative;
  will-change:auto;
  transition:opacity 0.2s;
}
.fullwidth-video:hover{
  opacity:0.95;
}
/* Hide native video control styling for hero and fullwidth video */
.hero-video::-webkit-media-controls-panel,
.hero-video::-webkit-media-controls-play-button,
.hero-video::-webkit-media-controls-current-time-display,
.hero-video::-webkit-media-controls-time-remaining-display,
.hero-video::-webkit-media-controls-timeline,
.hero-video::-webkit-media-controls-volume-slider,
.hero-video::-webkit-media-controls-mute-button,
.hero-video::-webkit-media-controls-fullscreen-button {
  display:none !important;
}
.hero-video::-webkit-media-controls-enclosure {
  display:none !important;
}
.hero-video::-moz-media-controls,
.hero-video::-moz-media-controls-panel {
  display:none !important;
}
.fullwidth-video::-webkit-media-controls-panel,
.fullwidth-video::-webkit-media-controls-play-button,
.fullwidth-video::-webkit-media-controls-current-time-display,
.fullwidth-video::-webkit-media-controls-time-remaining-display,
.fullwidth-video::-webkit-media-controls-timeline,
.fullwidth-video::-webkit-media-controls-volume-slider,
.fullwidth-video::-webkit-media-controls-mute-button,
.fullwidth-video::-webkit-media-controls-fullscreen-button {
  display:none !important;
}
.fullwidth-video::-webkit-media-controls-enclosure {
  display:none !important;
}
.fullwidth-video::-moz-media-controls,
.fullwidth-video::-moz-media-controls-panel {
  display:none !important;
}