/* ============================================================
   Blipfrog — site styles (night build)
   Same bones as before: hard shadows, 3px edges, pixel kickers,
   everything snaps. Now on a near-black page so the green and
   the product do the talking.
   ============================================================ */

:root{
  --paper:#0C0E0C;  --card:#151915;  --card-2:#1C211C;
  --ink:#F2EFE4;    --ink-2:#A9AA9E;  --ink-3:#6E7068;
  --edge:#F2EFE4;   --edge-soft:#2E342E; --line:#262B26;
  --green:#23C55E;  --green-d:#15913F; --flash:#4ADE80; --green-t:#4ADE80;
  --tint:#132A1B;   --sand:#EFD9A5;   --amber:#D98324;  --grey:#B9B6AB;
  --dark:#0C0E0C;
  --shadow:6px 6px 0 var(--green-d);
  --shadow-sm:4px 4px 0 var(--green-d);
  --shadow-ink:6px 6px 0 #000;
  --shadow-ink-sm:4px 4px 0 #000;
  --r:14px;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --pixel:"Silkscreen",ui-monospace,monospace;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* a faint pixel grid, 24px cells — the page is graph paper for Blip */
  background-image:
    radial-gradient(circle at 1px 1px, rgba(242,239,228,.07) 1px, transparent 1.5px);
  background-size:24px 24px;
  background-position:-11px -11px;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--green);color:var(--dark)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;letter-spacing:-.02em;color:var(--ink)}
h1{font-size:clamp(2.6rem,7vw,4.6rem)}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem)}
h3{font-size:clamp(1.2rem,2.4vw,1.5rem);letter-spacing:-.01em}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.6;color:var(--ink-2)}
.kicker{
  font-family:var(--pixel); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green-t); margin:0 0 .9rem;
}
.kicker.ink{color:var(--ink-2)}
small,.small{font-size:.86rem;line-height:1.55;color:var(--ink-2)}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:1080px;margin:0 auto;padding-inline:20px}
.narrow{max-width:760px}
section{padding-block:clamp(48px,7vw,84px)}
.section-head{max-width:640px;margin-bottom:2.4rem}
.grid{display:grid;gap:20px}
@media(min-width:720px){
  .g2{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:repeat(3,1fr)}
}

/* ---------- chrome ---------- */
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--green);color:var(--dark);padding:10px 16px;border-radius:8px}

header.site{
  position:sticky;top:0;z-index:50;background:rgba(12,14,12,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:3px solid var(--edge);
}
.bar{display:flex;align-items:center;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:1.2rem;letter-spacing:-.02em;color:var(--ink)}
.brand .mark{width:30px;height:26px;flex:none}
nav.main{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav.main a{
  font-family:var(--pixel);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:8px 11px;border-radius:8px;color:var(--ink-2);
}
nav.main a:hover{background:var(--tint);color:var(--flash)}
nav.main a[aria-current="page"]{color:var(--flash);background:var(--tint)}
nav.main a.btn{color:var(--dark);background:var(--green)}
nav.main a.btn:hover{color:var(--dark);background:var(--flash)}
@media(max-width:719px){
  .bar{height:auto;padding-block:12px;flex-wrap:wrap;gap:8px}
  nav.main{margin-left:0;width:100%;justify-content:flex-start}
  nav.main a{padding:6px 9px}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--display);font-weight:800;font-size:1.02rem;letter-spacing:-.01em;
  padding:15px 26px;border-radius:12px;text-decoration:none;cursor:pointer;
  border:3px solid var(--edge);background:var(--green);color:var(--dark);
  box-shadow:var(--shadow);transition:transform .08s steps(2,end),box-shadow .08s steps(2,end);
}
.btn:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--green-d);background:var(--flash)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--green-d)}
.btn.ghost{background:var(--card);color:var(--ink);box-shadow:var(--shadow-ink)}
.btn.ghost:hover{background:var(--card-2);box-shadow:4px 4px 0 #000}
.btn.ghost:active{box-shadow:0 0 0 #000}
.btn.sm{font-size:.9rem;padding:11px 18px;box-shadow:var(--shadow-sm)}
.btn.sm:hover{box-shadow:2px 2px 0 var(--green-d)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-ink-sm);
}
.card h3{margin-bottom:.5rem}
.card p:last-child{margin-bottom:0}
.card .num{
  font-family:var(--pixel);font-size:.72rem;letter-spacing:.1em;color:var(--green-t);
  display:block;margin-bottom:.7rem;
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,5vw,60px) clamp(36px,5vw,64px)}
.hero-grid{display:grid;gap:28px;align-items:center}
@media(min-width:900px){.hero-grid{grid-template-columns:1fr 1fr;gap:48px}}
@media(min-width:1024px){.hero-grid{grid-template-columns:1.08fr .92fr}}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.2rem)}
.hero .lede{margin-bottom:1.5rem}
.buy-row{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap;margin:0 0 .9rem}
.buy-row .price{display:flex;flex-direction:column;line-height:1.05;margin-right:4px}
.buy-row .amt{font-family:var(--display);font-weight:800;font-size:2.2rem;letter-spacing:-.03em}
.buy-row .sub{font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t);margin-top:6px}
.trust{font-size:.86rem;color:var(--ink-2);margin:0}
.trust b{color:var(--ink);font-weight:600}
@media(max-width:899px){.hero .case3d{order:-1}}
.hero .kicker{
  font-size:clamp(.82rem,1.6vw,1rem);letter-spacing:.14em;color:var(--flash);
  display:inline-block;padding:9px 13px;border:2px solid var(--green-d);border-radius:9px;background:var(--tint);
  margin:0 0 1.2rem;text-shadow:0 0 10px rgba(74,222,128,.45);
  text-wrap:balance;max-width:max-content;line-height:1.5;
}
.hero h1{margin-bottom:1rem;max-width:14ch}
.hero h1 .hl{color:var(--flash)}
.hero .lede{max-width:46ch}
.hero-stage{
  position:relative;background:var(--card);border:3px solid var(--edge);border-radius:20px;
  box-shadow:var(--shadow);padding:16px 16px 0;overflow:hidden;
  background-image:radial-gradient(60% 70% at 50% 72%, rgba(35,197,94,.16), transparent 70%);
}
.hero-stage .frog{width:100%;height:auto;max-height:400px;display:block;margin-block:-14px -6px}
.stage-floor{
  border-top:3px solid var(--edge);margin:0 -16px;padding:10px 16px;background:var(--tint);
  font-family:var(--pixel);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flash);
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.price-tag{display:flex;align-items:baseline;gap:10px;margin:0 0 1.2rem;flex-wrap:wrap}
.price-tag .amt{font-family:var(--display);font-weight:800;font-size:2.1rem;letter-spacing:-.03em}
.price-tag .tag{font-family:var(--pixel);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);
  border:2px solid var(--edge-soft);border-radius:99px;padding:6px 12px}

/* ---------- badges / pills ---------- */
.pills{display:flex;gap:8px;flex-wrap:wrap;margin:1.3rem 0 0;padding:0;list-style:none}
.pills li{
  font-family:var(--pixel);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;
  border:2px solid var(--edge);border-radius:99px;padding:6px 11px;background:var(--card);color:var(--ink);
}

/* ---------- LED demo ---------- */
.led-grid{display:grid;gap:18px}
@media(min-width:720px){.led-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.led-grid{grid-template-columns:repeat(4,1fr)}}
.led-card{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--shadow-ink-sm);overflow:hidden;display:flex;flex-direction:column;
}
.led-card .pen{background:var(--paper);border-bottom:3px solid var(--edge);padding:8px;
  background-image:radial-gradient(circle at 1px 1px, rgba(242,239,228,.07) 1px, transparent 1.5px);background-size:12px 12px}
.led-card .frog{width:100%;height:150px;display:block}
.led-card .txt{padding:16px}
.led-card h3{font-size:1.05rem;margin-bottom:.35rem}
.led-card p{margin:0;font-size:.9rem;color:var(--ink-2)}
.led-dot{
  display:inline-block;width:11px;height:11px;border:2px solid var(--edge);
  border-radius:50%;margin-right:7px;vertical-align:-1px;
}
.led-dot.on{background:var(--green);box-shadow:0 0 8px rgba(35,197,94,.8)}
.led-dot.blink{background:var(--green);box-shadow:0 0 8px rgba(35,197,94,.8);animation:blink 1s steps(1,end) infinite}
.led-dot.off{background:var(--ink-3)}
.led-dot.err{background:var(--amber);box-shadow:0 0 8px rgba(217,131,36,.7)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;border:3px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow-ink-sm);background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:.94rem}
th,td{padding:13px 16px;text-align:left;border-bottom:2px solid var(--line);vertical-align:top}
thead th{
  font-family:var(--pixel);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  background:var(--tint);color:var(--flash);border-bottom:3px solid var(--edge);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
tbody tr:first-child td{background:rgba(35,197,94,.06)}
td.yes{color:var(--green-t);font-weight:700}
td.no{color:var(--ink-2)}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;gap:14px;padding:11px 0;border-bottom:2px solid var(--line);font-size:.95rem}
.spec-list li:last-child{border-bottom:0}
.spec-list b{flex:0 0 42%;font-weight:700}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{
  counter-increment:s;background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-ink-sm);position:relative;
}
.steps li::before{
  content:counter(s);position:absolute;top:-16px;left:20px;
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--green);color:var(--dark);border:3px solid var(--edge);border-radius:50%;
  font-family:var(--display);font-weight:800;font-size:1rem;
}
.steps h3{margin:.5rem 0 .45rem}
.steps p{margin:0;font-size:.94rem;color:var(--ink-2)}

/* ---------- FAQ ---------- */
details.faq{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  margin-bottom:14px;box-shadow:var(--shadow-ink-sm);overflow:hidden;
}
details.faq summary{
  cursor:pointer;padding:17px 22px;font-family:var(--display);font-weight:800;font-size:1.03rem;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;
}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--flash)}
details.faq[open] summary::after{content:"–"}
details.faq summary:hover{background:var(--card-2)}
details.faq .body{padding:0 22px 20px;border-top:2px solid var(--line);padding-top:16px}
details.faq .body p:last-child{margin-bottom:0}

/* ---------- callouts ---------- */
.note{
  border:3px solid var(--edge);border-radius:var(--r);background:var(--tint);
  padding:20px 22px;box-shadow:var(--shadow-ink-sm);
}
.note.warn{background:#2E1F0C;border-color:var(--amber)}
.note h3{margin-bottom:.4rem}
.note p:last-child{margin-bottom:0}

/* ---------- band ----------
   The "pen": a darker strip with a tighter grid, edged in green. */
.band{
  background:#070907;color:var(--ink);border-block:3px solid var(--green);
  background-image:radial-gradient(circle at 1px 1px, rgba(74,222,128,.12) 1px, transparent 1.5px);
  background-size:12px 12px;
}
.band h2,.band h3{color:var(--ink)}
.band .lede,.band p{color:var(--ink-2)}
.band .kicker{color:var(--flash)}
.band .btn{background:var(--green);border-color:var(--edge);box-shadow:6px 6px 0 var(--green-d);color:var(--dark)}
.band .btn.ghost{background:transparent;color:var(--ink);box-shadow:6px 6px 0 #000}
.band .led-card,.band .card{color:var(--ink)}
.band .led-card h3,.band .card h3{color:var(--ink)}
.band .led-card p,.band .card p{color:var(--ink-2)}

/* ---------- buy ---------- */
.buy-grid{display:grid;gap:20px}
@media(min-width:720px){.buy-grid{grid-template-columns:1fr 1fr}}
.buy-card{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;color:var(--ink);
}
.buy-card .region{font-family:var(--pixel);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t)}
.buy-card .amt{font-family:var(--display);font-weight:800;font-size:2.6rem;letter-spacing:-.03em;line-height:1}
.buy-card ul{list-style:none;margin:.6rem 0 1.3rem;padding:0;font-size:.92rem;color:var(--ink-2)}
.buy-card ul li{padding:5px 0 5px 22px;position:relative}
.buy-card ul li::before{content:"";position:absolute;left:0;top:12px;width:9px;height:9px;background:var(--green);border:2px solid var(--edge)}
.buy-card .btn{margin-top:auto;width:100%}

/* ---------- downloads ---------- */
.dl{
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);
  padding:18px 22px;box-shadow:var(--shadow-ink-sm);margin-bottom:14px;
}
.dl .meta{flex:1 1 260px;min-width:0}
.dl .meta h3{font-size:1.05rem;margin-bottom:.2rem}
.dl .meta p{margin:0;font-size:.88rem;color:var(--ink-2)}
.dl .ver{font-family:var(--pixel);font-size:.64rem;letter-spacing:.08em;border:2px solid var(--edge);border-radius:99px;padding:4px 10px;background:var(--tint);color:var(--flash);white-space:nowrap}

/* ---------- footer ---------- */
footer.site{border-top:3px solid var(--edge);background:var(--card);padding-block:44px 32px;margin-top:20px}
.foot-grid{display:grid;gap:28px}
@media(min-width:720px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
footer.site h4{font-family:var(--pixel);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-t);margin:0 0 .9rem}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin-bottom:.5rem}
footer.site a{text-decoration:none;font-size:.93rem}
footer.site a:hover{text-decoration:underline;text-decoration-color:var(--green)}
.legal-strip{margin-top:32px;padding-top:20px;border-top:2px solid var(--line);font-size:.8rem;color:var(--ink-2);line-height:1.6}
.legal-strip p{margin:0 0 .5rem}
.legal-strip p:last-child{margin:0}

/* ---------- misc ---------- */
.frog-inline{width:120px;height:auto;flex:none}
.center{text-align:center}
.center .section-head{margin-inline:auto}
hr.rule{border:0;border-top:3px solid var(--edge-soft);margin:44px 0}
.prose h2{margin:2.2rem 0 .9rem}
.prose h3{margin:1.8rem 0 .6rem}
.prose ul,.prose ol{padding-left:22px;margin:0 0 1.1em}
.prose li{margin-bottom:.45em}
.prose code{font-family:ui-monospace,monospace;font-size:.88em;background:var(--tint);color:var(--flash);padding:2px 6px;border-radius:5px}
.prose a:not(.btn){color:var(--green-t);text-decoration-thickness:2px;text-underline-offset:2px}
.prose pre{color:var(--ink)}

/* ---------- product shot ---------- */
.shot{
  background:var(--card);border:3px solid var(--edge);border-radius:20px;
  box-shadow:var(--shadow-ink);padding:clamp(14px,3vw,30px);margin:0;
  display:flex;align-items:center;justify-content:center;
}
.shot img{
  width:100%;height:auto;display:block;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.55));
}
.shot.sm{border-radius:14px;box-shadow:var(--shadow-ink-sm);padding:10px}
/* screenshots of the panel: flat, no drop shadow under the image */
.panel-shot{padding:clamp(8px,1.6vw,16px);max-width:940px;margin:0 auto}
.panel-shot img{filter:none;border-radius:10px}
.product-grid{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.product-grid{grid-template-columns:1fr 1fr;gap:44px}}
.fact-list{list-style:none;margin:1.4rem 0 0;padding:0}
.fact-list li{
  position:relative;padding:0 0 0 30px;margin-bottom:1rem;font-size:.97rem;color:var(--ink-2);
}
.fact-list li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:12px;
  background:var(--green);border:2px solid var(--edge);
}
.fact-list b{color:var(--ink)}

/* ---------- 3D case viewer ----------
   A stage like the hero's: dark card, pixel-grid floor, green glow
   under the object. The canvas is transparent so the card shows through. */
.case3d{
  position:relative;background:var(--card);border:3px solid var(--edge);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden;margin:0;
  aspect-ratio:1/1;min-height:300px;
  background-image:
    radial-gradient(55% 45% at 50% 64%, rgba(35,197,94,.22), transparent 72%),
    radial-gradient(circle at 1px 1px, rgba(242,239,228,.07) 1px, transparent 1.5px);
  background-size:100% 100%,16px 16px;
  cursor:grab;touch-action:pan-y;
}
.case3d.is-grabbing{cursor:grabbing}
.case3d-canvas{position:absolute;top:0;left:0;width:100%!important;height:100%;display:block;opacity:0;transition:opacity .4s steps(4,end)}
.case3d.is-ready .case3d-canvas{opacity:1}
/* poster: the black unit, pre-rendered, shown until WebGL is up (or forever if it never is) */
.case3d .poster{position:absolute;top:0;left:0;width:100%;height:calc(100% - 46px);object-fit:contain;padding:0;opacity:1;transition:opacity .4s steps(4,end);pointer-events:none}
.case3d.is-ready .poster{opacity:0}
.case3d .hud{
  position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 14px;border-top:3px solid var(--edge);background:rgba(12,14,12,.82);
  font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flash);
  flex-wrap:wrap;
}
.case3d .hud .hint{color:var(--ink-2)}
@media(max-width:520px){.case3d .hud .hint .more{display:none}}
.case3d.is-fallback .hud .hint,.case3d.is-fallback .swatches{display:none}
.case3d .swatches{display:flex;gap:6px;margin:0;padding:0;list-style:none}
.case3d .swatches button{
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  border:2px solid var(--edge-soft);border-radius:99px;padding:5px 11px;background:transparent;color:var(--ink-2);
}
.case3d .swatches button i{width:10px;height:10px;border-radius:50%;border:2px solid var(--edge);display:inline-block}
.case3d .swatches button[data-finish="black"] i{background:#141416}
.case3d .swatches button[data-finish="white"] i{background:#ECE8DC}
.case3d .swatches button[aria-pressed="true"]{border-color:var(--green);color:var(--ink)}
.case3d .swatches button:hover{border-color:var(--ink)}
.case3d .badge{
  position:absolute;top:14px;left:14px;font-family:var(--pixel);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--flash);background:rgba(12,14,12,.8);border:2px solid var(--edge-soft);border-radius:99px;padding:5px 11px;
}

/* ---------- motion ----------
   Blip is content, not decoration: the four LED cards only make sense while
   he is moving, so he keeps animating even when the OS asks for reduced
   motion. Page chrome (scroll, button presses) still follows the OS, and the
   footer toggle turns everything off for anyone who wants that. The spinning
   case follows the same rule: on for everyone, off with the toggle. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .btn{transition:none !important}
}
:root[data-motion="off"] *{
  animation:none !important;
  transition:none !important;
}
:root[data-motion="off"] html{scroll-behavior:auto}

.motion-toggle{
  font-family:var(--pixel);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  border:2px solid var(--edge-soft);border-radius:99px;padding:5px 12px;background:var(--paper);
  color:var(--ink-2);cursor:pointer;margin-top:14px;
}
.motion-toggle:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- home: layout blocks ----------
   One product, one story: hero sells, tiles prove, band shows, then specs and the order. */
section.alt{background:rgba(21,25,21,.55);border-block:1px solid var(--line)}
.split{display:grid;gap:32px;align-items:center}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr;gap:52px}}
.split .shot{margin:0}
.split h2{margin-bottom:.8rem}

.benefits{padding-block:0 clamp(40px,6vw,72px);margin-top:-6px}
.tiles{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media(min-width:600px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{
  background:var(--card);border:3px solid var(--edge);border-radius:var(--r);padding:20px 20px 18px;
  box-shadow:var(--shadow-ink-sm);
}
.tile .px{width:30px;height:30px;display:block;margin-bottom:12px;fill:var(--green);shape-rendering:crispEdges;
  filter:drop-shadow(0 0 6px rgba(35,197,94,.55))}
.tile h3{font-size:1.08rem;margin-bottom:.4rem}
.tile p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55}

.band .steps{margin-top:34px;margin-bottom:46px}
.band .steps li{background:var(--card)}
.led-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 18px}
.led-head h3{font-size:1.25rem}
.led-head p{margin:0;color:var(--ink-2)}

.spec-card{background:var(--card);border:3px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.spec-head{display:flex;justify-content:space-between;gap:10px;padding:10px 20px;background:var(--tint);border-bottom:3px solid var(--edge);
  font-family:var(--pixel);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--flash)}
.spec-card .spec-list{padding:6px 20px 10px}
.spec-card .spec-list li{font-size:.93rem}