/* PFS.100 landing page. Plain CSS, no build step, no external requests (system fonts only). */
:root {
  --void: #080c0e;
  --panel: #10191a;
  --line: #526665;
  --orange: #cc6933;
  --amber: #e6ad61;
  --cyan: #8cc8c1;
  --paper: #e5e4d8;
  --dim: #9aa7a1;
  --warn: #d77b68;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font: 16px/1.65 var(--mono);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}
/* CRT scanlines over everything; purely decorative. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.16) 2px 3px);
  z-index: 50;
}
/* Slow phosphor scan band sweeping bottom to top; purely decorative. */
body::before {
  content: "";
  position: fixed;
  left: 0; right: 0; top: 0;
  height: 22vh;
  pointer-events: none;
  z-index: 49;
  background: linear-gradient(to bottom, rgba(140,200,193,.30) 0, rgba(140,200,193,.10) 3px, rgba(140,200,193,.04) 40%, rgba(140,200,193,0) 100%);
  transform: translateY(100vh);
  animation: scan 11s linear infinite;
  will-change: transform;
}
@keyframes scan { from { transform: translateY(100vh) } to { transform: translateY(-22vh) } }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover, a:focus-visible { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.wrap { width: min(1080px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--amber); color: #000; padding: 8px 12px; z-index: 100; }
.skip:focus { left: 8px; }

header.site { padding: 18px 0; border-bottom: 1px solid rgba(82,102,101,.5); }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; font-weight: 700; letter-spacing: .12em; }
.brand img { width: 40px; height: 40px; border-radius: 9px; }
nav a { margin-left: 20px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

.hero { padding: 64px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.eyebrow { color: var(--amber); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; margin: 0 0 14px; }
h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.12; margin: 0 0 20px; font-weight: 700; letter-spacing: .02em; }
.type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: .6em solid var(--cyan); max-width: 100%;
  animation: typing 2.4s steps(26, end) .3s both, caret .9s step-end 6; }
@keyframes typing { from { width: 0 } to { width: 100% } }
@keyframes caret { 50% { border-color: transparent } }
.lede { font-size: 18px; color: var(--paper); max-width: 34em; margin: 0 0 28px; }
.badge { display: inline-block; border: 1px solid var(--line); padding: 14px 20px; color: var(--dim); letter-spacing: .1em; font-size: 14px; text-transform: uppercase; }
.badge strong { color: var(--paper); display: block; font-size: 16px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-block; padding: 14px 22px; border: 1px solid var(--cyan); color: var(--cyan); text-decoration: none; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; background: rgba(140,200,193,.06); }
.btn:hover, .btn:focus-visible { background: var(--cyan); color: #000; }

.plate { background: var(--orange); aspect-ratio: 1 / 1; border-radius: 6px; padding: 0; overflow: hidden; box-shadow: 0 0 0 1px #000 inset, 0 30px 60px rgba(0,0,0,.5); }
.plate img { display: block; width: 100%; height: 100%; object-fit: cover; }

section { padding: 56px 0; border-top: 1px solid rgba(82,102,101,.35); }
h2 { font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--amber); margin: 0 0 28px; font-weight: 700; }
h2::before { content: "// "; color: var(--line); }
h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.card { background: var(--panel); border-left: 3px solid var(--orange); padding: 20px 20px 22px; }
.card p { margin: 0; color: var(--paper); font-size: 15px; }

.phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; align-items: start; }
figure { margin: 0; }
.phone { aspect-ratio: 540 / 1212; border: 3px solid #2b3638; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 24px 50px rgba(0,0,0,.55); max-width: 270px; margin-inline: auto; }
.phone video, .phone img { width: 100%; height: 100%; display: block; object-fit: cover; }
figcaption { max-width: 270px; margin: 14px auto 0; font-size: 14px; color: var(--dim); }
figcaption strong { display: block; color: var(--paper); letter-spacing: .1em; text-transform: uppercase; font-size: 13px; margin-bottom: 4px; }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.notice { border: 1px solid var(--warn); color: var(--paper); padding: 14px 18px; background: rgba(215,123,104,.08); font-size: 14px; margin-top: 24px; }
.notice strong { color: var(--warn); letter-spacing: .1em; }
ul.plain { padding-left: 1.1em; margin: 0; }
ul.plain li { margin: 6px 0; }

footer { padding: 40px 0 60px; border-top: 1px solid rgba(82,102,101,.5); color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }

/* Privacy policy */
.doc { max-width: 760px; padding: 48px 0 20px; overflow-wrap: anywhere; }
.doc h1 { font-size: clamp(26px, 4vw, 38px); }
.doc h2 { margin-top: 44px; }
.doc p, .doc li { font-size: 15.5px; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border: 1px solid rgba(82,102,101,.6); }
.doc th { color: var(--cyan); letter-spacing: .08em; text-transform: uppercase; font-size: 12.5px; background: var(--panel); }
.meta { color: var(--dim); font-size: 14px; }
.summary { border-left: 3px solid var(--cyan); background: var(--panel); padding: 16px 20px; margin: 24px 0; }

/* Headings typed out once, when they scroll into view (scroll-triggered animations: an ordinary
   time-based animation started by a view() timeline trigger). One character per step; sibling
   headings get staggered delays so they type one after another. Browsers without timeline-trigger
   support simply show the headings. */
@supports (timeline-trigger-name: --t) {
  .scrawl { width: fit-content; max-width: 100%;
    trigger-scope: --t;
    timeline-trigger: --t view() contain / cover;
    animation: scrawl calc(var(--n) * 45ms) steps(var(--n), end) both;
    animation-trigger: --t play-forwards; }
  .cards .card h3.scrawl { animation-delay: .3s; }
  .cards .card:nth-child(2) h3.scrawl { animation-delay: .8s; }
  .cards .card:nth-child(3) h3.scrawl { animation-delay: 1.3s; }
  .cards .card:nth-child(4) h3.scrawl { animation-delay: 1.8s; }
  .two > div:nth-child(2) h2.scrawl { animation-delay: 1.3s; }
}
@keyframes scrawl { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0 0 0 0) } }

@media (max-width: 800px) {
  .hero .wrap, .two { grid-template-columns: 1fr; }
  .plate { max-width: 360px; }
  nav a:first-child { margin-left: 0; }
  .doc table, .doc thead, .doc tbody, .doc tr, .doc th, .doc td { display: block; }
  .doc thead { display: none; }
  .doc td:first-child { background: var(--panel); color: var(--cyan); font-weight: 700; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .type { animation: none; border-right: 0; }
  .scrawl { animation: none; }
  body::before { animation: none; display: none; }
}