/* protektor.cloud: the PROTEKT brand board's palette and type, self-hosted
   fonts (OFL, LICENSE-THIRD-PARTY.md). Night Slate, Bone, Copper. */
@font-face{font-family:Michroma;src:url(/fonts/michroma-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Newsreader;src:url(/fonts/newsreader-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Newsreader;src:url(/fonts/newsreader-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Newsreader;src:url(/fonts/newsreader-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --slate:#10151d; --slate-2:#151b25; --line:#222c3b; --line-2:#26303f;
  --bone:#ede9e1; --mist:#94a5be; --steel:#8ca0bc; --copper:#b87b4b; --copper-hi:#c98d5c;
  --gutter:clamp(16px,4.5vw,56px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--slate);color:var(--bone);font:400 16px/1.6 Archivo,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--copper);color:var(--slate)}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
em{font-style:italic;color:var(--copper)}

/* the wordmark: Michroma, uppercase, 0.08em, the R mirrored (brand board 01) */
.wordmark{font-family:Michroma,sans-serif;font-size:14px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:var(--bone)}
.wordmark .r{display:inline-block;transform:scaleX(-1);margin-left:-.12em}
.wordmark.small{font-size:11px}

.eyebrow,.tag,.step,.nav nav a,.trio span,.fact{font-family:"JetBrains Mono",monospace;font-weight:500;text-transform:uppercase}
.eyebrow{margin:0;font-size:12px;letter-spacing:.42em;color:var(--copper)}

.btn{display:inline-block;padding:15px 32px;font-size:15px;font-weight:600;border:1px solid transparent;transition:background .15s,border-color .15s}
.btn-solid{background:var(--copper);color:var(--slate)}
.btn-solid:hover{background:var(--copper-hi)}
.btn-line{border-color:#3a4658;color:var(--bone);font-weight:500}
.btn-line:hover{border-color:var(--steel)}
.btn-small{padding:9px 20px;font-size:12px;letter-spacing:.08em}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gutter);border-bottom:1px solid var(--line);background:rgba(16,21,29,.92);backdrop-filter:blur(12px)}
.nav nav{display:flex;gap:32px}
.nav nav a{font-size:11px;letter-spacing:.16em;color:var(--steel)}
.nav nav a:hover{color:var(--bone)}

.hero{background:linear-gradient(180deg,var(--slate-2) 0%,var(--slate) 78%);overflow:hidden}
.hero .wrap{padding-top:clamp(64px,10vw,118px)}
h1,h2,.big{font-family:Newsreader,Georgia,serif;font-weight:400;text-wrap:balance}
h1{margin:28px 0 0;max-width:820px;font-size:clamp(44px,7vw,80px);line-height:1.08;letter-spacing:-.005em}
.lede{margin:30px 0 0;max-width:580px;font-size:clamp(17px,1.6vw,20px);line-height:1.6;color:var(--mist);text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}
.skyline{display:block;width:100%;margin-top:72px}

.band{border-top:1px solid var(--line)}
.band>.wrap{padding-top:clamp(72px,9vw,110px);padding-bottom:clamp(72px,9vw,110px)}
h2{margin:22px 0 0;max-width:720px;font-size:clamp(30px,3.6vw,44px);line-height:1.18}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:64px;background:var(--line-2);border:1px solid var(--line-2)}
.tiles article{background:var(--slate-2);padding:36px 28px 44px}
.tag{margin:0;font-size:10.5px;letter-spacing:.24em;color:var(--copper)}
h3{margin:16px 0 0;font-size:19px;font-weight:600;line-height:1.3}
.tiles p:not(.tag),.steps li>p:not(.step),.facts p:not(.fact){margin:12px 0 0;font-size:15px;line-height:1.65;color:var(--mist);text-wrap:pretty}

.statement{background:var(--slate-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.statement .wrap{padding-top:96px;padding-bottom:96px}
.big{margin:0 auto;max-width:820px;font-size:clamp(28px,3.2vw,38px);line-height:1.3}
.trio{display:flex;max-width:640px;margin:28px auto 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.trio span{flex:1;padding:16px 8px;font-size:11px;letter-spacing:.24em}
.trio span+span{border-left:1px solid var(--line-2)}

.steps{list-style:none;margin:48px 0 0;padding:0}
.steps li{display:grid;grid-template-columns:180px 1fr 1.2fr;gap:40px;align-items:baseline;padding:44px 0;border-top:1px solid var(--line-2)}
.steps li:last-child{border-bottom:1px solid var(--line-2)}
.step{margin:0;font-size:13px;letter-spacing:.3em;color:var(--steel)}
.steps h3{margin:0;font-family:Newsreader,Georgia,serif;font-weight:400;font-size:30px;line-height:1.2}
.steps li>p:not(.step){margin:0}

.facts{border-top:1px solid var(--line);background:var(--slate-2)}
.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:72px;padding-bottom:72px}
.fact{margin:0;font-size:12px;letter-spacing:.2em;color:var(--bone)}

.download .note{margin:18px 0 0;color:var(--mist)}
.platforms{display:grid;grid-template-columns:repeat(2,minmax(0,360px));gap:16px;margin-top:40px}
.platform{display:flex;flex-direction:column;gap:6px;padding:28px;border:1px solid var(--line-2);background:var(--slate-2);transition:border-color .15s}
.platform:hover{border-color:var(--copper)}
.platform.mine{border-color:var(--copper)}
.platform .os{font-family:Newsreader,Georgia,serif;font-size:28px}
.platform .detail{font-size:14px;color:var(--mist)}
.platform .go{margin-top:14px;align-self:flex-start;padding:10px 20px;background:var(--copper);color:var(--slate);font-weight:600;font-size:14px}
.platform.unavailable{opacity:.55;pointer-events:none}
.verify{margin-top:32px;max-width:760px;color:var(--mist);font-size:14px}
.verify summary{cursor:pointer;color:var(--steel)}
.verify dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:12px 0 0}
.verify dt{color:var(--bone)}
.verify dd{margin:0;font-family:"JetBrains Mono",monospace;font-size:12px;overflow-wrap:anywhere}

.cta{border-top:1px solid var(--line);background:linear-gradient(180deg,var(--slate) 0%,var(--slate-2) 100%);text-align:center}
.cta .wrap{padding-top:clamp(80px,10vw,120px);padding-bottom:clamp(80px,10vw,130px)}
.cta h2{margin:0 auto;font-size:clamp(34px,4.4vw,52px);line-height:1.15}
.cta p{margin:22px auto 36px;max-width:480px;color:var(--mist);font-size:16.5px}

.foot{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:baseline;padding:26px var(--gutter);border-top:1px solid var(--line)}
.legal{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;color:#5d6c82;text-transform:uppercase}

@media (max-width:960px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .steps li{grid-template-columns:1fr;gap:12px}
  .facts-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:640px){
  .nav nav{display:none}
  .tiles{grid-template-columns:1fr}
  .platforms{grid-template-columns:1fr}
  .trio span{font-size:9.5px;letter-spacing:.14em}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}