/* ============================================================
   Blipfrog — site styles
   Palette locked to the mascot: paper, ink, signal green, sand.
   Everything snaps. Hard shadows, no blur, no soft gradients.
   ============================================================ */

:root{
  --paper:#F4F2E8;  --card:#FFFDF7;  --ink:#1E1E1E;   --ink-2:#57544B;
  --green:#23C55E;  --green-d:#15913F; --flash:#4ADE80;
  --sand:#EFD9A5;   --amber:#D98324;  --grey:#B9B6AB;  --line:#DCD6C4;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --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:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;line-height:1.05;margin:0;letter-spacing:-.02em}
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-d); 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(--ink);color:var(--paper);padding:10px 16px;border-radius:8px}

header.site{
  position:sticky;top:0;z-index:50;background:var(--paper);
  border-bottom:3px solid var(--ink);
}
.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}
.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(--sand);color:var(--ink)}
nav.main a[aria-current="page"]{color:var(--ink);background:var(--sand)}
@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(--ink);background:var(--green);color:var(--ink);
  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(--ink)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--ink)}
.btn.ghost{background:var(--card)}
.btn.sm{font-size:.9rem;padding:11px 18px;box-shadow:var(--shadow-sm)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ---------- cards ---------- */
.card{
  background:var(--card);border:3px solid var(--ink);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-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-d);
  display:block;margin-bottom:.7rem;
}

/* ---------- hero ---------- */
.hero{padding-block:clamp(28px,5vw,56px) clamp(40px,6vw,72px)}
.hero-grid{display:grid;gap:28px;align-items:center}
@media(min-width:860px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:40px}}
.hero h1{margin-bottom:1rem;max-width:13ch}
.hero h1 .hl{color:var(--green-d)}
.hero .lede{max-width:46ch}
.hero-stage{
  position:relative;background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:var(--shadow);padding:16px 16px 0;overflow:hidden;
}
.hero-stage .frog{width:100%;height:auto;max-height:400px;display:block;margin-block:-14px -6px}
.stage-floor{
  border-top:3px solid var(--ink);margin:0 -16px;padding:10px 16px;background:var(--sand);
  font-family:var(--pixel);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  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(--line);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(--ink);border-radius:99px;padding:6px 11px;background:var(--card);
}

/* ---------- 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(--ink);border-radius:var(--r);
  box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;
}
.led-card .pen{background:var(--paper);border-bottom:3px solid var(--ink);padding:8px}
.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(--ink);
  border-radius:50%;margin-right:7px;vertical-align:-1px;
}
.led-dot.on{background:var(--green)}
.led-dot.blink{background:var(--green);animation:blink 1s steps(1,end) infinite}
.led-dot.off{background:var(--grey)}
.led-dot.err{background:var(--amber)}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}

/* ---------- table ---------- */
.table-scroll{overflow-x:auto;border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--shadow-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(--sand);border-bottom:3px solid var(--ink);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.yes{color:var(--green-d);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(--ink);border-radius:var(--r);
  padding:24px;box-shadow:var(--shadow-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);border:3px solid var(--ink);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(--ink);border-radius:var(--r);
  margin-bottom:14px;box-shadow:var(--shadow-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(--green-d)}
details.faq[open] summary::after{content:"–"}
details.faq summary:hover{background:var(--sand)}
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(--ink);border-radius:var(--r);background:var(--sand);
  padding:20px 22px;box-shadow:var(--shadow-sm);
}
.note.warn{background:#F8E3C8}
.note h3{margin-bottom:.4rem}
.note p:last-child{margin-bottom:0}

/* ---------- band ---------- */
.band{background:var(--ink);color:var(--paper);border-block:3px solid var(--ink)}
.band h2,.band h3{color:var(--paper)}
.band .lede,.band p{color:#CFCBBE}
.band .kicker{color:var(--flash)}
.band .btn{background:var(--green);border-color:var(--paper);box-shadow:6px 6px 0 var(--green-d);color:var(--ink)}
.band .btn.ghost{background:transparent;color:var(--paper)}
/* light cards sitting inside a dark band keep their own ink */
.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(--ink);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-d)}
.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(--ink)}
.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(--ink);border-radius:var(--r);
  padding:18px 22px;box-shadow:var(--shadow-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(--ink);border-radius:99px;padding:4px 10px;background:var(--sand);white-space:nowrap}

/* ---------- footer ---------- */
footer.site{border-top:3px solid var(--ink);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(--ink-2);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}
.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(--ink);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(--sand);padding:2px 6px;border-radius:5px}
.prose a{color:var(--green-d);text-decoration-thickness:2px;text-underline-offset:2px}

/* ---------- product shot ---------- */
.shot{
  background:var(--card);border:3px solid var(--ink);border-radius:20px;
  box-shadow:var(--shadow);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(30,30,30,.14));
}
.shot.sm{border-radius:14px;box-shadow:var(--shadow-sm);padding: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(--ink);
}
.fact-list b{color:var(--ink)}

/* ---------- 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. */
@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(--line);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)}