/* Parafa — one stylesheet for both language versions. Taken from SilentKey-web; the colors
   are the app icon's blue.

   No web font, on purpose. A page about an app that holds your signing key should have the
   narrowest possible Content-Security-Policy, and `font-src 'self'` means either
   hosting a font or having none. The system font is what people read all day on
   Apple and on Windows alike — and it saves two hundred kilobytes that would be
   downloaded from elsewhere. Hierarchy comes from size, weight and space, not
   from an exotic typeface. (The one exception is the 1.5 kB self-hosted subset for
   the zavrel.net badge in the footer — see there.) */

:root {
  color-scheme: light dark;

  --ground: #f4f6fb;
  --surface: #ffffff;
  --sunk: #e9edf6;
  --ink: #121a2e;
  --muted: #536079;
  --faint: #838da3;
  --accent: #1f5fe0;
  --accent-ink: #ffffff;
  --accent-soft: rgba(31, 95, 224, 0.10);
  --flag: #96470f;
  --rule: rgba(18, 26, 46, 0.12);
  --rule-firm: rgba(18, 26, 46, 0.26);
  --shadow: 0 1px 2px rgba(18, 26, 46, .06), 0 12px 32px rgba(18, 26, 46, .08);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1080px;
  --text: 34rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1020;
    --surface: #131a2e;
    --sunk: #0e1426;
    --ink: #e4e9f5;
    --muted: #9aa6c0;
    --faint: #6e7a95;
    --accent: #7aa7ff;
    --accent-ink: #0a1430;
    --accent-soft: rgba(122, 167, 255, 0.13);
    --flag: #e2954f;
    --rule: rgba(228, 233, 245, 0.13);
    --rule-firm: rgba(228, 233, 245, 0.28);
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 44px rgba(0, 0, 0, .34);
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

a { color: var(--accent); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
a.visually-hidden:focus {
  position: fixed; top: 10px; left: 10px; width: auto; height: auto;
  clip: auto; padding: 10px 14px; background: var(--surface);
  border: 1px solid var(--rule-firm); border-radius: 8px; z-index: 20;
}

/* ---------------------------------------------------------------- nav bar */

.nav {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--ground) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--rule); }

.nav__inner { display: flex; align-items: center; gap: 18px; height: 62px; }

.nav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 16.5px; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none;
}
.nav__brand img { width: 28px; height: 28px; border-radius: 7px; }

.nav__links { display: flex; gap: 20px; margin-left: auto; }
.nav__links a {
  color: var(--muted); text-decoration: none; font-size: 15px;
}
.nav__links a:hover { color: var(--ink); }

.lang { display: flex; gap: 8px; align-items: center; font: 500 12px/1 var(--mono); }
.lang span { color: var(--ink); }
.lang a { color: var(--faint); text-decoration: none; }
.lang a:hover { color: var(--accent); }

@media (max-width: 820px) {
  .nav__links { display: none; }
  .lang { margin-left: auto; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px;
  font: 600 15.5px/1 var(--sans); text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 17px; height: 17px; }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

.btn--ghost { border-color: var(--rule-firm); color: var(--ink); }
.btn--ghost:hover { background: var(--accent-soft); border-color: var(--accent); }

.btn--sm { padding: 8px 14px; font-size: 14px; border-radius: 9px; }

/* -------------------------------------------------------------------- hero */

.hero { padding: 84px 0 68px; }
.hero .wrap { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--rule-firm);
  font: 500 12.5px/1 var(--mono); color: var(--muted);
  letter-spacing: .01em;
}
.badge__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

h1 {
  margin: 0; max-width: 15ch;
  font: 700 clamp(38px, 6.4vw, 66px)/1.03 var(--sans);
  letter-spacing: -.032em; text-wrap: balance;
}

.lead { margin: 0; max-width: var(--text); font-size: 19.5px; color: var(--muted); }

.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 6px; }
.hero__note { margin: 0; font-size: 14px; color: var(--faint); max-width: var(--text); }
/* The app icon above the badge — the one picture of the app the page has until the
   screenshots come from the app (README, "Screenshots"). Full-bleed square, so the corners
   are rounded here, at the iOS ratio. */
.hero__icon { width: 96px; height: 96px; border-radius: 22.4%; box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- section */

.section { padding: 68px 0; border-top: 1px solid var(--rule); }
.section--tint { background: var(--sunk); }

.section__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 34px; }
.eyebrow {
  margin: 0; font: 600 11.5px/1 var(--mono);
  letter-spacing: .17em; text-transform: uppercase; color: var(--accent);
}
h2 {
  margin: 0; max-width: 20ch;
  font: 700 clamp(27px, 3.6vw, 38px)/1.12 var(--sans);
  letter-spacing: -.024em; text-wrap: balance;
}
h3 { margin: 0; font: 600 17.5px/1.3 var(--sans); letter-spacing: -.01em; }
.section__head p { margin: 0; max-width: var(--text); color: var(--muted); font-size: 18px; }

/* -------------------------------------------------------------- two halves */

.halves { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 16px; padding: 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card__mark {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.card__mark svg { width: 19px; height: 19px; }

.plus {
  display: grid; place-items: center; font: 600 22px/1 var(--mono); color: var(--faint);
}

/* ------------------------------------------------------------------- steps */

.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card__n {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 9px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink);
  font: 700 12px/1 var(--mono); vertical-align: 2px;
}

/* -------------------------------------------------------------------- grid */

.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

/* ------------------------------------------------------------------- figure */

.figure {
  border: 1px solid var(--rule); border-radius: 18px; background: var(--surface);
  padding: 26px; box-shadow: var(--shadow); overflow: hidden;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin: 16px 0 0; font-size: 14.5px; color: var(--faint); text-align: center;
}

.figure img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* Two screenshots side by side under the feature grid. */
.shots {
  display: grid; gap: 16px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: start;
}
.figure--half { padding: 18px; }

/* -------------------------------------------------------------------- list */

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 16.5px; }
.checks svg { width: 19px; height: 19px; color: var(--accent); flex: none; margin-top: 2px; }
.checks b { color: var(--ink); font-weight: 600; }

/* -------------------------------------------------------------------- table */

.table { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th {
  font: 600 11.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); background: var(--sunk); white-space: nowrap;
}
td b { font-weight: 600; }
/* On a phone the column heads wrap rather than push the table into a sideways scroll. */
@media (max-width: 600px) { th { white-space: normal; } th, td { padding: 11px 12px; } }
.tag {
  display: inline-block; font: 600 11.5px/1 var(--mono);
  padding: 5px 8px; border-radius: 5px; border: 1px solid var(--rule-firm); color: var(--muted);
  white-space: nowrap;
}
.tag--now { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------------ page text */

.prose { max-width: var(--text); display: flex; flex-direction: column; gap: 16px; }
.prose h2 { margin-top: 22px; }
.prose h3 { margin-top: 14px; }
.prose p, .prose li { color: var(--muted); }
.prose ul { margin: 0; padding-left: 1.15em; display: flex; flex-direction: column; gap: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  font: 400 .9em var(--mono); background: var(--sunk);
  border: 1px solid var(--rule); border-radius: 5px; padding: 1px 5px;
}
.prose .updated { font: 500 13px/1 var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------ guide */

/* The certificate guide: a contents box, numbered steps, a callout for the traps, and the
   provider's own guide under each part. */
.toc { margin: 0 0 30px; padding: 16px 22px; max-width: var(--text);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; }
.toc ol { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.prose--guide { max-width: 40rem; }
.prose--guide h2 { scroll-margin-top: 80px; padding-top: 18px; border-top: 1px solid var(--rule); }
.prose--guide h3 { scroll-margin-top: 80px; margin-top: 20px; }
.prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 9px; }
.prose ol li::marker { color: var(--accent); font-weight: 700; }
.callout { background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.callout p { margin: 0; }
.prose .source { font-size: 14px; color: var(--faint); }
/* Marks the provider's and the OS's side for claims.py; no box of its own. */
.provider-side { display: contents; }

/* ------------------------------------------------------------------- footer */

.foot { border-top: 1px solid var(--rule); padding: 40px 0 56px; color: var(--faint); font-size: 14.5px; }
.foot .wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot__spacer { margin-left: auto; }

/* ------------------------------------------------------- powered by zavrel.net */

/* The badge every one of Jan's sites carries at the right end of its footer, linking to
   the hub. Taken as it is from zavrel.net/docs/powered-by.md (the pill, approved
   11 October 2026): it inherits the footer's text color, so it fits light and dark as it
   is. Everything is scoped under .zv; the mark is inline SVG.

   The one font on the site, and it does not break the rule at the top: it is self-hosted
   (assets/fonts/, OFL), so `font-src 'self'` stays as narrow as it was, and it is only the
   nine glyphs of "zavrel.net" at weight 800 — 1.5 kB (tools/subset-zv-font.sh). Any other
   letter falls back to the system's bold. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("/assets/fonts/bricolage-grotesque-zavrelnet-800.woff2?v=02748ad5") format("woff2");
  unicode-range: U+002E, U+0061, U+0065, U+006C, U+006E, U+0072, U+0074, U+0076, U+007A; }

.zv { --zv-blue: #3f7cff; --zv-amber: #f0a020; --zv-coral: #e5533f;
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px;
  color: inherit; text-decoration: none; font-size: 12.5px; line-height: 1; white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: color-mix(in srgb, currentColor 4%, transparent);
  transition: background .3s; }
.zv::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; opacity: 0; transition: opacity .35s;
  background: linear-gradient(90deg, var(--zv-blue), var(--zv-amber), var(--zv-coral));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.zv:hover::before, .zv:focus-visible::before { opacity: 1; }
.zv:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.zv svg { flex: none; width: 20px; height: 20px; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.zv:hover svg { transform: rotate(-10deg) scale(1.08); }
.zv-by { opacity: .62; }
.zv-word { font: 800 13.5px/1 "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.015em; }
.zv-word span { background: linear-gradient(90deg, var(--zv-blue), var(--zv-amber) 55%, var(--zv-coral)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zv:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .zv, .zv *, .zv::before { transition: none; } }
/* The footer's link color and its accent on hover would otherwise win over .zv — the badge
   takes the footer's text color, not its links'. */
.foot .zv, .foot .zv:hover { color: inherit; }

/* --------------------------------------------------------------------- form */

/* The contact form (Netlify Forms), after putovka.app's. */
.form {
  max-width: 640px; display: grid; gap: 18px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
  box-shadow: var(--shadow); padding: clamp(20px, 4vw, 32px);
}
.form label, .form legend { display: grid; gap: 7px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.form label { align-content: start; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form input[type="email"], .form select, .form textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); background: var(--ground);
  border: 1px solid var(--rule-firm); border-radius: 11px; padding: 11px 13px; width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.form textarea { resize: vertical; min-height: 128px; }
.form textarea::placeholder { color: var(--faint); }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.form__hint { font-size: 13px; font-weight: 400; color: var(--faint); }
.form__devices { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.form__devices legend { margin-bottom: 9px; }
.form__check { display: inline-flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important;
  font-weight: 400 !important; color: var(--muted) !important; }
.form__check input { width: 17px; height: 17px; accent-color: var(--accent); }
.form .btn { justify-self: start; }
.form__note { margin: 0; font-size: 13.5px; color: var(--faint); }
/* The honeypot: out of sight, out of the tab order. */
.form__bot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------- hero video (as on putovka.app) */

/* Under the hero's text, 16:9, as wide as the column allows; the attributes hold its place.
   Drawn only once the video exists (tools/pfsite.py, docs/hero-video.md). */
.promo { margin: clamp(20px, 4vw, 40px) 0 0; width: 100%; max-width: 960px; align-self: center; }
/* The frame clips the video's corners: Safari's video layer ignored the radius before the first
   play and left gray square corners (Putovka, 25 October 2026); isolation makes it clip. */
.promo__frame {
  position: relative; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: #0b1020; box-shadow: 0 28px 70px rgba(10, 20, 48, .35);
}
.promo__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #0b1020; }
/* Our own play button over the poster until the first play (site.js), instead of the browser's
   controls with their gray veil. */
.promo__play {
  position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(16, 36, 96, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35); transition: transform .2s ease, background .2s ease;
}
.promo__play[hidden] { display: none; }
.promo__play svg { width: 40px; height: 40px; margin-left: 4px; fill: currentColor; }
.promo__play:hover { transform: scale(1.06); background: rgba(16, 36, 96, .7); }
.promo__play:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (max-width: 700px) { .promo__play { width: 64px; height: 64px; } .promo__play svg { width: 30px; height: 30px; } }
.promo figcaption { margin-top: 12px; text-align: center; font-size: 14.5px; color: var(--faint); }

/* ------------------------------------------------------------------- reveal */

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}