/* Stream Deck on Linux — shared stylesheet.
   Steel paper, slate ink, cobalt for anything you can click.
   The colour on this site comes from the keys, not from decoration. */

@font-face{ font-family:"Archivo"; font-style:normal; font-display:swap; font-weight:100 900; font-stretch:62% 125%;
  src:url(fonts/archivo.woff2) format("woff2-variations"), url(fonts/archivo.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:400; src:url(fonts/plex-mono-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-display:swap; font-weight:500; src:url(fonts/plex-mono-500.woff2) format("woff2"); }

:root{
  --paper:   #E8ECEF;
  --panel:   #F6F8F9;
  --white:   #FFFFFF;
  --ink:     #19202B;
  --ink-2:   #3A4553;
  --muted:   #5D6978;
  --rule:    #C8D0D8;
  --rule-2:  #DCE2E7;
  --cobalt:  #2446D8;
  --cobalt-d:#1A34A8;
  --cobalt-t:#DDE4FB;

  --deck:    #23282F;
  --deck-2:  #2C323B;
  --key:     #11151B;

  /* key faces */
  --k-orange:#FF8A3D;
  --k-teal:  #2FBFA2;
  --k-yellow:#F4C542;
  --k-peri:  #7D8BFF;
  --k-pink:  #FF5D73;
  --k-green: #94D45A;
  --k-slate: #3B4553;

  --rail: 1180px;
  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-padding-top:90px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.62;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:var(--cobalt); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--cobalt-d); text-decoration-thickness:2px; }
p{ margin:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--cobalt); outline-offset:2px; }

h1,h2,h3{ margin:0; font-weight:800; line-height:1.04; letter-spacing:-.01em; text-wrap:balance; }
h1{ font-variation-settings:"wdth" 125; font-weight:850; font-size:clamp(40px,6.2vw,78px); letter-spacing:-.025em; }
h2{ font-variation-settings:"wdth" 118; font-size:clamp(28px,3.4vw,42px); letter-spacing:-.018em; }
h3{ font-variation-settings:"wdth" 108; font-size:20px; font-weight:750; line-height:1.2; }
code,pre,kbd{ font-family:var(--mono); }

.rail{ max-width:var(--rail); margin-inline:auto; padding-inline:clamp(16px,4.5vw,40px); }
.skip{ position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:99; }
.skip:focus{ left:8px; }

/* ---------- header ---------- */
.top{ position:sticky; top:0; z-index:50; background:rgba(232,236,239,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); }
.top-in{ display:flex; align-items:center; gap:24px; height:66px; }
.wordmark{ display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; flex:0 0 auto; }
.wordmark:hover{ color:var(--ink); }
.wordmark svg{ width:30px; height:22px; }
.wordmark span{ font-variation-settings:"wdth" 120; font-weight:800; font-size:17px; letter-spacing:-.01em; line-height:1; }
.wordmark small{ display:block; font-weight:500; font-variation-settings:"wdth" 100; font-size:12px; color:var(--muted); letter-spacing:0; margin-top:3px; }
.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{ color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:550; padding:8px 12px; border-radius:6px; }
.nav a:hover{ background:var(--white); color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); box-shadow:inset 0 -2px 0 var(--cobalt); border-radius:0; }
.top .btn{ flex:0 0 auto; }
.burger{ display:none; margin-left:auto; background:none; border:1px solid var(--rule); border-radius:6px; height:40px; padding:0 14px; font:600 14px var(--font); color:var(--ink); cursor:pointer; }
.drawer{ display:none; border-top:1px solid var(--rule); background:var(--panel); }
.drawer.open{ display:block; }
.drawer ul{ list-style:none; margin:0; padding:6px 0 14px; }
.drawer a{ display:block; padding:11px 0; color:var(--ink); text-decoration:none; font-weight:600; border-bottom:1px solid var(--rule-2); }
@media (max-width:1180px){
  .nav,.top .btn{ display:none; }
  .burger{ display:inline-flex; align-items:center; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font:650 15.5px/1 var(--font); text-decoration:none; cursor:pointer;
  padding:14px 20px; border-radius:6px; border:1.5px solid transparent;
  transition:background .15s, border-color .15s, color .15s;
}
.btn svg{ width:17px; height:17px; flex:0 0 auto; }
.btn-main{ background:var(--cobalt); color:#fff; }
.btn-main:hover{ background:var(--cobalt-d); color:#fff; text-decoration:none; }
.btn-line{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:#fff; text-decoration:none; }
.btn-sm{ padding:10px 15px; font-size:14.5px; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* ---------- hero ---------- */
.hero h1{ font-size:clamp(40px,5.4vw,70px); }
.hero{ padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,88px); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }
.hero-lede{ margin-top:24px; font-size:clamp(18px,1.6vw,20.5px); color:var(--ink-2); max-width:44ch; line-height:1.55; }
.hero-note{ margin-top:22px; font-size:14.5px; color:var(--muted); max-width:52ch; }
@media (max-width:920px){ .hero-grid{ grid-template-columns:minmax(0,1fr); } }

/* ---------- the deck (hero centrepiece) ---------- */
.deck-wrap{ justify-self:center; width:100%; max-width:540px; }
.deck{
  background:linear-gradient(180deg,var(--deck-2),var(--deck) 40%);
  border-radius:22px; padding:clamp(16px,2.6vw,26px);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 30px 50px -24px rgba(25,32,43,.55), 0 4px 10px rgba(25,32,43,.18);
}
.keys{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(8px,1.4vw,13px); }
.k{
  aspect-ratio:1; border-radius:12px; border:0; padding:0; cursor:pointer;
  background:var(--key); position:relative; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 3px 0 #0A0D11;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  color:#fff; font:650 clamp(8.5px,1.05vw,11px)/1.1 var(--font); letter-spacing:.01em;
  transition:transform .08s ease, box-shadow .08s ease;
}
.k .face{ position:absolute; inset:5px; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:4px; text-align:center; }
.k svg{ width:42%; height:42%; }
.k:active,.k.pressed{ transform:translateY(2px); box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 1px 0 #0A0D11; }
.k:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.k[data-c="orange"] .face{ background:var(--k-orange); color:#2A1405; }
.k[data-c="teal"]   .face{ background:var(--k-teal); color:#04261F; }
.k[data-c="yellow"] .face{ background:var(--k-yellow); color:#2E2303; }
.k[data-c="peri"]   .face{ background:var(--k-peri); color:#0E1440; }
.k[data-c="pink"]   .face{ background:var(--k-pink); color:#3A0710; }
.k[data-c="green"]  .face{ background:var(--k-green); color:#14260A; }
.k[data-c="slate"]  .face{ background:var(--k-slate); color:#E6EBF1; }
.k[data-c="off"]    .face{ background:#181D24; color:#7F8A99; }
.k.on .face{ box-shadow:0 0 0 2px #fff inset; }

.deck-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; flex-wrap:wrap; }
.pages{ display:flex; gap:6px; }
.pages button{
  font:600 13.5px var(--font); color:var(--ink-2); background:var(--white);
  border:1px solid var(--rule); border-radius:999px; padding:7px 14px; cursor:pointer;
}
.pages button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.deck-status{ font-size:13.5px; color:var(--muted); min-height:1.4em; }

/* ---------- facts strip ---------- */
.facts{ border-block:1px solid var(--rule); background:var(--panel); }
.facts dl{ display:grid; grid-template-columns:repeat(4,1fr); margin:0; }
.facts div{ padding:26px 24px 24px; border-left:1px solid var(--rule); }
.facts div:first-child{ border-left:0; padding-left:0; }
.facts dt{ font-size:14px; color:var(--muted); }
.facts dd{ margin:4px 0 0; font-variation-settings:"wdth" 120; font-weight:800; font-size:clamp(24px,2.6vw,32px); line-height:1.1; }
.facts dd small{ display:block; font-variation-settings:"wdth" 100; font-weight:500; font-size:14px; color:var(--ink-2); margin-top:6px; line-height:1.45; }
@media (max-width:820px){
  .facts dl{ grid-template-columns:1fr 1fr; }
  .facts div{ padding:20px 16px; border-left:0; border-top:1px solid var(--rule); }
  .facts div:nth-child(-n+2){ border-top:0; }
  .facts div:nth-child(odd){ padding-left:0; border-right:1px solid var(--rule); }
}

/* ---------- sections ---------- */
.sec{ padding:clamp(56px,7vw,100px) 0; }
.sec:not(.band):not(.dark) + .sec:not(.band):not(.dark){ padding-top:0; }
.sec.band{ background:var(--panel); border-block:1px solid var(--rule); }
.sec.dark{ background:var(--ink); color:#E7ECF2; }
.sec.dark h2,.sec.dark h3{ color:#fff; }
.sec.dark a{ color:#A9BAFF; }
.head{ max-width:640px; margin-bottom:clamp(28px,3.5vw,46px); }
.head p{ margin-top:14px; color:var(--ink-2); font-size:18px; }
.sec.dark .head p{ color:#B5C0CE; }
.split{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:clamp(28px,5vw,72px); align-items:start; }
@media (max-width:860px){ .split{ grid-template-columns:minmax(0,1fr); } }

/* feature list: two columns, ruled, no boxes */
.flist{ display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(28px,4vw,56px); list-style:none; margin:0; padding:0; }
.flist li{ display:grid; grid-template-columns:44px minmax(0,1fr); gap:16px; padding:24px 0; border-top:1px solid var(--rule); }
.flist .chip{ width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.flist .chip svg{ width:22px; height:22px; stroke-width:1.75; }
.flist p{ margin-top:6px; color:var(--ink-2); font-size:16px; }
@media (max-width:760px){ .flist{ grid-template-columns:1fr; } }
/* one colour for every feature icon: soft cobalt tile, cobalt glyph */
.chip{ background:var(--cobalt-t); color:var(--cobalt-d); box-shadow:inset 0 0 0 1px rgba(36,70,216,.12); }

/* ---------- steps (real sequences only) ---------- */
.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps > li{ counter-increment:s; position:relative; padding:0 0 30px 58px; }
.steps > li::before{
  content:counter(s); position:absolute; left:0; top:-2px;
  width:38px; height:38px; border-radius:9px; background:var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-variation-settings:"wdth" 120; font-weight:800; font-size:17px;
}
.steps > li::after{ content:""; position:absolute; left:18.5px; top:44px; bottom:6px; width:1px; background:var(--rule); }
.steps > li:last-child::after{ display:none; }
.steps h3{ font-size:19px; padding-top:5px; }
.steps p{ margin-top:6px; color:var(--ink-2); }
.sec.dark .steps > li::before{ background:#fff; color:var(--ink); }
.sec.dark .steps > li::after{ background:#3A4553; }
.sec.dark .steps p{ color:#B5C0CE; }

/* ---------- terminal ---------- */
.term{ background:#0F141B; color:#D7E0EA; border-radius:10px; overflow:hidden; border:1px solid #2A323D; margin-top:14px; }
.term-top{ display:flex; justify-content:space-between; align-items:center; padding:9px 12px 9px 16px; background:#18202A; border-bottom:1px solid #2A323D; font-size:13px; color:#93A0B0; }
.copy{ font:600 12.5px var(--font); color:#D7E0EA; background:#27313D; border:1px solid #39454F; border-radius:5px; padding:5px 10px; cursor:pointer; }
.copy:hover{ background:#334050; }
.term pre{ margin:0; padding:16px 18px; overflow-x:auto; font-size:14px; line-height:1.75; }
.term .c{ color:#7C8A9B; }
.term .p{ color:#8FA3FF; user-select:none; }

/* ---------- device diagrams ---------- */
.devs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.dev{ background:var(--white); border:1px solid var(--rule); border-radius:8px; padding:20px; display:flex; flex-direction:column; gap:16px; color:var(--ink); text-decoration:none; }
a.dev:hover{ border-color:var(--ink); color:var(--ink); text-decoration:none; }
.dev-pic{ height:120px; display:flex; align-items:center; justify-content:center; }
.unit{ background:var(--deck); border-radius:9px; padding:8px; display:flex; flex-direction:column; gap:6px; box-shadow:0 10px 18px -12px rgba(25,32,43,.6); }
.ugrid{ display:grid; gap:4px; }
.ugrid i{ display:block; width:var(--ks,14px); height:var(--ks,14px); border-radius:3px; background:#4A5563; }
.ugrid i:nth-child(5n+1),.ugrid i:nth-child(7n+3){ background:#8FA3FF; }
.ustrip{ height:8px; border-radius:2px; background:#5B6676; }
.udials{ display:flex; justify-content:space-around; gap:6px; }
.udials i{ width:16px; height:16px; border-radius:50%; background:#11151B; box-shadow:0 0 0 2px #4A5563; }
.urow{ display:flex; align-items:center; gap:8px; }
.pedal{ display:flex; gap:5px; align-items:flex-end; background:var(--deck); border-radius:10px; padding:8px; }
.pedal i{ width:30px; height:64px; border-radius:6px 6px 3px 3px; background:#3B4553; }
.pedal i:nth-child(2){ width:44px; height:74px; }
.dev h3{ font-size:18px; }
.dev .spec{ font-size:14.5px; color:var(--muted); margin-top:3px; }
.dev .status{ font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin-top:auto; }
.dev .status::before{ content:""; width:8px; height:8px; border-radius:50%; background:#2F9E5E; }
.dev .status.exp::before{ background:#D9962A; }

/* ---------- rows list (distros, docs) ---------- */
.rows{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule); }
.rows a{ display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr) 24px; gap:20px; align-items:baseline; padding:20px 4px; border-bottom:1px solid var(--rule); color:var(--ink); text-decoration:none; }
.rows a:hover{ background:var(--white); }
.rows b{ font-variation-settings:"wdth" 112; font-weight:750; font-size:19px; }
.rows span{ color:var(--ink-2); font-size:16px; }
.rows svg{ width:18px; height:18px; color:var(--cobalt); align-self:center; }
@media (max-width:700px){ .rows a{ grid-template-columns:1fr 20px; } .rows span{ grid-column:1; } .rows svg{ grid-row:1; grid-column:2; } }

/* ---------- inner page masthead ---------- */
.mast{ padding:clamp(34px,5vw,64px) 0 clamp(28px,3.5vw,44px); }
.mast h1{ font-size:clamp(36px,5vw,62px); max-width:18ch; }
.mast p.lede{ margin-top:20px; font-size:clamp(18px,1.5vw,20px); color:var(--ink-2); max-width:58ch; }
.crumbs{ display:flex; flex-wrap:wrap; gap:6px; font-size:14px; color:var(--muted); margin-bottom:20px; }
.crumbs a{ color:var(--ink-2); }
.crumbs span[aria-hidden]{ color:var(--rule); }
.updated{ margin-top:16px; font-size:14px; color:var(--muted); }

/* ---------- long-form text ---------- */
.prose{ max-width:70ch; }
.prose > * + *{ margin-top:16px; }
.prose h2{ font-size:clamp(26px,2.8vw,34px); margin-top:52px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ margin-top:34px; }
.prose ul,.prose ol{ padding-left:22px; }
.prose li + li{ margin-top:8px; }
.prose p,.prose li{ color:var(--ink-2); }
.prose strong{ color:var(--ink); }
.prose code{ font-size:.86em; background:var(--white); border:1px solid var(--rule); padding:1px 6px; border-radius:4px; }
.prose .term pre code{ background:none; border:0; padding:0; font-size:inherit; }
.with-aside{ display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:clamp(32px,5vw,72px); align-items:start; }
.aside{ position:sticky; top:90px; font-size:15px; border-left:2px solid var(--ink); padding-left:18px; }
.aside h2{ font-size:15px; font-variation-settings:"wdth" 100; font-weight:700; letter-spacing:0; }
.aside ul{ list-style:none; padding:0; margin:10px 0 0; }
.aside li{ margin-top:7px; }
.aside a{ color:var(--ink-2); text-decoration:none; }
.aside a:hover,.aside a[aria-current="page"]{ color:var(--cobalt); text-decoration:underline; }
@media (max-width:900px){ .with-aside{ grid-template-columns:minmax(0,1fr); } .aside{ position:static; order:-1; } }

.note{ border-left:4px solid var(--cobalt); background:var(--white); padding:16px 20px; border-radius:0 6px 6px 0; }
.note.warn{ border-left-color:#D9962A; }
.note p{ color:var(--ink-2); }
.note p + p{ margin-top:8px; }
.note b:first-child{ color:var(--ink); }

table.t{ width:100%; border-collapse:collapse; font-size:15.5px; background:var(--white); }
table.t th,table.t td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--rule-2); vertical-align:top; }
table.t th{ font-weight:700; font-size:14px; color:var(--muted); border-bottom:1.5px solid var(--ink); background:var(--panel); }
table.t td:first-child{ font-weight:650; color:var(--ink); }
table.t code{ white-space:nowrap; }
.twrap{ overflow-x:auto; border:1px solid var(--rule); border-radius:8px; }

/* ---------- plugin directory ---------- */
.cats{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px; }
.cats a{ font-size:14.5px; font-weight:600; color:var(--ink); background:var(--white); border:1px solid var(--rule); border-radius:999px; padding:7px 14px; text-decoration:none; }
.cats a:hover{ border-color:var(--ink); }
.pcat{ margin-top:56px; scroll-margin-top:90px; }
.pcat:first-of-type{ margin-top:0; }
.pcat > p{ margin-top:8px; color:var(--ink-2); max-width:62ch; }
.plist{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
.plist li{ border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:18px 18px 16px; background:var(--white); }
.plist a{ font-weight:700; color:var(--ink); text-decoration:none; font-size:16.5px; }
.plist a:hover{ color:var(--cobalt); text-decoration:underline; }
.plist p{ font-size:14.5px; color:var(--ink-2); margin-top:4px; line-height:1.5; }
.plist .by{ font-size:13px; color:var(--muted); margin-top:8px; }
.plist .by.off{ color:var(--cobalt-d); font-weight:600; }

/* ---------- FAQ ---------- */
.faq{ border-top:1.5px solid var(--ink); max-width:860px; }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; align-items:flex-start; padding:20px 0; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary h3{ font-size:19px; font-variation-settings:"wdth" 104; font-weight:700; }
.faq summary::after{ content:"+"; font-weight:400; font-size:28px; line-height:.9; color:var(--cobalt); flex:0 0 auto; width:20px; text-align:center; }
.faq details[open] summary::after{ content:"\2212"; }
.faq summary:hover h3{ color:var(--cobalt-d); }
.faq .a{ padding:0 40px 24px 0; color:var(--ink-2); max-width:72ch; }
.faq .a p + p{ margin-top:10px; }
.faq .a code{ font-size:.86em; background:var(--white); border:1px solid var(--rule); padding:1px 6px; border-radius:4px; }
.faq-group{ margin-top:56px; }
.faq-group:first-child{ margin-top:0; }
.faq-group > h2{ font-size:clamp(22px,2.4vw,28px); margin-bottom:16px; }

/* ---------- download page ---------- */
.tabs{ display:flex; flex-wrap:wrap; gap:0; border-bottom:1.5px solid var(--ink); }
.tabs button{ font:650 15.5px var(--font); background:none; border:0; padding:12px 18px; cursor:pointer; color:var(--ink-2); border-bottom:3px solid transparent; margin-bottom:-1.5px; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--cobalt); }
.tabs button:hover{ color:var(--ink); }
.tabpanel{ padding-top:24px; }
.tabpanel > p{ color:var(--ink-2); max-width:66ch; }
.ver{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:22px; font-size:15px; color:var(--ink-2); }
.ver b{ color:var(--ink); }

/* ---------- closing band ---------- */
.closer{ background:var(--cobalt); color:#fff; }
.closer .rail{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center; padding-block:clamp(44px,5vw,68px); }
.closer h2{ color:#fff; }
.closer p{ color:#DCE3FF; margin-top:10px; max-width:52ch; }
.closer .btn-line{ border-color:#fff; color:#fff; }
.closer .btn-line:hover{ background:#fff; color:var(--cobalt-d); }
.closer .btn-white{ background:#fff; color:var(--cobalt-d); }
.closer .btn-white:hover{ background:var(--cobalt-t); color:var(--cobalt-d); text-decoration:none; }
@media (max-width:760px){ .closer .rail{ grid-template-columns:1fr; } }

/* ---------- footer ---------- */
.foot{ background:var(--ink); color:#B5C0CE; padding:56px 0 40px; font-size:15px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px; }
.foot h2{ font-size:14px; font-variation-settings:"wdth" 100; font-weight:700; color:#fff; letter-spacing:0; margin-bottom:12px; }
.foot ul{ list-style:none; margin:0; padding:0; }
.foot li + li{ margin-top:7px; }
.foot a{ color:#D7DFE9; text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot .wordmark{ color:#fff; }
.foot .wordmark small{ color:#93A0B0; }
.foot .blurb{ margin-top:14px; max-width:34ch; line-height:1.55; }
.legal{ margin-top:44px; padding-top:22px; border-top:1px solid #333D4A; font-size:13.5px; line-height:1.65; color:#93A0B0; max-width:96ch; }
.legal a{ color:#C9D3DF; text-decoration:underline; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid > :first-child{ grid-column:1 / -1; } }

/* ---------- 404 ---------- */
.lost{ padding:clamp(60px,9vw,130px) 0; }
.lost .keys{ max-width:300px; grid-template-columns:repeat(3,1fr); margin-bottom:36px; }
.lost .deck{ display:inline-block; }

@media (max-width:560px){
  body{ font-size:16.5px; }
  .actions .btn{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
@media print{ .top,.foot,.closer,.deck-wrap{ display:none; } body{ background:#fff; } }

/* ---------- product photos ---------- */
.photo{ margin:0; border-radius:14px; overflow:hidden; background:var(--deck); }
.photo img{ width:100%; height:auto; display:block; }
.photo figcaption{ font-size:13.5px; color:var(--muted); padding:10px 2px 0; background:var(--paper); }
.hero-photo{ box-shadow:0 30px 50px -28px rgba(25,32,43,.55); }
.hero-photo img{ aspect-ratio:4/3; object-fit:cover; object-position:50% 70%; }
.banner img{ aspect-ratio:21/8; object-fit:cover; object-position:50% 60%; }
.banner-wrap{ margin-bottom:clamp(36px,4.5vw,60px); }
@media (max-width:700px){ .banner img{ aspect-ratio:16/9; } }

/* real device photos in the model cards */
.dev-pic{ height:140px; }
.dev-pic picture{ display:flex; height:100%; align-items:center; justify-content:center; }
.dev-photo{ max-height:140px; width:auto; max-width:100%; object-fit:contain; border-radius:6px; }
.dev{ gap:10px; min-height:150px; }
.dev h3{ font-size:19px; }
.dev-pic{ height:auto; margin:-4px -4px 6px; }
.dev-pic picture{ display:block; height:auto; }
.dev-photo{ display:block; width:100%; height:auto; max-height:none; aspect-ratio:4/3; object-fit:cover; border-radius:6px; background:#f2f3f5; }
.prose .dev-photo{ border:1px solid var(--rule); }
.plist .pn{ font-weight:700; color:var(--ink); font-size:16.5px; }
.btn svg[fill="currentColor"]{ width:16px; height:16px; }