:root{--paper:#efebe2;--paper2:#e6e1d4;--ink:#1c1b19;--mute:#6b675e;--line:#cfc8b8;--orange:#e5501b;--olive:#6f7a4f;--d:'Archivo',sans-serif;--m:'DM Mono',monospace;--s:'Newsreader',Georgia,serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--d);-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--orange);color:#fff;padding:8px 12px;z-index:99}
h1,h2,h3{font-family:var(--d);font-stretch:112%;font-weight:800;line-height:1;letter-spacing:-.025em}
h2{font-size:clamp(30px,5vw,56px);margin-bottom:36px;max-width:18ch}
h3{font-size:20px;font-stretch:100%}
.tag-mono,.model{font:500 12px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);display:block;margin-bottom:16px}
section{padding:96px clamp(20px,6vw,88px);border-top:1px solid var(--line)}
.lead{font:400 20px/1.55 var(--s);color:#3c3a35;max-width:52ch;margin-bottom:32px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 26px;border-radius:999px;font:700 15px var(--d);text-decoration:none;border:2px solid var(--ink);transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-2px)}
.btn-orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn-orange:hover{background:#c9410f}
.btn-ink{background:transparent;color:var(--ink)}.btn-ink:hover{background:var(--ink);color:var(--paper)}

.hdr{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:18px clamp(20px,6vw,88px);background:rgba(239,235,226,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.logo{font:800 22px var(--d);font-stretch:90%;letter-spacing:-.03em;text-decoration:none;display:inline-flex;align-items:baseline}
.logo i{width:9px;height:9px;border-radius:50%;background:var(--orange);margin-left:3px}
.nav{display:flex;gap:30px;margin-left:auto;font-weight:600;font-size:15px}
.nav a{text-decoration:none;color:var(--mute)}.nav a:hover{color:var(--ink)}
.hdr-cta{padding:10px 20px}
.burger{display:none;background:none;border:0;width:36px;height:36px;cursor:pointer}
.burger span{display:block;height:2px;background:var(--ink);margin:7px 4px}

.hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;border:0;padding-top:72px}
.hero h1{font-size:clamp(52px,8.5vw,116px);font-stretch:125%;font-weight:900;margin-bottom:28px}
.hero h1 em{font-family:var(--s);font-style:italic;font-weight:400;color:var(--orange);font-stretch:normal}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.drawing{position:relative;aspect-ratio:1;background:var(--paper2);border-radius:28px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px}
.box{position:absolute;left:14%;top:30%;width:56%;height:22%;background:linear-gradient(#2a2926,#121110);border-radius:18px;box-shadow:0 30px 40px -18px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,255,255,.08)}
.led{position:absolute;left:10%;top:44%;width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px var(--orange)}
.grille{position:absolute;right:8%;top:30%;width:26%;height:40%;background:repeating-linear-gradient(90deg,#3a3935 0 2px,transparent 2px 6px);border-radius:4px}
.remote-ill{position:absolute;right:13%;top:22%;width:12%;height:52%;background:#f7f4ee;border:2px solid var(--ink);border-radius:40px;display:flex;flex-direction:column;align-items:center;gap:8%;padding-top:16%;transform:rotate(12deg);box-shadow:0 20px 30px -16px rgba(0,0,0,.35)}
.remote-ill span{width:22%;aspect-ratio:1;border-radius:50%;background:var(--ink)}
.remote-ill .ring{width:58%;border:6px solid var(--orange);background:none;order:-1}
.callout{position:absolute;font:500 12px var(--m);background:var(--paper);border:1px solid var(--ink);padding:4px 10px;border-radius:999px}
.c1{left:6%;top:16%}.c2{left:20%;bottom:28%}.c3{right:5%;bottom:14%}
.drawing figcaption{position:absolute;left:24px;bottom:18px;font:500 11px var(--m);color:var(--mute);letter-spacing:.06em}

.index-strip{display:grid;grid-template-columns:repeat(3,1fr);padding:0;background:var(--ink);color:var(--paper)}
.index-strip div{padding:40px clamp(20px,3vw,44px);border-right:1px solid #3a3833}
.index-strip div:last-child{border:0}
.index-strip span{font:500 12px var(--m);color:var(--orange)}
.index-strip h2{font-size:26px;margin:14px 0 10px}
.index-strip p{color:#b9b3a6;font-size:15px}

.spec-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.spec{background:#f7f4ee;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.spec header{padding:22px 22px 18px;border-bottom:1px dashed var(--line)}
.spec header span{font:500 11px var(--m);color:var(--mute);text-transform:uppercase}
.spec header h3{margin-top:10px}
.spec dl{padding:18px 22px 24px;display:grid;gap:4px}
.spec dt{font:500 11px var(--m);color:var(--mute);text-transform:uppercase;margin-top:10px}
.spec dd{font-size:15px}
.spec.is-pick{background:var(--olive);color:#f4f1e8;border-color:var(--olive)}
.spec.is-pick dt,.spec.is-pick header span{color:#d8dcc4}

.plans{background:var(--paper2)}
.plans-head{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;margin-bottom:40px}
.dial-wrap{display:grid;justify-items:center;gap:14px}
.dial{width:170px;height:170px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbf9f4,#d9d3c4);box-shadow:0 18px 30px -12px rgba(0,0,0,.35),inset 0 -4px 10px rgba(0,0,0,.12);display:grid;place-items:center;cursor:pointer}
.knob{width:112px;height:112px;border-radius:50%;background:repeating-conic-gradient(#2a2926 0 4deg,#1c1b19 4deg 8deg);position:relative;transform:rotate(-90deg);transition:transform .35s cubic-bezier(.5,1.6,.4,1);box-shadow:0 6px 12px rgba(0,0,0,.4)}
.pointer{position:absolute;right:10px;top:50%;width:22px;height:5px;margin-top:-2.5px;background:var(--orange);border-radius:3px}
.dial-ticks{display:flex;gap:8px}
.dial-ticks button{width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);background:transparent;font:500 15px var(--m);cursor:pointer}
.dial-ticks button[aria-checked=true]{background:var(--orange);border-color:var(--orange);color:#fff}
.dial-label{font:500 12px var(--m);text-transform:uppercase;color:var(--mute)}
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{background:var(--paper);border:2px solid var(--ink);border-radius:24px;padding:30px;display:flex;flex-direction:column}
.plan h3{font-size:28px;font-stretch:115%}
.price{font:900 52px var(--d);font-stretch:80%;margin-top:18px;letter-spacing:-.03em;transition:opacity .15s}
.price.swap{opacity:0}
.pm{font:500 13px var(--m);color:var(--mute);margin-bottom:20px}
.plan ul{list-style:none;margin-bottom:26px;border-top:1px solid var(--line)}
.plan li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.plan .btn{margin-top:auto}
.plan.is-pick{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan.is-pick .model,.plan.is-pick .pm{color:var(--orange)}
.plan.is-pick li{border-color:#3a3833}
.long-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.long{display:grid;grid-template-columns:1fr auto;gap:4px 20px;align-items:center;border:2px dashed var(--ink);border-radius:24px;padding:24px 28px}
.long .model{grid-column:1/-1;margin-bottom:4px}
.long p{color:var(--mute);font:400 17px var(--s)}
.long b{grid-column:2;grid-row:2/4;font:900 36px var(--d);font-stretch:80%}
.long .btn{grid-column:1/-1;justify-self:start;margin-top:12px}
.note{margin-top:24px;font:400 16px var(--s);color:var(--mute)}.note a{color:var(--orange)}

.setup-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.setup-steps b{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--orange);color:#fff;font:800 22px var(--d);margin-bottom:20px}
.setup-steps p{font:400 18px/1.55 var(--s);color:#3c3a35;margin-top:8px}

.faq details{border-top:2px solid var(--ink);max-width:860px}
.faq details:last-of-type{border-bottom:2px solid var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;font:700 19px var(--d);position:relative}
.faq summary::after{content:'';position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;border:2px solid var(--ink);transition:background .2s}
.faq details[open] summary::after{background:var(--orange);border-color:var(--orange)}
.faq details p{padding:0 0 22px;font:400 18px/1.6 var(--s);color:#3c3a35;max-width:68ch}

.ftr{display:grid;grid-template-columns:1fr auto;gap:24px;padding:56px clamp(20px,6vw,88px);background:var(--ink);color:var(--paper)}
.ftr p{color:#b9b3a6;font-size:14px;margin-top:8px}
.ftr nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:600;font-size:14px}
.ftr nav a{text-decoration:none;color:#b9b3a6}.ftr nav a:hover{color:var(--orange)}
.small{grid-column:1/-1;font:400 12px var(--m)}

@media (max-width:960px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line)}
  .nav.open{display:flex}.nav a{padding:16px 24px;border-top:1px solid var(--line)}
  .burger{display:block;margin-left:auto}.hdr-cta{display:none}
  .hero,.plans-head{grid-template-columns:1fr}
  .index-strip,.plan-grid,.long-grid,.setup-steps{grid-template-columns:1fr}
  .index-strip div{border-right:0;border-bottom:1px solid #3a3833}
  .spec-cards{grid-template-columns:1fr 1fr}
  .ftr{grid-template-columns:1fr}
}
@media (max-width:560px){.spec-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}