/* ============================================================
   W2Reviews — visual system
   Light, monochrome, editorial. Aligned to the W2 Collective
   family: paper-white ground, near-black ink, hairline rules,
   Fraunces display over Inter body, Space Mono for labels.

   Tokens sourced from the live brand:
     --ink   #14161B  (w2taps --w2-ink)
     --bone  #F5F2EC  (w2taps --w2-bone)
     --slate #8A8F9A  (w2taps --w2-slate)
     --muted #5C5C5C  (thew2collective --muted)
     radius / shadow / 1120px measure  (thew2collective)
   No accent hue — the parent brand is monochrome.
   ============================================================ */

:root{
  /* W2Reviews' own tokens, from its live theme: fg #0e1116 on a sage ground.
     Shared with W2Taps: the Inter body stack, spacing rhythm, radii, measure.
     Distinct: a Didone display face (from its own logo) and a cool sage ground,
     where W2Taps runs Fraunces on warm bone. */
  --paper:#FFFFFF;
  --panel:#F4F6F3;
  --bone:#E7ECE3;
  --ink:#0E1116;
  --ink-2:#39423C;
  --muted:#55605A;
  --label:#646C66;
  --slate:#8A938C;
  --line:rgba(14,17,22,.09);
  --line-2:rgba(14,17,22,.16);

  --radius:18px;
  --radius-lg:22px;
  --radius-sm:12px;
  --maxw:1120px;

  --shadow:0 1px 2px rgba(14,17,22,.04), 0 12px 28px -10px rgba(14,17,22,.10);
  --glow:0 8px 28px rgba(14,17,22,.10);

  --display:'Bodoni Moda', Didot, 'Bodoni 72', 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gap:76px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
::selection{background:var(--ink); color:var(--bone);}

h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:500; letter-spacing:-0.01em; line-height:1.1;}
p{margin:0;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* Focus — visible, monochrome, never removed */
:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--ink);
  outline-offset:3px;
  border-radius:4px;
}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);}
.reveal.in-view{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  *{animation:none !important;}
}

/* ---------- SKIP LINK ---------- */
.skip{
  position:absolute; left:-9999px; top:8px; z-index:200;
  background:var(--ink); color:var(--bone); padding:12px 18px; border-radius:10px;
  font-size:14px; font-weight:600;
}
.skip:focus{left:16px;}

/* ============================================================
   BRAND LOCKUP
   Real W2Taps wordmark: Fraunces "W2Taps" beside a rounded-square
   mark carrying the NFC ripple. Rendered in ink for the light theme.
   ============================================================ */
.brand{display:inline-flex; align-items:center; gap:13px; min-height:44px;}
.brand__w2{
  font-family:'Bodoni Moda', Didot, 'Bodoni 72', 'Times New Roman', serif;
  font-weight:400; font-size:30px; line-height:.9; color:var(--ink);
  letter-spacing:0; flex:0 0 auto;
}
.brand__bar{width:1px; height:30px; background:var(--line-2); flex:0 0 auto;}
.brand__text{display:block; line-height:1;}
.brand__name{
  font-family:var(--sans); font-weight:400; font-size:13.5px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ink);
  display:block; line-height:1;
}
.brand__sub{
  font-family:var(--sans); font-weight:400; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--label);
  display:block; margin-top:6px; line-height:1;
}
@media (max-width:420px){
  .brand{gap:10px;}
  .brand__w2{font-size:26px;}
  .brand__bar{height:26px;}
  .brand__name{font-size:11.5px; letter-spacing:.28em;}
  .brand__sub{font-size:9px; letter-spacing:.1em;}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:66px;}
.nav__links{display:flex; align-items:center; gap:2px;}
.nav__item{position:relative;}
.nav__link{
  display:inline-flex; align-items:center; gap:5px; min-height:44px;
  font-size:14px; font-weight:500; color:var(--muted);
  padding:10px 12px; border-radius:9px;
  transition:color .18s, background .18s;
  white-space:nowrap; background:none; border:none; cursor:pointer;
  font-family:inherit;
}
.nav__link:hover{color:var(--ink);}
.nav__link[aria-current="page"], .nav__link.is-current{color:var(--ink); font-weight:600;}
.nav__link .caret{
  width:9px; height:9px; flex:0 0 auto; opacity:.55;
  transition:transform .2s;
}
.nav__item.open .nav__link{color:var(--ink);}
.nav__item.open .caret{transform:rotate(180deg);}

.nav__dd{
  position:absolute; top:calc(100% + 8px); left:0; min-width:216px;
  background:var(--paper); border:1px solid var(--line-2); border-radius:14px;
  box-shadow:0 22px 55px rgba(20,22,27,.14);
  padding:7px; opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item.open .nav__dd{opacity:1; visibility:visible; transform:none;}
.nav__dd a{
  display:flex; align-items:center; min-height:44px; padding:10px 13px; border-radius:9px;
  font-size:14px; color:var(--muted); transition:background .14s, color .14s;
}
.nav__dd a:hover{background:var(--panel); color:var(--ink);}
.nav__dd a[aria-current="page"]{color:var(--ink); font-weight:600;}

.nav__cta{
  display:inline-flex; align-items:center; min-height:44px;
  padding:10px 17px; border-radius:10px; font-size:14px; font-weight:600;
  border:1px solid var(--line-2); color:var(--ink);
  transition:border-color .18s, box-shadow .18s;
  white-space:nowrap;
}
.nav__cta:hover{border-color:var(--ink); box-shadow:var(--glow);}
.nav__right{display:flex; align-items:center; gap:10px;}

.hamburger{
  display:none; width:44px; height:44px; flex:0 0 auto;
  border:1px solid var(--line-2); border-radius:11px; background:none;
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
}
.hamburger span{display:block; width:18px; height:1.5px; background:var(--ink); border-radius:2px;}

@media (max-width:980px){
  .nav__links{display:none;}
  .hamburger{display:flex;}
  .nav__cta{display:none;}
}

/* ---------- MOBILE MENU ---------- */
.mnav{
  position:fixed; inset:0; z-index:100; background:var(--paper);
  display:flex; flex-direction:column; padding:18px 24px 40px;
  transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
  overflow-y:auto; overscroll-behavior:contain;
}
.mnav.open{transform:none;}
.mnav__head{display:flex; align-items:center; justify-content:space-between; min-height:66px; margin-bottom:14px;}
.mnav__close{
  width:44px; height:44px; border:1px solid var(--line-2); border-radius:11px;
  background:none; display:grid; place-items:center; font-size:18px; color:var(--ink); line-height:1;
}
.mnav__group{border-top:1px solid var(--line); padding:18px 0 4px;}
.mnav__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--label); margin-bottom:6px; display:block;
}
/* Scoped to navigation links only — the footer buttons keep their own
   .btn colours, which a blanket `.mnav a` rule would override. */
.mnav > a, .mnav__group a{
  display:flex; align-items:center; min-height:48px; padding:6px 0;
  font-size:17px; font-weight:500; color:var(--ink);
}
.mnav__group a{font-size:16px; color:var(--muted);}
.mnav__group a[aria-current="page"], .mnav > a[aria-current="page"]{color:var(--ink); font-weight:600;}
.mnav__foot{margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:grid; gap:10px;}

/* ============================================================
   BUTTONS
   Family language: 12px radius soft rectangles, 15px/600.
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 22px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:600; font-family:var(--sans);
  border:1px solid transparent; cursor:pointer; text-align:center;
  transition:transform .14s, background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--ink); color:var(--bone); box-shadow:var(--shadow);}
.btn--primary:hover{background:#000; box-shadow:0 2px 4px rgba(20,22,27,.08), 0 18px 34px -12px rgba(20,22,27,.24);}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-2);}
.btn--ghost:hover{border-color:var(--ink); box-shadow:var(--glow);}
.btn--sm{min-height:44px; padding:10px 16px; font-size:13.5px; border-radius:10px;}
.btn--block{width:100%;}
.btn .arw{width:14px; height:14px; flex:0 0 auto;}

.btn-row{display:flex; flex-wrap:wrap; gap:12px;}

/* Text link with a rule that draws in */
.tlink{
  display:inline-flex; align-items:center; gap:7px; min-height:44px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  padding:6px 0; position:relative;
}
.tlink::after{
  content:""; position:absolute; left:0; bottom:9px; height:1px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.tlink:hover::after{transform:scaleX(1);}
.tlink svg{width:13px; height:13px;}

/* ============================================================
   SECTIONS & HEADINGS
   ============================================================ */
.block{padding:var(--gap) 0;}
.block--tight{padding:52px 0;}
.block--panel{background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.block--bone{background:var(--bone); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.rule{border-top:1px solid var(--line);}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink); border:1px solid var(--line-2);
  padding:7px 13px; border-radius:999px; margin-bottom:22px;
  font-family:var(--sans);
}
.eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--ink); flex:0 0 auto;}
.eyebrow--plain{
  border:none; padding:0; border-radius:0; margin-bottom:14px;
  font-family:var(--mono); font-weight:400; font-size:11.5px; letter-spacing:.22em; color:var(--label);
}

.shead{max-width:660px; margin-bottom:44px;}
.shead--center{margin-left:auto; margin-right:auto; text-align:center;}
.shead h2{font-size:clamp(28px, 4.4vw, 44px); margin-bottom:14px;}
.shead p{color:var(--muted); font-size:17px; line-height:1.6;}
h2 em, h1 em, h3 em{font-style:italic; font-weight:500;}
.lede{color:var(--muted); font-size:17px; line-height:1.6;}
.lede strong{color:var(--ink); font-weight:600;}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:88px 0 68px; position:relative;}
.hero__grid{display:grid; grid-template-columns:1fr; gap:44px; align-items:center;}
@media (min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr; gap:60px;}
}
.hero h1{font-size:clamp(40px, 6.4vw, 68px); letter-spacing:-0.035em; line-height:1.02;}
.hero .lede{margin-top:22px; max-width:490px; font-size:17.5px;}
.hero .btn-row{margin-top:32px;}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:34px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--label);
}
.hero__meta span{display:inline-flex; align-items:center; gap:7px;}
.hero__meta span::before{content:""; width:4px; height:4px; border-radius:50%; background:var(--slate);}

/* Hero photo: product shot floated on bone with the tap ripple behind */
.shot{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bone); border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.shot img{width:100%; height:100%; object-fit:cover; display:block;}
.shot--hero{aspect-ratio:16/10;}
.shot--sq{aspect-ratio:1/1;}
.shot--wide{aspect-ratio:16/10;}
.shot__cap{
  position:absolute; left:14px; bottom:14px;
  background:rgba(255,255,255,.9); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink);
}

/* NFC ripple motif — taken from the concentric target printed on the real cards */
.ripple{position:absolute; inset:0; pointer-events:none; overflow:hidden; border-radius:inherit;}
.ripple i{
  position:absolute; top:50%; left:50%; translate:-50% -50%;
  border:1px solid var(--line-2); border-radius:50%; opacity:0;
  animation:ping 4s cubic-bezier(.2,.6,.3,1) infinite;
}
.ripple i:nth-child(1){width:120px; height:120px; animation-delay:0s;}
.ripple i:nth-child(2){width:120px; height:120px; animation-delay:1.3s;}
.ripple i:nth-child(3){width:120px; height:120px; animation-delay:2.6s;}
@keyframes ping{
  0%{opacity:.55; scale:.45;}
  70%{opacity:0; scale:2.6;}
  100%{opacity:0; scale:2.6;}
}

/* ============================================================
   FEATURE TILES — parent's device: ink rounded-square icon tile
   ============================================================ */
.grid{display:grid; gap:16px; grid-template-columns:1fr;}
@media (min-width:600px){ .grid.cols-2, .grid.cols-4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:860px){
  .grid.cols-3{grid-template-columns:repeat(3,1fr);}
  .grid.cols-4{grid-template-columns:repeat(4,1fr);}
}

.tile{
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:30px 26px; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.tile:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(20,22,27,.05), 0 22px 44px -14px rgba(20,22,27,.18);}
.ico{
  width:42px; height:42px; border-radius:12px; background:var(--ink); color:var(--bone);
  display:grid; place-items:center; margin-bottom:20px;
}
.ico svg{width:20px; height:20px;}
.tile h3{font-size:18px; font-family:var(--sans); font-weight:700; letter-spacing:-0.01em; margin-bottom:9px;}
.tile p{font-size:14px; color:var(--muted); line-height:1.6;}

.tile--center{text-align:center;}
.tile--center .ico{margin-left:auto; margin-right:auto;}

/* ============================================================
   PRODUCTS
   ============================================================ */
.prod-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:640px){ .prod-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .prod-grid.cols-3{grid-template-columns:repeat(3,1fr);} }

.prod{
  display:flex; flex-direction:column;
  background:var(--paper); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.prod:hover{transform:translateY(-3px); box-shadow:0 2px 4px rgba(20,22,27,.05), 0 22px 44px -14px rgba(20,22,27,.18);}
.prod__media{position:relative; background:var(--bone); aspect-ratio:4/3; overflow:hidden;}
.prod__media img{width:100%; height:100%; object-fit:cover; transition:scale .5s cubic-bezier(.2,.8,.2,1);}
/* Group shots (e.g. the Starter Pack set) must not be cropped. Ground matched
   to the photo's own studio background so the letterboxing is invisible. */
.prod__media--full{background:#F4F3F1;}
.prod__media--full img{object-fit:contain;}
.prod:hover .prod__media img{scale:1.03;}
.prod__badge{
  position:absolute; top:13px; left:13px;
  background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
}
.prod__body{padding:24px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.prod__name{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:-0.02em; line-height:1.15;}
.prod__line{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--label);}
.prod__desc{font-size:14.5px; color:var(--muted); line-height:1.62; flex:1;}
.prod__specs{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px;}
.prod__specs span{
  font-size:11.5px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; background:var(--panel);
}
.prod__foot{margin-top:6px;}

/* ============================================================
   STEPS — editorial, mono numerals, hairline rules
   ============================================================ */
.steps{display:grid; gap:0; grid-template-columns:1fr; border-top:1px solid var(--line);}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr); gap:0;} }
.step{padding:34px 0 32px; border-bottom:1px solid var(--line); position:relative;}
@media (min-width:860px){
  .step{padding:38px 34px 34px 0; border-bottom:none;}
  .step + .step{padding-left:34px; border-left:1px solid var(--line);}
}
.step__n{
  font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--label);
  display:block; margin-bottom:18px;
}
.step h3{font-family:var(--display); font-size:24px; font-weight:600; margin-bottom:11px; letter-spacing:-0.02em;}
.step p{font-size:14.5px; color:var(--muted); line-height:1.65;}

/* ============================================================
   COMPARE — "The old way vs the tap"
   ============================================================ */
.compare{display:grid; gap:18px; grid-template-columns:1fr;}
@media (min-width:760px){ .compare{grid-template-columns:1fr 1fr; gap:20px;} }
.col{
  border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:30px 28px;
  background:var(--paper);
}
.col--muted{background:var(--panel); border-style:dashed;}
.col__head{display:flex; align-items:center; gap:11px; margin-bottom:20px;}
.col__head h3{font-family:var(--sans); font-size:17px; font-weight:700; letter-spacing:-0.01em;}
.col__tag{
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--label); border:1px solid var(--line); border-radius:999px; padding:4px 10px;
}
.col ul{list-style:none; margin:0; padding:0; display:grid; gap:0;}
.col li{
  display:flex; gap:13px; align-items:flex-start;
  padding:14px 0; border-top:1px solid var(--line);
  font-size:14.5px; line-height:1.55; color:var(--muted);
}
.col li:first-child{border-top:none; padding-top:0;}
.col--muted li{color:var(--muted);}
.col li .mk{flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--ink);}
.col--muted li .mk{color:var(--label);}

/* ============================================================
   LEDGER — "by business" numbered editorial list
   ============================================================ */
.ledger{border-top:1px solid var(--line);}
.ledger__row{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:22px 0; border-bottom:1px solid var(--line);
  transition:padding-left .25s cubic-bezier(.2,.8,.2,1);
}
@media (min-width:760px){
  .ledger__row{grid-template-columns:44px 210px 1fr; gap:24px; align-items:baseline; padding:24px 0;}
  .ledger__row:hover{padding-left:10px;}
}
.ledger__n{font-family:var(--mono); font-size:11.5px; color:var(--label); letter-spacing:.12em;}
.ledger__k{font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);}
.ledger__v{font-size:14.5px; color:var(--muted); line-height:1.6;}

/* ============================================================
   STAT / PULL QUOTE
   ============================================================ */
.pull{
  border-left:2px solid var(--ink); padding:6px 0 6px 26px;
  font-family:var(--display); font-size:clamp(22px,3vw,30px); font-weight:500;
  font-style:italic; line-height:1.32; letter-spacing:-0.02em; max-width:760px;
}
.pull cite{
  display:block; margin-top:16px; font-family:var(--mono); font-style:normal;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--label);
}

/* ============================================================
   SPLIT — copy beside a photo
   ============================================================ */
.split{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr; gap:56px;}
  .split--rev .split__media{order:-1;}
}
.split__body h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:16px;}
.split__body p{color:var(--muted); font-size:16px; line-height:1.65;}
.split__body p + p{margin-top:14px;}
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:0;}
.checks li{
  display:flex; gap:13px; align-items:flex-start; padding:13px 0;
  border-top:1px solid var(--line); font-size:14.5px; color:var(--muted); line-height:1.55;
}
.checks li svg{flex:0 0 auto; width:17px; height:17px; margin-top:2px; color:var(--ink);}

/* ============================================================
   CTA BAND — light, bordered, never dark
   ============================================================ */
.cta{
  background:var(--bone); border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:56px 40px; text-align:center; position:relative; overflow:hidden;
}
.cta h2{font-size:clamp(26px,3.8vw,38px); margin-bottom:14px; position:relative;}
.cta p{color:var(--muted); max-width:520px; margin:0 auto 26px; font-size:16px; line-height:1.6; position:relative;}
.cta .btn-row{justify-content:center; position:relative;}
@media (max-width:560px){
  .cta{padding:42px 22px;}
  .cta .btn-row .btn{width:100%;}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--line); max-width:780px;}
.faq__item{border-bottom:1px solid var(--line);}
.faq__q{
  width:100%; text-align:left; background:none; border:none;
  display:flex; justify-content:space-between; align-items:flex-start; gap:22px;
  padding:22px 2px; min-height:56px; color:var(--ink);
  font-family:var(--sans); font-size:16.5px; font-weight:600; letter-spacing:-0.01em; line-height:1.45;
}
.faq__q .pm{
  flex:0 0 auto; width:22px; height:22px; position:relative; margin-top:2px;
}
.faq__q .pm::before, .faq__q .pm::after{
  content:""; position:absolute; top:50%; left:50%; translate:-50% -50%;
  background:var(--ink); transition:transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.faq__q .pm::before{width:13px; height:1.5px;}
.faq__q .pm::after{width:1.5px; height:13px;}
.faq__item.open .pm::after{transform:rotate(90deg); opacity:0;}
.faq__a{overflow:hidden; height:0; transition:height .3s cubic-bezier(.2,.8,.2,1);}
.faq__a p{padding:0 2px 24px; font-size:15px; color:var(--muted); line-height:1.68; max-width:680px;}

/* ============================================================
   FORMS
   ============================================================ */
.formcard{
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  padding:36px 32px; background:var(--paper); box-shadow:var(--shadow);
}
@media (max-width:560px){ .formcard{padding:26px 20px;} }
.field{margin-bottom:18px;}
.field label{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.field input, .field textarea, .field select{
  width:100%; padding:14px 15px; border-radius:10px;
  border:1px solid var(--line-2); background:var(--paper); color:var(--ink);
  font-size:16px; font-family:inherit; line-height:1.5;
  transition:border-color .18s, box-shadow .18s;
  min-height:50px; -webkit-appearance:none; appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235C5C5C' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px; padding-right:40px;
}
.field textarea{min-height:120px; resize:vertical;}
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(20,22,27,.07);
}
.field input::placeholder, .field textarea::placeholder{color:var(--label);}
.field.err input, .field.err textarea{border-color:#B4232A;}
.field__err{display:none; margin-top:7px; font-size:12.5px; color:#B4232A;}
.field.err .field__err{display:block;}
.form-row{display:grid; grid-template-columns:1fr; gap:0 14px;}
@media (min-width:560px){ .form-row.two{grid-template-columns:1fr 1fr;} }
.form-note{
  margin-top:16px; font-size:13px; color:var(--muted); line-height:1.6; text-align:center;
}
.altcontact{display:grid; grid-template-columns:1fr; gap:10px; margin-top:20px;}
@media (min-width:480px){ .altcontact{grid-template-columns:1fr 1fr;} }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{border-top:1px solid var(--line); background:var(--panel); padding:60px 0 30px;}
.foot__grid{display:grid; grid-template-columns:1fr; gap:34px; margin-bottom:40px;}
@media (min-width:640px){ .foot__grid{grid-template-columns:1fr 1fr; gap:34px 24px;} }
@media (min-width:900px){ .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr;} }
.foot__blurb{font-size:14px; color:var(--muted); margin-top:16px; line-height:1.65; max-width:290px;}
.foot__col h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--label); margin:0 0 14px; font-weight:400;
}
.foot__col a{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; padding-right:10px;
  font-size:14px; color:var(--muted); transition:color .16s;
}
.foot__col a:hover{color:var(--ink);}
.foot__col li{list-style:none;}
.foot__col ul{margin:0; padding:0;}
.foot__bottom{
  display:flex; flex-wrap:wrap; gap:14px 24px; justify-content:space-between; align-items:center;
  padding-top:24px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--label);
}
.foot__bottom a{color:var(--muted); display:inline-flex; align-items:center; min-height:44px;}
.foot__bottom a:hover{color:var(--ink);}
.foot__contacts{display:flex; flex-wrap:wrap; gap:8px 20px;}

/* ============================================================
   WHATSAPP FLOAT — matches the parent site's own float
   ============================================================ */
/* Contact float. Monochrome rather than WhatsApp green: on a site this
   restrained a saturated bubble is the loudest thing on every page and reads
   as a bolted-on widget. The glyph still identifies the channel.
   To restore the green, set background:#25D366 and color:#04140F. */
.wa{
  position:fixed; right:18px; bottom:18px; z-index:70;
  background:var(--ink); color:var(--bone); border:none; border-radius:100px;
  padding:14px 20px; min-height:52px; font-size:14px; font-weight:600; font-family:var(--sans);
  display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 2px 6px rgba(20,22,27,.10), 0 14px 32px -8px rgba(20,22,27,.34);
  transition:transform .16s, box-shadow .2s;
}
.wa:hover{transform:translateY(-2px); box-shadow:0 3px 8px rgba(20,22,27,.14), 0 20px 40px -10px rgba(20,22,27,.44);}
.wa svg{width:19px; height:19px; flex:0 0 auto;}
@media (max-width:560px){
  .wa{right:14px; bottom:14px; padding:0; width:56px; height:56px; justify-content:center; border-radius:50%;}
  .wa .wa__t{display:none;}
  .wa svg{width:24px; height:24px;}
}

/* ============================================================
   RESPONSIVE TUNING
   ============================================================ */
@media (max-width:900px){
  :root{--gap:60px;}
  .hero{padding:60px 0 52px;}
}
@media (max-width:600px){
  :root{--gap:52px;}
  .wrap{padding:0 18px;}
  .hero{padding:48px 0 44px;}
  .hero .btn-row .btn{flex:1 1 100%;}
  .shead{margin-bottom:32px;}
  .tile{padding:26px 22px;}
  .col{padding:24px 20px;}
  .prod__body{padding:20px 20px 22px;}
  .step h3{font-size:21px;}
  .pull{padding-left:20px;}
}
@media (max-width:380px){
  .wrap{padding:0 15px;}
  .brand__sub{letter-spacing:.18em;}
}

/* Print */
@media print{
  .nav, .mnav, .wa, .skip{display:none !important;}
  .reveal{opacity:1; transform:none;}
  body{font-size:12pt;}
}


/* ============================================================
   W2REVIEWS-ONLY STRUCTURE
   W2Taps leads with a split hero and a row of bordered tiles.
   This brand leads with a centred masthead over a full-bleed
   photograph, and states its promises on an unboxed strip.
   ============================================================ */

/* ---------- Centred masthead ---------- */
.mast{padding:84px 0 0; text-align:center;}
.mast .wrap{max-width:900px;}
.mast h1{
  font-size:clamp(40px, 6.6vw, 78px); line-height:1.03;
  letter-spacing:-0.015em; margin:0 auto;
}
.mast .lede{margin:26px auto 0; max-width:600px; font-size:18px;}
.mast .btn-row{justify-content:center; margin-top:34px;}
.mast__meta{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px; margin-top:32px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--label);
}
@media (max-width:600px){
  .mast{padding:52px 0 0;}
  .mast .btn-row .btn{flex:1 1 100%;}
}

/* ---------- Five stars: this brand's motif, as W2Taps has the ripple ---------- */
.stars{display:inline-flex; gap:5px; align-items:center; justify-content:center;}
.stars svg{width:15px; height:15px; color:var(--ink);}
.stars--rule{
  display:flex; align-items:center; gap:18px; margin:0 auto 24px; max-width:340px;
}
.stars--rule::before, .stars--rule::after{
  content:""; flex:1; height:1px; background:var(--line-2);
}

/* ---------- Full-bleed photograph band ---------- */
.bleed{
  width:100%; margin-top:56px; position:relative;
  background:var(--bone); border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bleed img{
  width:100%; height:clamp(280px, 42vw, 520px); object-fit:cover; display:block;
}
.bleed__cap{
  position:absolute; left:50%; translate:-50% 0; bottom:18px;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:8px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink); white-space:nowrap;
}
@media (max-width:600px){ .bleed{margin-top:40px;} .bleed__cap{font-size:10px; padding:7px 13px;} }

/* ---------- Promise strip: unboxed, divided by rules ---------- */
.strip{
  display:grid; grid-template-columns:1fr; gap:0;
  border-top:1px solid var(--line-2);
}
@media (min-width:680px){ .strip{grid-template-columns:repeat(2,1fr);} }
@media (min-width:1000px){ .strip{grid-template-columns:repeat(4,1fr);} }
.strip__cell{padding:34px 30px 34px 0; border-bottom:1px solid var(--line);}
@media (min-width:680px){
  .strip__cell{border-bottom:none; border-right:1px solid var(--line); padding:36px 30px;}
  .strip__cell:first-child{padding-left:0;}
  .strip__cell:last-child{border-right:none; padding-right:0;}
}
@media (min-width:680px) and (max-width:999px){
  .strip__cell:nth-child(2n){border-right:none; padding-right:0;}
  .strip__cell:nth-child(-n+2){border-bottom:1px solid var(--line);}
  .strip__cell:nth-child(2n+1){padding-left:0;}
}
.strip__n{
  font-family:var(--display); font-size:34px; font-weight:500; color:var(--ink);
  display:block; line-height:1; margin-bottom:16px;
}
.strip__cell h3{
  font-family:var(--sans); font-size:16px; font-weight:700; letter-spacing:-0.01em;
  margin-bottom:9px; line-height:1.3;
}
.strip__cell p{font-size:14px; color:var(--muted); line-height:1.6;}

/* ---------- Quote / proof band ---------- */
.proof{
  text-align:center; max-width:820px; margin:0 auto;
}
.proof__q{
  font-family:var(--display); font-weight:500; font-style:italic;
  font-size:clamp(24px,3.6vw,38px); line-height:1.28; letter-spacing:-0.01em;
}
.proof__by{
  margin-top:20px; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--label);
}


/* ============================================================
   PRODUCT DETAIL PAGES
   ============================================================ */
.pdp{display:grid; grid-template-columns:1fr; gap:40px; align-items:start;}
@media (min-width:900px){ .pdp{grid-template-columns:1.05fr .95fr; gap:56px;} }

.pdp__media{display:grid; gap:14px; grid-template-columns:1fr;}
.gal__item{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  background:var(--bone); border:1px solid var(--line); box-shadow:var(--shadow);
}
.gal__item img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block;}
.gal__item:not(:first-child) img{aspect-ratio:16/10;}
@media (min-width:560px){
  .pdp__media{grid-template-columns:1fr 1fr;}
  .gal__item:first-child{grid-column:1 / -1;}
}
.gal__cap{
  position:absolute; left:12px; bottom:12px;
  background:rgba(255,255,255,.93); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:999px; padding:6px 13px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink);
}

/* Spec table */
.spec{margin:34px 0 0; padding:0; border-top:1px solid var(--line);}
.spec__row{
  display:grid; grid-template-columns:1fr; gap:2px;
  padding:15px 0; border-bottom:1px solid var(--line);
}
@media (min-width:520px){ .spec__row{grid-template-columns:150px 1fr; gap:22px; align-items:baseline;} }
.spec dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--label); margin:0;
}
.spec dd{margin:0; font-size:14.5px; color:var(--muted); line-height:1.6;}

/* Related products */
.relgrid{display:grid; grid-template-columns:1fr; gap:14px;}
@media (min-width:560px){ .relgrid{grid-template-columns:repeat(3,1fr);} }
.relcard{
  display:block; border:1px solid var(--line-2); border-radius:var(--radius);
  overflow:hidden; background:var(--paper);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.relcard:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
.relcard img{width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--bone);}
.relcard__t{
  display:block; padding:16px 18px 0; font-family:var(--sans);
  font-size:15.5px; font-weight:600; letter-spacing:-0.01em; color:var(--ink);
}
.relcard__s{
  display:block; padding:5px 18px 18px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--label);
}

/* Product cards link through: whole tile clickable, buttons stay separate */
.prod{position:relative;}
.prod__name a{color:inherit;}
.prod__name a::after{content:""; position:absolute; inset:0; z-index:1;}
.prod__name a:hover{text-decoration:underline; text-underline-offset:3px;}
.prod__foot{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:9px;}