/* KalmPass site. Printed-page feel: white paper, dark ink, one blue. */

:root {
  --paper: #ffffff;
  --paper-tint: #f7f8f9;
  --ink: #14181f;
  --ink-soft: #4b5563;
  --ink-faint: #7c8694;
  --rule: #e2e6ea;
  --rule-strong: #c9d0d8;
  --blue: #1b5fc4;
  --blue-tint: #eef3fc;
  --green: #0c7d69;

  /* Georgia is on effectively every machine, and it stops the page looking
     like every other developer-tool landing page. No web fonts: the CSP
     forbids outside origins, and a password manager should not be fetching
     anything from a third party anyway. */
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.18;
}
h1 {
  font-size: clamp(33px, 5.2vw, 50px);
}
h2 {
  font-size: clamp(24px, 3vw, 31px);
}
h3 {
  font-size: 19px;
}

p {
  margin: 0;
}
a {
  color: var(--blue);
  text-underline-offset: 2px;
}

.wrap {
  width: min(1000px, 100% - 44px);
  margin-inline: auto;
}
.narrow {
  max-width: 34em;
}

.soft {
  color: var(--ink-soft);
}
.faint {
  color: var(--ink-faint);
  font-size: 14.5px;
}

/* --- masthead ------------------------------------------------------------ */

.masthead {
  border-bottom: 1px solid var(--rule);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
/* The wordmark is set in the same monospace as the Recovery Key, the key
   chips and the code samples. That is the texture of the product, and it sets
   the name apart from the Georgia used for headings. */
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.035em;
}
.wordmark img {
  border-radius: 7px;
}
.masthead nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 15px;
}
.masthead nav a {
  color: var(--ink-soft);
  text-decoration: none;
}
.masthead nav a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* The nav link rule above out-specifies .btn, so buttons need it spelled out. */
.masthead nav a.btn-solid,
.masthead nav a.btn-solid:hover {
  color: #fff;
  text-decoration: none;
}
.masthead nav a.btn-line,
.masthead nav a.btn-line:hover {
  color: var(--ink);
  text-decoration: none;
}

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

.btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
}
.btn-solid {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}
.btn-solid:hover {
  background: #17539f;
}
.btn-line {
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn-line:hover {
  border-color: var(--ink-faint);
}
.btn-small {
  padding: 8px 15px;
  font-size: 14.5px;
}

/* --- opening ------------------------------------------------------------- */

.opening {
  padding: 74px 0 60px;
  border-bottom: 1px solid var(--rule);
}
.opening h1 {
  max-width: 13ch;
}
.opening .lede {
  margin-top: 22px;
  max-width: 34em;
  font-size: 19px;
  color: var(--ink-soft);
}
.opening .actions {
  margin-top: 30px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.opening .footnote {
  margin-top: 16px;
}

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

.band {
  padding: 62px 0;
  border-bottom: 1px solid var(--rule);
}
.band.tint {
  background: var(--paper-tint);
}
.band > .wrap > h2 {
  max-width: 20ch;
}
.band .intro {
  margin-top: 14px;
  max-width: 34em;
  color: var(--ink-soft);
}

/* --- the two-key explainer ----------------------------------------------- */

.keypath {
  margin-top: 34px;
  display: grid;
  gap: 0;
  max-width: 44em;
}
.keypath > div {
  display: grid;
  grid-template-columns: 13em 1fr;
  gap: 24px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  align-items: baseline;
}
.keypath > div:last-child {
  border-bottom: 1px solid var(--rule);
}
.keypath dt {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.keypath dt b {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.keypath dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15.5px;
}
.keypath .held {
  color: var(--green);
}

/* --- feature list, not a card grid --------------------------------------- */

.features {
  margin-top: 34px;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  column-gap: 52px;
}
.features section {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.features h3 {
  margin-bottom: 6px;
}
.features p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* --- pricing ------------------------------------------------------------- */

.tiers {
  margin-top: 34px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  max-width: 46em;
}
.tier h3 {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tier .amount {
  margin: 6px 0 18px;
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
}
.tier .amount small {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-faint);
}
.tier ul {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 15.5px;
  color: var(--ink-soft);
}
.tier li {
  padding: 7px 0;
  border-top: 1px solid var(--rule);
}
.tier li:last-child {
  border-bottom: 1px solid var(--rule);
}
.tier li[data-off] {
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: var(--rule-strong);
}

/* --- questions ----------------------------------------------------------- */

.qa {
  margin-top: 30px;
  max-width: 36em;
}
.qa > div {
  padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.qa > div:last-child {
  border-bottom: 1px solid var(--rule);
}
.qa h3 {
  font-size: 17.5px;
  margin-bottom: 8px;
}
.qa p {
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* --- documents (security, terms, privacy) -------------------------------- */

.doc {
  width: min(680px, 100% - 44px);
  margin-inline: auto;
  padding: 52px 0 88px;
}
.doc h1 {
  font-size: clamp(30px, 4.4vw, 42px);
}
.doc > * + * {
  margin-top: 20px;
}
.doc h2 {
  margin-top: 46px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 25px;
}
.doc h3 {
  margin-top: 30px;
}
.doc p,
.doc li {
  color: var(--ink-soft);
}
.doc ul,
.doc ol {
  margin: 0;
  padding-left: 22px;
}
.doc li {
  padding: 4px 0;
}
.doc code {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.doc th,
.doc td {
  text-align: left;
  padding: 12px 14px 12px 0;
  border-top: 1px solid var(--rule);
  vertical-align: top;
}
.doc th {
  width: 12em;
  color: var(--ink);
  font-weight: 600;
}
.doc td {
  color: var(--ink-soft);
}

.note {
  background: var(--paper-tint);
  border-left: 2px solid var(--blue);
  padding: 18px 20px;
}
.note strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}
.note.caution {
  border-left-color: #b8791d;
}

/* --- colophon ------------------------------------------------------------ */

.colophon {
  padding: 30px 0 52px;
  font-size: 14.5px;
  color: var(--ink-faint);
}
.colophon .wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}
.colophon nav {
  display: flex;
  gap: 20px;
  margin-left: auto;
}
.colophon a {
  color: var(--ink-soft);
  text-decoration: none;
}
.colophon a:hover {
  text-decoration: underline;
}

/* --- narrow -------------------------------------------------------------- */

@media (max-width: 720px) {
  body {
    font-size: 16.5px;
  }
  .masthead nav a:not(.btn) {
    display: none;
  }
  .opening {
    padding: 48px 0 42px;
  }
  .band {
    padding: 46px 0;
  }
  .keypath > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .features {
    column-gap: 0;
  }
  .doc th {
    width: auto;
  }
  .doc table,
  .doc thead,
  .doc tbody,
  .doc tr,
  .doc th,
  .doc td {
    display: block;
  }
  .doc td {
    border-top: none;
    padding-top: 0;
  }
}

.mt-14 { margin-top: 14px; }

.notfound {
  min-height: 70vh;
  align-content: center;
  justify-items: start;
}
.notfound-mark {
  border-radius: 16px;
}