:root{
  --paper:#f4f3ef; --paper-2:#eceae4; --white:#fff;
  --ink:#16181b; --ink-2:#4a4d52; --line:#d6d3cc;
  --night:#0d0e10; --night-2:#17191c; --night-line:#2c2f34; --night-ink:#e9e7e2; --night-ink-2:#a6a8ad;
  --orange:#ff6e00; --orange-text:#b04a00; --orange-soft:#ffe3cc;
  --max:1240px; --gut:clamp(16px,4vw,48px);
  --pad:clamp(64px,9vw,120px);
  --f-head:"Archivo",system-ui,sans-serif; --f-body:"Source Sans 3",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--f-body);font-feature-settings:"tnum" 0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:600;line-height:1.08;margin:0;font-stretch:90%}
h1{font-size:clamp(2.4rem,5.2vw,4.25rem);letter-spacing:-.01em}
h2{font-size:clamp(1.85rem,3.4vw,2.9rem);letter-spacing:-.005em}
h3{font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.2}
p{margin:0 0 1em}
.lede{font-size:clamp(1.12rem,1.4vw,1.3rem);line-height:1.5;color:var(--ink-2);max-width:38em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px)}
section{padding:var(--pad) 0}
.rule{border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.skip{position:absolute;left:-10000px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;z-index:99}
.skip:focus{left:8px}

/* header */
.site-head{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo img{height:26px;width:auto}
.nav{display:flex;gap:28px;align-items:center}
.nav a{text-decoration:none;font-weight:600;font-size:.98rem;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current=page]{color:var(--ink);border-color:var(--orange)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 1rem/1 var(--f-body);text-decoration:none;padding:14px 22px;border-radius:4px;background:var(--ink);color:#fff;border:1px solid var(--ink);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.nav .btn{padding:10px 16px;color:#fff;border-bottom:1px solid var(--ink)}
.nav .btn:hover{color:var(--ink)}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:4px;padding:8px 12px;font:600 .95rem var(--f-body);color:var(--ink)}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:flex-start;padding:16px var(--gut) 24px;gap:6px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav a{font-size:1.1rem}
}

/* hero */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,88px)}
.hero .grid{align-items:center;row-gap:40px}
.hero-copy{grid-column:1/6}
.hero-copy h1{margin-bottom:24px}
.hero-copy .lede{margin-bottom:32px}
.hero-viz{grid-column:6/13}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:960px){.hero-copy,.hero-viz{grid-column:1/-1}}

/* sensor demo */
.sensor{background:var(--night);color:var(--night-ink);border-radius:6px;padding:18px;position:relative}
.sensor-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.sensor-title{font-weight:600;font-size:.98rem}
.modes{display:flex;border:1px solid var(--night-line);border-radius:4px;overflow:hidden}
.modes button{background:none;border:0;color:var(--night-ink-2);font:600 .92rem var(--f-body);padding:8px 14px;cursor:pointer}
.modes button[aria-pressed=true]{background:var(--night-ink);color:var(--night)}
.sensor canvas{display:block;width:100%;height:auto;aspect-ratio:16/10;touch-action:none;cursor:crosshair;border-radius:3px}
.sensor-read{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;font-variant-numeric:tabular-nums}
.sensor-read div{border-top:1px solid var(--night-line);padding-top:10px}
.sensor-read dt{font-size:.82rem;color:var(--night-ink-2)}
.sensor-read dd{margin:2px 0 0;font:600 1.15rem var(--f-head)}
.sensor-note{font-size:.85rem;color:var(--night-ink-2);margin:12px 0 0}
.scale{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--night-ink-2);margin-top:10px}
.scale i{flex:1;height:6px;border-radius:2px;background:linear-gradient(90deg,#1b1e22,#7a3a12,#ff6e00,#ffd2a8)}
.scale.temp i{background:linear-gradient(90deg,#1d3550,#3b6d8f,#ff6e00,#ffe0c2)}

/* blocks */
.head-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);margin-bottom:clamp(36px,5vw,64px);row-gap:16px}
.head-row h2{grid-column:1/7}
.head-row p{grid-column:8/13;color:var(--ink-2);align-self:end;margin:0}
@media (max-width:900px){.head-row h2,.head-row p{grid-column:1/-1}}
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.facts div{padding:22px 20px 0 0}
.facts strong{display:block;font:600 clamp(1.7rem,2.6vw,2.3rem)/1.1 var(--f-head);margin-bottom:6px}
.facts span{color:var(--ink-2);font-size:.98rem;display:block;max-width:18em}
.facts a{color:var(--orange-text)}
@media (max-width:800px){.facts{grid-template-columns:1fr 1fr;row-gap:24px}}

.dark{background:var(--night);color:var(--night-ink)}
.dark .head-row p,.dark .lede{color:var(--night-ink-2)}
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--night-line);border:1px solid var(--night-line)}
.product{background:var(--night);display:flex;flex-direction:column}
.product img{aspect-ratio:3/2;object-fit:cover;width:100%}
.product .body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.product p{color:var(--night-ink-2);margin:0;font-size:1rem}
.product a{margin-top:auto;padding-top:8px;color:var(--night-ink);font-weight:600;text-underline-offset:4px;text-decoration-color:var(--orange)}
.product a:hover{color:var(--orange)}
@media (max-width:960px){.products{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.products{grid-template-columns:1fr}}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;margin-top:clamp(32px,4vw,48px);padding-top:28px;border-top:1px solid var(--line)}
.dark .cta-row{border-color:var(--night-line)}
.cta-row p{margin:0;max-width:34em}
.dark .btn{background:var(--night-ink);color:var(--night);border-color:var(--night-ink)}
.dark .btn:hover{background:var(--orange);border-color:var(--orange)}

.split{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:32px;align-items:center}
.split .media{grid-column:1/7}
.split .copy{grid-column:8/13}
.split.rev .media{grid-column:7/13;order:2}
.split.rev .copy{grid-column:1/6}
.split .media img{border-radius:4px;width:100%;object-fit:cover}
.split h2{margin-bottom:20px}
@media (max-width:900px){.split .media,.split .copy,.split.rev .media,.split.rev .copy{grid-column:1/-1;order:0}}
.list{list-style:none;padding:0;margin:24px 0 28px;border-top:1px solid var(--line)}
.list li{padding:14px 0;border-bottom:1px solid var(--line)}
.list b{display:block;font-family:var(--f-head);font-weight:600}
.dark .list,.dark .list li{border-color:var(--night-line)}
.dark .list li{color:var(--night-ink-2)}
.dark .list b{color:var(--night-ink)}

.loop{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--ink);counter-reset:none}
.loop li{list-style:none;padding:20px 18px 0 0;position:relative}
.loop li:not(:last-child)::after{content:"";position:absolute;top:-1px;right:18px;width:28px;height:2px;background:var(--orange)}
.loop h3{margin-bottom:8px}
.loop p{color:var(--ink-2);font-size:.98rem;margin:0}
@media (max-width:900px){.loop{grid-template-columns:1fr 1fr;row-gap:24px}}
@media (max-width:520px){.loop{grid-template-columns:1fr}}

.quote{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2vw,28px);row-gap:24px;align-items:center}
.quote img{grid-column:1/4;border-radius:4px}
.quote blockquote{grid-column:5/13;margin:0}
.quote blockquote p{font:500 clamp(1.4rem,2.3vw,2rem)/1.3 var(--f-head);font-stretch:90%}
.quote cite{font-style:normal;color:var(--ink-2)}
.quote cite a{color:var(--orange-text)}
@media (max-width:760px){.quote img{grid-column:1/7}.quote blockquote{grid-column:1/-1}}

.news{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.news article{border-top:1px solid var(--ink);padding-top:16px}
.news time{color:var(--ink-2);font-size:.92rem}
.news h3{margin:8px 0 10px}
.news p{color:var(--ink-2);font-size:1rem}
@media (max-width:860px){.news{grid-template-columns:1fr}}

.specs{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.specs caption{text-align:left;font:600 1.3rem var(--f-head);padding-bottom:12px}
.specs th,.specs td{text-align:left;padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top}
.specs th{width:40%;font-weight:600}
.specs td{color:var(--ink-2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px)}
@media (max-width:860px){.two{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,28px)}
.steps div{border-top:2px solid var(--ink);padding-top:16px}
.steps div:first-child{border-color:var(--orange)}
.steps p{color:var(--ink-2);font-size:1rem;margin:8px 0 0}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.timeline{list-style:none;padding:0;margin:0;border-left:2px solid var(--line)}
.timeline li{padding:0 0 26px 24px;position:relative}
.timeline li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;background:var(--paper);border:2px solid var(--orange);border-radius:2px}
.timeline b{display:block;font-family:var(--f-head)}
.timeline span{color:var(--ink-2)}

.page-head{padding:clamp(36px,5vw,64px) 0 clamp(32px,4vw,48px)}
.page-head .lede{margin-top:20px}
.crumbs{font-size:.95rem;color:var(--ink-2);margin-bottom:18px}
.crumbs a{color:var(--ink-2)}
.wide-img{width:100%;aspect-ratio:21/8;object-fit:cover;border-radius:4px}
.photo-note{font-size:.85rem;color:var(--ink-2);margin-top:8px}

.contact{background:var(--paper-2)}
.contact .grid{row-gap:32px}
.contact h2{grid-column:1/7}
.contact .c-copy{grid-column:8/13}
.contact .c-copy p{color:var(--ink-2)}
@media (max-width:900px){.contact h2,.contact .c-copy{grid-column:1/-1}}

footer{background:var(--paper);border-top:1px solid var(--line);padding:56px 0 40px;font-size:.98rem}
footer .grid{row-gap:28px}
footer .f-brand{grid-column:1/5}
footer .f-brand img{height:22px;width:auto;margin-bottom:14px}
footer .f-brand p{color:var(--ink-2)}
footer nav{grid-column:6/13;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
footer nav b{display:block;margin-bottom:8px;font-family:var(--f-head);font-weight:600}
footer nav a{display:block;color:var(--ink-2);text-decoration:none;padding:3px 0}
footer nav a:hover{color:var(--ink);text-decoration:underline}
.credit{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;color:var(--ink-2);font-size:.9rem}
.credit a{color:var(--ink);font-weight:600}
@media (max-width:860px){footer .f-brand,footer nav{grid-column:1/-1}footer nav{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.mm-copy,.mm-img{grid-column:1/-1!important}.page-head .grid{row-gap:28px}}