/* Author: Ethan Lowery
   veratron.co.za. Mirrors veratron.com: white ground, black type, uppercase
   display headings, wide gutters, one accent used sparingly. Flat, no gradients. */
:root{
  --ink:#111111; --ink-2:#5a5a5a; --ink-3:#8c8c8c;
  --line:#e4e4e4; --surface:#ffffff; --surface-2:#f2f2f2; --dark:#141414;
  --accent:#111111;
  --wrap:1240px; --gut:clamp(20px,4vw,64px);
  --sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--surface);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
main{min-height:60vh}

/* ---- header ---- */
.site-head{--head-h:72px;position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:2rem;padding:.9rem var(--gut)}
@media (min-width:861px){.site-head{padding:1.6rem var(--gut)}}
.wordmark{display:flex;align-items:center;margin-right:auto}
.wordmark img{width:auto}
.wordmark__full{height:60px;display:none}  /* veratron.com renders theirs at
   about 175px wide on a 1440 viewport, roughly double a default header logo */
.wordmark__mark{height:46px}
@media (min-width:861px){
  .wordmark__full{display:block}
  .wordmark__mark{display:none}
}
.site-head nav{display:flex;gap:1.6rem;flex-wrap:wrap}
.site-head nav a{text-transform:uppercase;font-size:.78rem;font-weight:600;letter-spacing:.11em;
  padding:.35rem 0;border-bottom:2px solid transparent}
.site-head nav a:hover{border-bottom-color:var(--ink)}
/* ---- mobile menu ---- */
.navtoggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;
  width:44px;height:44px;flex-direction:column;justify-content:center;gap:5px}
.navtoggle span{display:block;height:2px;width:22px;background:var(--ink);
  transition:transform .25s ease,opacity .2s ease}
@media (max-width:860px){
  .navtoggle{display:flex}
  .buy-cta{margin-left:auto}
  .site-head{gap:.75rem}
  .site-head nav{position:fixed;inset:var(--head-h,72px) 0 auto 0;background:var(--dark);
    flex-direction:column;gap:0;padding:.5rem var(--gut) 1.5rem;
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:opacity .22s ease,transform .22s ease,visibility .22s;
    max-height:calc(100vh - var(--head-h,72px));overflow-y:auto}
  .site-head nav a{color:#fff;font-size:1rem;letter-spacing:.1em;padding:1rem 0;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .site-head nav a:hover{border-bottom-color:rgba(255,255,255,.12);color:var(--accent)}
  body.nav-open .site-head nav{transform:none;opacity:1;visibility:visible}
  body.nav-open{overflow:hidden}
  body.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  body.nav-open .navtoggle span:nth-child(2){opacity:0}
  body.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--ink);color:#fff;padding:.85rem 1.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:.78rem;border:2px solid var(--ink)}
.btn:hover{background:#fff;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--light{background:#fff;color:var(--ink);border-color:#fff}
.btn--light:hover{background:transparent;color:#fff}
/* on a dark ground: outlined, white type, fills white on hover */
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn--onDark:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--sm{padding:.6rem 1.1rem;font-size:.72rem}

/* ---- layout ---- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.section{padding:clamp(3.5rem,8vw,7rem) 0}
.section--grey{background:var(--surface-2)}
.section--dark{background:var(--dark);color:#fff}
h1,h2,h3{letter-spacing:-.025em;line-height:1.03;font-weight:800}
h1{font-size:clamp(2.6rem,6.5vw,5rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,4vw,3rem);text-transform:uppercase}
h3{font-size:1.15rem;letter-spacing:-.01em;line-height:1.25}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);max-width:62ch}
.muted{color:var(--ink-2);font-size:.95rem}
.kicker{text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;font-weight:700;color:var(--ink-3)}

/* ---- hero ---- */
.hero{background:var(--dark);color:#fff;min-height:min(78vh,680px);
  display:flex;align-items:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:74px 74px;pointer-events:none}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{font-size:clamp(3rem,10vw,7.5rem);font-weight:300;letter-spacing:-.045em;
  text-transform:lowercase;color:rgba(255,255,255,.92)}
.hero .lede{color:rgba(255,255,255,.72);margin-top:1.5rem}
.hero .cta-row{margin-top:2.5rem}
.cta-row{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---- two-column intro, as on veratron.com ---- */
.split{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(1.5rem,4vw,4rem)}
.split .strong{font-weight:700}
@media (max-width:760px){.split{grid-template-columns:1fr}}

/* ---- stat row ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(1.5rem,4vw,3rem);text-align:center;margin-top:clamp(2.5rem,5vw,4rem)}
.stat__n{font-size:clamp(2.4rem,4vw,3.4rem);font-weight:300;letter-spacing:-.04em}
.stat__l{display:inline-block;font-weight:700;border-bottom:2px solid var(--ink);
  padding-bottom:.25rem;margin:.6rem 0 .5rem}

/* ---- cards ---- */
.grid{display:grid;gap:1.25rem}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:#fff;border:1px solid var(--line);display:flex;flex-direction:column}
.card:hover{border-color:var(--ink)}
.card__shot{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  padding:1.25rem;background:#fff;overflow:hidden}
.card__shot img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.card__shot--empty{background:var(--surface-2);color:var(--ink-3);font-size:.8rem}
.card__body{padding:1rem 1.1rem 1.25rem;border-top:1px solid var(--line);flex:1;
  display:flex;flex-direction:column;gap:.35rem}
.card__cat{font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);font-weight:700}
.card__name{font-weight:600;font-size:.95rem;line-height:1.3}
.card__art{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;color:var(--ink-2);margin-top:auto}

/* ---- market / feature tiles ---- */
.tile{position:relative;background:var(--dark);color:#fff;padding:clamp(1.8rem,3vw,2.6rem);
  min-height:260px;display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem}
.tile h3{font-size:1.6rem;text-transform:uppercase;letter-spacing:-.02em}
.tile p{color:rgba(255,255,255,.72);font-size:.95rem}
.tile--light{background:var(--surface-2);color:var(--ink)}
.tile--light p{color:var(--ink-2)}

/* ---- product detail ---- */
.pdp{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:start}
@media (max-width:860px){.pdp{grid-template-columns:1fr}}
.pdp__gallery{border:1px solid var(--line);padding:1.5rem;display:flex;align-items:center;
  justify-content:center;aspect-ratio:1;background:#fff}
.pdp__gallery img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.pdp__thumbs{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.pdp__thumbs img{width:72px;height:72px;object-fit:contain;border:1px solid var(--line);padding:.3rem;background:#fff}
.spec{width:100%;border-collapse:collapse;margin:1.75rem 0}
.spec th,.spec td{text-align:left;padding:.7rem 0;border-bottom:1px solid var(--line);font-size:.93rem;vertical-align:top}
.spec th{width:42%;font-weight:600;color:var(--ink-2)}
.spec td{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.notice{border-left:3px solid var(--ink);background:var(--surface-2);padding:1rem 1.1rem;margin:1.5rem 0;font-size:.93rem}

/* ---- filters ---- */
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:2rem 0 2.5rem}
.chip{border:1px solid var(--line);padding:.5rem 1rem;font-size:.8rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;cursor:pointer;background:#fff}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- downloads ---- */
.dl-group{border-top:1px solid var(--line);padding:1.4rem 0}
.dl-group h3{margin-bottom:.6rem}
.dl-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:0 2rem;margin:0}
.dl-item{display:flex;align-items:baseline;gap:.65rem;padding:.5rem 0;
  border-bottom:1px solid var(--line);font-size:.87rem}
.dl-lang{flex:0 0 30px;font-size:.64rem;font-weight:700;letter-spacing:.09em;
  color:var(--ink-3);border:1px solid var(--line);padding:.12rem 0;text-align:center}
.dl-lang--en{color:#fff;background:var(--ink);border-color:var(--ink)}
.dl-lang--none{border-color:transparent}
/* min-width:0 or a long filename pushes the size label out of the row */
.dl-name{flex:1 1 auto;min-width:0;color:var(--ink-2);overflow-wrap:anywhere;line-height:1.35}
.dl-size{flex:0 0 auto;color:var(--ink-3);font-size:.75rem;white-space:nowrap}

/* ---- footer ---- */
.site-foot{background:var(--dark);color:#fff;padding:clamp(3rem,6vw,5rem) var(--gut) 2rem;margin-top:clamp(3rem,7vw,6rem)}
.foot-grid{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);gap:2rem}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-mark{height:64px;width:auto;margin-bottom:1.25rem}
.foot-by{display:block;margin-top:1.25rem}
.foot-by .muted{display:block;font-size:.8rem;margin-bottom:.5rem}
.foot-by img{width:190px;height:auto;opacity:.95}
.foot-by:hover img{opacity:1}
.dist-mark{width:190px;height:auto;margin-top:1.75rem}
.site-foot .foot-h{font-size:.74rem;text-transform:uppercase;letter-spacing:.14em;margin-bottom:.8rem;color:#fff;font-weight:700}
.site-foot a{display:block;color:rgba(255,255,255,.72);font-size:.9rem;padding:.22rem 0}
.site-foot a:hover{color:#fff}
.site-foot .muted{color:rgba(255,255,255,.6)}
.foot-legal{max-width:var(--wrap);margin:3rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:.8rem}
.breadcrumb{font-size:.8rem;color:var(--ink-3);margin-bottom:1.5rem}
.breadcrumb a:hover{color:var(--ink)}

/* ---- video hero, matching veratron.com: YouTube embed on desktop, a still on
   mobile, and their diagonal scrim over both ---- */
.vhero{position:relative;overflow:hidden;background:var(--dark)}
.vhero__frame{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;display:none;
  /* poster behind the embed: if YouTube is slow, blocked or the viewer has
     third-party frames off, the hero is still a picture rather than a black slab */
  background:#141414 url('/brand/hero-still.webp') center/cover no-repeat}
@media screen and (min-width:750px){.vhero__frame{display:block}}
.vhero__frame iframe,.vhero__frame #vhero-player{position:absolute;top:50%;left:50%;width:132vw;height:74.25vw;
  min-height:132%;min-width:234.6vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
/* overscanned on purpose: YouTube draws its own title and channel chrome in the
   top-left of the player, and cropping it out is the only way to lose it on an
   embed. veratron.com leaves theirs showing. */
.vhero__still{display:block;position:relative}  /* else its ::after scrim sizes
   to .vhero and greys out the text block below the image */
@media screen and (min-width:750px){.vhero__still{display:none}}
.vhero__still img{width:100%;height:58vh;min-height:320px;object-fit:cover}
.vhero__frame::after,.vhero__still::after{content:"";position:absolute;inset:0;
  background:linear-gradient(218deg,#b5babd59,#00000054 68%)}
/* the copy band under the media, part of the same hero block */
.vintro{background:var(--dark);color:#fff;padding:clamp(2.25rem,4vw,3.5rem) 0 clamp(2.75rem,5vw,4rem)}
.vintro .kicker{color:rgba(255,255,255,.55)}
.vintro .lede{color:rgba(255,255,255,.78);margin-bottom:2rem}
.vintro__words{font-size:clamp(3rem,13vw,4.5rem);font-weight:300;letter-spacing:-.045em;
  text-transform:lowercase;color:#fff;margin:.4rem 0 1rem}
@media screen and (min-width:750px){
  .vintro__words{display:none}   /* the film supplies the word on desktop */
  .vintro{padding:clamp(2rem,3vw,2.75rem) 0}
}
.vhero__content .wrap{width:100%}
/* the headline cycles only where there is no film to do it */
.cycle{display:inline-block;opacity:1;transition:opacity .4s ease}

/* ---- news ---- */
.post-head{max-width:66ch}
.post-body{max-width:66ch;margin-top:2rem}
.post-body p{margin-bottom:1.15rem}
.post-meta{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.tag{background:var(--surface-2);padding:.3rem .7rem;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em}
.post-card__img{aspect-ratio:16/10;overflow:hidden;background:var(--surface-2)}
.post-card__img img{width:100%;height:100%;object-fit:cover}

/* ---- focus, which the first pass left to the browser default and the dark
   sections swallowed entirely ---- */
:where(a,button,input,summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.section--dark :where(a,button):focus-visible,.site-foot :where(a,button):focus-visible,
.vintro :where(a,button):focus-visible{outline-color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.8rem 1.2rem;z-index:100}
.skip:focus{left:0}

/* card and group titles are h2 for document order (h1 -> h3 skipped a level),
   sized as headings rather than by their tag */
.card-h{font-size:1.15rem;letter-spacing:-.01em;line-height:1.25;font-weight:800}
.dl-h{font-size:1.15rem;letter-spacing:-.01em;line-height:1.25;font-weight:800;margin-bottom:.6rem}