/* ============================================================================
   SENSYX — getsensyx.com
   Design system derived from the real brand assets, not invented:
     · red #E4483C  — sampled from the A+ header headline + device body (hue 4°)
     · ink #1A1A1A  — packaging ground + A+ ground
     · yellow #F2A81E — device SENS/ZERO keys, model number on the carton
   Positioning: measuring INSTRUMENT, not a safety device. Never "alarm",
   "protect", "guard" or "safety" except inside an explicit denial.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --red:#E4483C;
  --red-hi:#F05454;
  --yellow:#F2A81E;
  --ink:#141414;
  --ink-2:#1C1C1C;
  --ink-3:#242424;
  --line:#333;
  --line-soft:#2A2A2A;
  --fg:#FFFFFF;
  --fg-2:#B8B8B8;
  --fg-3:#8A8A8A;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1120px;
  --pad:24px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}

.wrap{max-width:var(--wrap); margin:0 auto; padding-inline:var(--pad)}

/* ---------- type ---------- */
h1,h2,h3{margin:0; line-height:1.1; letter-spacing:-.02em; font-weight:800}
h1{font-size:clamp(2.1rem,6vw,3.9rem)}
h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}
h3{font-size:1.06rem; letter-spacing:-.01em; font-weight:700}
p{margin:0 0 1em}
.lede{font-size:clamp(1rem,2vw,1.18rem); color:var(--fg-2); max-width:56ch}
.eyebrow{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--red);
  margin:0 0 14px;
}
.eyebrow.mute{color:var(--fg-3)}
strong.hl{color:var(--red); font-weight:700}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(20,20,20,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-head .wrap{display:flex; align-items:center; gap:18px; height:62px}
.brand{display:flex; align-items:center; text-decoration:none; flex:0 0 auto}
.brand img{height:19px; width:auto}
.site-foot .brand img{height:22px}
.nav{display:flex; gap:22px; margin-left:auto; align-items:center}
.nav a{
  text-decoration:none; color:var(--fg-2); font-size:.88rem; font-weight:500;
  white-space:nowrap;
}
.nav a:hover,.nav a[aria-current]{color:var(--fg)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-weight:600; font-size:.92rem; padding:13px 22px; border:1px solid transparent;
  transition:.15s;
}
.btn-primary{background:var(--red); color:#fff}
.btn-primary:hover{background:var(--red-hi)}
.btn-ghost{border-color:var(--line); color:var(--fg)}
.btn-ghost:hover{border-color:var(--fg-3); background:var(--ink-2)}
.btn .amz{font-family:var(--mono); font-size:.76rem; opacity:.85}

/* ---------- hero ---------- */
.hero{border-bottom:1px solid var(--line-soft); overflow:hidden}
.hero .wrap{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px;
  align-items:center; padding-block:clamp(48px,7vw,92px);
}
.hero h1 .thin{font-weight:300; color:var(--fg-2); display:block}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero-fig{position:relative}
.hero-fig img{
  width:100%; max-width:420px; margin-inline:auto;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.6));
}

/* ---------- stance band: the instrument/alarm distinction ---------- */
.stance{background:var(--ink-2); border-bottom:1px solid var(--line-soft)}
.stance .wrap{padding-block:34px; display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:start}
.stance .bar{width:3px; background:var(--red); align-self:stretch; min-height:54px}
.stance p{margin:0; color:var(--fg-2); max-width:78ch; font-size:.95rem}
.stance p + p{margin-top:.6em}

/* ---------- section ---------- */
section{padding-block:clamp(52px,7vw,84px)}
.sec-head{margin-bottom:38px; max-width:60ch}
.sec-head p{color:var(--fg-2); margin-top:14px; margin-bottom:0}

/* ---------- product cards ---------- */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--ink-2); border:1px solid var(--line-soft);
  display:flex; flex-direction:column; padding:26px 22px 22px; position:relative;
}
.card.soon{opacity:.62}
.card .tag{
  position:absolute; top:0; right:0; background:var(--red); color:#fff;
  font-family:var(--mono); font-size:.64rem; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 9px; font-weight:600;
}
.card.soon .tag{background:var(--line); color:var(--fg-2)}
.card .model{font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; color:var(--fg-3)}
.card h3{margin:6px 0 10px}
.card p{color:var(--fg-2); font-size:.9rem; flex:1}
.card .go{
  margin-top:14px; font-size:.86rem; font-weight:600; color:var(--red);
  text-decoration:none; display:inline-flex; gap:7px; align-items:center;
}
.card .go:hover{color:var(--red-hi)}

/* ---------- feature rows ---------- */
.feats{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft)}
.feat{background:var(--ink); padding:28px 26px}
.feat .n{font-family:var(--mono); font-size:1.85rem; font-weight:600; color:var(--red); line-height:1}
.feat h3{margin:12px 0 7px}
.feat p{color:var(--fg-2); font-size:.9rem; margin:0}

/* ---------- two-column split (product page) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
.split .feats{grid-template-columns:1fr}

/* ---------- spec table ---------- */
.spec-wrap{overflow-x:auto}
table.spec{width:100%; border-collapse:collapse; font-size:.9rem; min-width:420px}
table.spec th,table.spec td{
  text-align:left; padding:12px 14px; border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
table.spec th{color:var(--fg-3); font-weight:500; width:44%}
table.spec td{font-family:var(--mono); font-size:.85rem}
table.spec tr:last-child th,table.spec tr:last-child td{border-bottom:0}

/* ---------- compare ---------- */
.cmp-wrap{overflow-x:auto}
table.cmp{width:100%; border-collapse:collapse; font-size:.9rem; min-width:520px}
table.cmp th,table.cmp td{padding:13px 14px; border-bottom:1px solid var(--line-soft); text-align:left}
table.cmp thead th{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-3); border-bottom-color:var(--line);
}
table.cmp td.yes{color:var(--red); font-weight:700}
table.cmp td.no{color:var(--fg-3)}
table.cmp tbody th{font-weight:500; color:var(--fg-2)}

/* ---------- faq ---------- */
dl.faq{margin:0; border-top:1px solid var(--line-soft)}
dl.faq dt{
  font-weight:700; padding:22px 0 8px; font-size:1rem;
}
dl.faq dd{
  margin:0 0 22px; color:var(--fg-2); font-size:.93rem;
  border-bottom:1px solid var(--line-soft); padding-bottom:22px;
}

/* ---------- download rows ---------- */
.dl-row{
  display:flex; align-items:center; gap:18px; padding:18px 0;
  border-bottom:1px solid var(--line-soft); text-decoration:none;
}
.dl-row:hover{background:var(--ink-2)}
.dl-row .ic{font-family:var(--mono); font-size:.7rem; color:var(--red); letter-spacing:.1em; flex:0 0 40px}
.dl-row .t{flex:1}
.dl-row .t b{display:block; font-weight:600}
.dl-row .t span{color:var(--fg-3); font-size:.84rem}
.dl-row .sz{font-family:var(--mono); font-size:.78rem; color:var(--fg-3)}

/* ---------- support strip ---------- */
.strip{background:var(--ink-2); border-block:1px solid var(--line-soft)}
.strip .wrap{
  padding-block:44px; display:grid; grid-template-columns:1fr auto;
  gap:26px; align-items:center;
}
.strip h2{font-size:1.5rem}
.strip p{color:var(--fg-2); margin:10px 0 0; max-width:52ch}
.mailto{font-family:var(--mono); color:var(--red); text-decoration:none; font-size:1.02rem}
.mailto:hover{color:var(--red-hi)}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line-soft); padding-block:44px 52px; font-size:.84rem}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:34px; margin-bottom:34px}
.foot-top h4{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-3); margin:0 0 14px; font-weight:500;
}
.foot-top a{display:block; color:var(--fg-2); text-decoration:none; padding:4px 0}
.foot-top a:hover{color:var(--fg)}
.legal{color:var(--fg-3); line-height:1.75; border-top:1px solid var(--line-soft); padding-top:26px}
.legal p{margin:0 0 .4em}

/* ---------- terms ---------- */
.terms{color:var(--fg-2); font-size:.93rem}
.terms h3{color:var(--fg); margin:34px 0 10px}
.terms a{color:var(--red)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr; gap:34px}
  .hero-fig{order:-1}
  .hero-fig img{max-width:280px}
  .cards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr; gap:44px}
  .feats{grid-template-columns:1fr}
  .strip .wrap{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .nav{gap:16px}
  .nav a.hide-sm{display:none}
}
@media (max-width:560px){
  :root{--pad:18px}
  .foot-top{grid-template-columns:1fr}
  .stance .wrap{grid-template-columns:1fr}
  .stance .bar{width:100%; height:3px; min-height:0}
}