/* Lockbox: the app's own look. Near-black, ice blue for locked, square edges,
   Departure Mono (a pixel font, used only at multiples of 11px) for display
   and labels, Geist for sentences. Only the fonts are shared with the
   Seeker Studio site. */
@font-face{font-family:"Departure Mono";src:url('../assets/fonts/departure-mono.woff2') format('woff2');font-display:swap}
@font-face{font-family:Geist;src:url('../assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;
  --bg:#0b0d11;--surface:#12151b;--line:#222833;--line-2:#3a4250;
  --ink:#eef1f5;--ink-2:#8a93a1;--ice:#8fb8ff;--amber:#ffb547;--cipher:#1b2738;
  --pixel:"Departure Mono",ui-monospace,Consolas,monospace;--sans:Geist,system-ui,'Segoe UI',sans-serif;
  --pad:clamp(16px,4vw,44px);--wrap:1210px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:66px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
::selection{background:var(--ice);color:var(--bg)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:fixed;top:-100px;left:16px;z-index:50;background:var(--ice);color:var(--bg);padding:10px 14px;font:11px var(--pixel);text-transform:uppercase}
.skip:focus{top:12px}
svg{display:block}

/* Top bar */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:stretch;height:55px;background:rgb(11 13 17 / .92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;padding:0 var(--pad);margin-right:auto;text-decoration:none;font:22px/1 var(--pixel);text-transform:uppercase}
.brand svg{width:24px;height:24px;color:var(--ice)}
.top nav{display:flex;align-items:stretch}
.top nav a{display:flex;align-items:center;padding:0 22px;font:11px var(--pixel);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-left:1px solid var(--line)}
.top nav a:hover{background:var(--surface)}
.top nav .go{background:var(--ink);color:var(--bg);border-left:0}
.top nav .go:hover{background:var(--ice)}

/* Hero */
.hero{position:relative;overflow:hidden;padding:clamp(44px,7vw,99px) 0 clamp(55px,7vw,110px);border-bottom:1px solid var(--line)}
.cipher{position:absolute;inset:0 -8px auto;height:70%;font:11px/14px var(--pixel);color:var(--cipher);word-break:break-all;user-select:none;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .5) 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,rgb(0 0 0 / .5) 45%,transparent 100%)}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(33px,5vw,66px);align-items:center}
.tag{display:flex;align-items:center;gap:9px;font:11px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ice)}
.tag i{width:8px;height:8px;background:currentColor}
h1{margin:22px 0;font:88px/1 var(--pixel);text-transform:uppercase;letter-spacing:-.01em}
.buttons{display:flex;flex-wrap:wrap;gap:11px;margin-top:33px}
.dl{display:flex;align-items:center;gap:14px;min-height:66px;padding:11px 22px 11px 16px;text-decoration:none;border:1px solid var(--line-2);background:var(--surface);transition:background .15s,border-color .15s}
.dl:first-child{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dl svg{width:24px;height:24px;flex:none}
.dl span{display:flex;flex-direction:column;gap:6px;font:11px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase}
.dl small{font:12px/1 var(--sans);letter-spacing:0;text-transform:none;opacity:.7}
.dl:hover{border-color:var(--ice)}
.dl:first-child:hover{background:var(--ice);border-color:var(--ice)}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line)}

/* Sections */
.band{padding:clamp(55px,7vw,99px) 0;border-bottom:1px solid var(--line)}
.label{font:11px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:33px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--bg);padding:33px;counter-increment:step}
.steps svg{width:48px;height:48px;color:var(--ice)}
.steps h3{margin:22px 0 11px;font:22px/1 var(--pixel);text-transform:uppercase}
.steps h3::before{content:"0" counter(step) " ";color:var(--ink-2)}
.steps p{color:var(--ink-2)}


.download{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(33px,5vw,66px);align-items:start}
.sums{margin-top:22px;font-size:14px;color:var(--ink-2)}
.sums a{text-underline-offset:3px}
.notes{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;padding:22px 0;cursor:pointer;list-style:none;font:11px/1 var(--pixel);letter-spacing:.1em;text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:22px/1 var(--pixel);color:var(--ice)}
details[open] summary::after{content:"−"}
details ol,details ul,details p{color:var(--ink-2);margin-bottom:22px}
details ol{list-style:decimal;padding-left:22px}
details ul{list-style:square;padding-left:22px}
details li{margin-bottom:8px;padding-left:4px}
details b{color:var(--ink);font-weight:600}
details a{color:var(--ink);text-underline-offset:3px}

.foot{padding:44px 0 55px;color:var(--ink-2);font-size:15px}
.foot .wrap{display:flex;flex-direction:column;gap:11px}
.foot a{color:var(--ink);text-underline-offset:3px}
.fine{font-size:13px;max-width:70ch}

@media(max-width:1100px){h1{font-size:66px}}
@media(max-width:900px){
  .hero-grid,.download{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
}
@media(max-width:600px){
  h1{font-size:44px}
  .hide-sm{display:none!important}
  .top nav a{padding:0 16px}
  .dl{flex:1 1 100%}
  .steps li{padding:22px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}