/* Site Sure marketing site. One light theme, self-hosted type, and a deep navy ground
   for the hero and the closing call to action. The palette is the proposed product
   brand (ADR 0025); it is separate from any tenant's brand in packages/design and never
   appears inside the product. The design is docs/designs/marketing-site-mockup.html.

   Mobile first. Every base rule is the phone layout, 360 pixels wide and up; the wider
   layouts are added at the end of the file in min-width blocks at 521px, 681px, 801px and
   961px, in that order, and never taken away again with max-width. The breakpoints are in
   pixels, to match the pixel sizes used everywhere else in this file. */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-italic-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/figtree-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plexmono-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plexmono-500-latin.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --bg-2: #edf2f8;
  --surface: #ffffff;
  --ink: #17212c;
  --ink-2: #4f5c6b;
  --ink-3: #7b8796;
  --line: #e4eaf1;
  --line-2: #d3dce7;
  --brand: #2457a6;
  --brand-deep: #163a70;
  --brand-soft: #e8effa;
  --brand-line: #c8d8ef;
  --navy: #0f1f3d;
  --navy-2: #16294d;
  --navy-line: rgba(255, 255, 255, 0.12);
  --navy-ink: #e9eef7;
  --navy-ink-2: #a9b7cc;
  --navy-ink-3: #6f819c;
  --glow: #7fa6e6;
  --pass: #1e6b45;
  --pass-w: #e6f4ec;
  --fail: #b42318;
  --fail-w: #fcebe9;
  --att: #8a5a00;
  --att-w: #fcf1dc;
  --na: #475467;
  --na-w: #eef1f5;
  --r-s: 8px;
  --r: 14px;
  --r-l: 22px;
  --sh-1: 0 1px 2px rgba(23, 33, 44, 0.05), 0 1px 1px rgba(23, 33, 44, 0.03);
  --sh-2: 0 2px 6px rgba(23, 33, 44, 0.04), 0 16px 40px rgba(23, 33, 44, 0.08);
  --sh-3: 0 30px 80px rgba(9, 20, 45, 0.35);
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--brand);
}
h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}
h1,
h2 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h3 {
  font-weight: 600;
  letter-spacing: -0.005em;
}
p {
  margin: 0;
}
button {
  font: inherit;
}
:focus-visible {
  outline: 3px solid rgba(36, 87, 166, 0.35);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--surface);
  padding: 8px 12px;
  border-radius: 8px;
  z-index: 10;
}
.skip:focus {
  left: 8px;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: 18px;
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.93em;
}
.num {
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.muted {
  color: var(--ink-3);
}

/* Buttons and tags */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 10px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
  cursor: pointer;
  min-height: 46px;
  transition: background 120ms ease;
}
.btn:hover {
  background: var(--brand-deep);
  border-color: var(--brand-deep);
}
.btn.quiet {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-2);
}
.btn.quiet:hover {
  background: var(--bg);
}
.on-dark .btn {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
}
.on-dark .btn:hover {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
}
.on-dark .btn.quiet {
  background: transparent;
  color: var(--navy-ink);
  border-color: var(--navy-line);
}
.on-dark .btn.quiet:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.tag.na {
  color: var(--na);
  background: var(--na-w);
}
.tag.pass {
  color: var(--pass);
  background: var(--pass-w);
}
.tag.fail {
  color: var(--fail);
  background: var(--fail-w);
}
.tag.att {
  color: var(--att);
  background: var(--att-w);
}

/* Header. On phones the two buttons go under the wordmark and the menu rather than off
   the edge. Every control in it is at least 44 pixels tall, for a thumb. */
.site-head {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-block: 18px;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--brand);
  display: inline-grid;
  place-items: center;
}
.wordmark i::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 2.5px solid #fff;
  border-radius: 3px;
}
.site-nav {
  display: none;
  gap: 28px;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 500;
}
.site-nav a[aria-current] {
  color: var(--ink);
}
.head-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.head-actions .btn {
  min-height: 44px;
  padding: 9px 11px;
  font-size: 13.5px;
  white-space: nowrap;
}
.on-dark .site-head {
  border-bottom: 1px solid var(--navy-line);
}
.on-dark .wordmark {
  color: #fff;
}
.on-dark .wordmark i {
  background: var(--glow);
}
.on-dark .wordmark i::after {
  border-color: var(--navy);
}
.on-dark .site-nav a {
  color: var(--navy-ink-2);
}
.on-dark .site-nav a[aria-current] {
  color: #fff;
}

/* The phone menu: the site nav's links in a disclosure that needs no script. It shows
   where the nav is hidden and is hidden where the nav shows, so only one "Site" landmark
   is ever on screen. It opens as a panel across the header, one 48 pixel row per link. */
.site-menu {
  margin-left: auto;
}
.site-menu summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.site-menu summary::-webkit-details-marker {
  display: none;
}
.site-menu summary::before {
  content: '';
  width: 16px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.site-menu[open] summary {
  background: var(--bg);
  border-color: var(--brand-line);
}
.site-menu nav {
  position: absolute;
  top: calc(100% - 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
/* A header that is its own wrap keeps the gutter; the panel lines up with the content. */
.wrap.site-head .site-menu nav {
  left: 18px;
  right: 18px;
}
.site-menu nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-weight: 500;
  text-decoration: none;
}
.site-menu nav a:first-child {
  border-top: 0;
}
.site-menu nav a:hover {
  background: var(--bg);
}
.site-menu nav a[aria-current] {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand);
}
.site-menu nav a:focus-visible {
  outline-offset: -3px;
}
.on-dark .site-menu summary {
  background: transparent;
  color: var(--navy-ink);
  border-color: var(--navy-line);
}
.on-dark .site-menu[open] summary {
  background: rgba(255, 255, 255, 0.06);
}
.on-dark .site-menu nav {
  background: var(--navy-2);
  border-color: var(--navy-line);
  box-shadow: var(--sh-3);
}
.on-dark .site-menu nav a {
  color: var(--navy-ink-2);
  border-top-color: var(--navy-line);
}
.on-dark .site-menu nav a:hover {
  background: rgba(255, 255, 255, 0.06);
}
.on-dark .site-menu nav a[aria-current] {
  color: #fff;
  box-shadow: inset 3px 0 0 var(--glow);
}
.on-dark .site-menu :focus-visible {
  outline-color: var(--glow);
}

/* Hero: dark ground, the chain alive on the right */
.hero {
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(127, 166, 230, 0.22), transparent 60%),
    var(--navy);
  color: var(--navy-ink);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-block: 40px 56px;
  align-items: center;
}
.hero-grid > * {
  min-width: 0;
}
.hero .eyebrow {
  color: var(--glow);
}
.hero h1 {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: #fff;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--glow);
}
.hero .lede {
  margin-top: 22px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy-ink-2);
  max-width: 34em;
}
.ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 30px;
}
.ctas small {
  color: var(--navy-ink-3);
  flex-basis: 100%;
  font-size: 13.5px;
}
.proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px solid var(--navy-line);
  font-size: 13.5px;
  color: var(--navy-ink-2);
}
.proofs span::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--glow);
  margin-right: 9px;
  vertical-align: 2px;
}
.chain {
  background: var(--navy-2);
  border: 1px solid var(--navy-line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-3);
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12.5px;
}
.chain header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--navy-line);
  color: var(--navy-ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
}
.chain header .live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  color: var(--navy-ink-2);
}
.chain header .live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.18);
}
.chain ol {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  max-height: 316px;
  overflow: hidden;
}
.chain li {
  min-width: 0;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  padding: 9px 18px;
  color: var(--navy-ink-2);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  animation: chain-in 0.5s ease both;
}
.chain li .seq {
  color: var(--navy-ink-3);
}
.chain li .what {
  min-width: 0;
  color: var(--navy-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chain li .what small {
  color: var(--navy-ink-3);
  margin-left: 8px;
  font-size: inherit;
}
.chain li .hash {
  display: none;
  color: var(--glow);
}
@keyframes chain-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.chain footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--navy-ink-2);
  font-size: 12px;
}
.chain footer b {
  color: #fff;
  font-weight: 500;
}

/* Sections */
.section {
  padding-block: 56px;
}
.section.band {
  background: var(--bg);
}
.section h2 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  margin-block: 10px 14px;
  max-width: 22ch;
}
.section .intro {
  color: var(--ink-2);
  font-size: 18px;
  max-width: 40em;
}

/* One record, three places */
.trio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 44px;
  align-items: start;
}
.trio > * {
  min-width: 0;
}
.trio .cap {
  margin-top: 16px;
}
.trio .cap h3 {
  font-size: 17px;
}
.trio .cap p {
  color: var(--ink-2);
  font-size: 15px;
  margin-top: 6px;
}
.phone {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
  border-radius: 36px;
  background: var(--navy);
  padding: 10px;
  box-shadow: var(--sh-2);
}
/* The illustration's text wraps inside its frame, however narrow the phone it is read on. */
.phone .screen {
  background: var(--bg);
  border-radius: 28px;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: 13px;
}
.phone .status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 18px 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.phone .offline {
  margin: 8px 12px 0;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--att-w);
  color: var(--att);
  font-weight: 600;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.phone .card {
  margin: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}
.phone .card .site {
  font-size: 11px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.phone .card .door {
  font-weight: 700;
  font-size: 16px;
  margin-top: 4px;
}
.phone .scan {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--pass-w);
  color: var(--pass);
  font-size: 12px;
  font-weight: 600;
}
.phone .scan i {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background:
    linear-gradient(var(--pass) 0 0) 3px 3px / 7px 7px no-repeat,
    linear-gradient(var(--pass) 0 0) 16px 3px / 7px 7px no-repeat,
    linear-gradient(var(--pass) 0 0) 3px 16px / 7px 7px no-repeat,
    linear-gradient(var(--pass) 0 0) 16px 16px / 4px 4px no-repeat,
    #fff;
  border: 1px solid rgba(30, 107, 69, 0.3);
}
.phone .outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.phone .outcomes span {
  padding: 11px 8px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--ink-2);
}
.phone .outcomes span.sel {
  background: var(--na-w);
  border-color: var(--na);
  color: var(--na);
}
.phone .outcomes span.wide {
  grid-column: 1 / -1;
}
.phone .save {
  margin: 0 12px 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  text-align: center;
  font-weight: 600;
}
.desk {
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-2);
  font-size: 13px;
}
.desk .bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink-3);
}
.desk .bar b {
  color: var(--ink);
}
.desk .bar .cur {
  color: var(--brand);
  font-weight: 600;
}
.desk .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 18px 10px;
  gap: 12px;
}
.desk .head h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
}
.desk .head span {
  color: var(--ink-3);
  font-size: 12px;
}
.desk table {
  width: 100%;
  border-collapse: collapse;
}
.desk th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  font-weight: 600;
  padding: 8px 18px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.desk td {
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.desk tr:last-child td {
  border-bottom: 0;
}
.desk td .sub {
  color: var(--ink-3);
  font-size: 12px;
}
.desk .meter {
  height: 6px;
  width: 100px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.desk .meter i {
  display: block;
  height: 100%;
  background: var(--pass);
}
.desk .meter i.att {
  background: var(--att);
}
.desk .meter i.fail {
  background: var(--fail);
}
.desk .hide-s {
  display: none;
}
.desk .due {
  font-family: var(--mono);
  font-size: 12px;
  white-space: nowrap;
}
.desk .due.soon {
  color: var(--att);
}
.desk .due.over {
  color: var(--fail);
}
.bundle {
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--sh-2);
  padding: 20px;
  font-size: 13px;
}
.bundle .stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--pass-w);
  color: var(--pass);
  font-weight: 600;
  font-size: 12px;
}
.bundle h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 20px;
  margin-top: 14px;
  line-height: 1.2;
}
.bundle dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  margin: 16px 0 0;
  font-size: 12.5px;
}
.bundle dt {
  color: var(--ink-3);
}
.bundle dd {
  margin: 0;
  overflow-wrap: anywhere;
}
.bundle .verify {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: 12.5px;
}

/* One door, one year */
.year {
  margin-top: 40px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.year ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(180px, 1fr));
  min-width: 900px;
  position: relative;
}
.year ol::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: var(--brand-line);
}
.year li {
  padding-right: 18px;
  position: relative;
}
.year li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand);
}
.year li.final::before {
  background: var(--brand);
}
.year .when {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-3);
}
.year h3 {
  font-size: 16px;
  margin-top: 6px;
}
.year p {
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 6px;
}
.year .tag {
  margin-top: 8px;
}

/* The night before, and the morning after */
.ba {
  margin-top: 36px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.ba .row {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--line);
}
.ba .row:last-child {
  border-bottom: 0;
}
.ba .row > div {
  padding: 20px 22px;
  font-size: 15px;
}
.ba .row > div:first-child {
  color: var(--ink-2);
  background: var(--bg);
  border-right: 0;
  border-bottom: 1px dashed var(--line-2);
}
.ba .row.head > div {
  padding-block: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ba .row.head > div:last-child {
  display: none;
  color: var(--brand);
}

/* Someone asks */
.audit {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: start;
}
.audit .ask {
  margin-top: 26px;
  display: grid;
  gap: 10px;
}
.audit .ask button {
  text-align: left;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 15px;
  color: var(--ink);
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
}
.audit .ask button:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
}
.audit .ask button[aria-pressed='true'] {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.audit .ask button small {
  display: block;
  color: var(--ink-3);
  font-size: 13px;
}
.audit .ask button .who {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--brand);
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  flex: none;
}
.console {
  background: var(--navy);
  color: var(--navy-ink);
  border-radius: var(--r-l);
  padding: 22px;
  font-family: var(--mono);
  font-size: 13px;
  min-height: 330px;
  box-shadow: var(--sh-3);
}
.console .t {
  color: var(--navy-ink-3);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.console ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.console li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  color: var(--navy-ink-3);
}
.console li i::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy-ink-3);
  margin-top: 6px;
  opacity: 0.4;
}
.console li.done {
  color: var(--navy-ink);
}
.console li.done i::before {
  background: #4ade80;
  opacity: 1;
}
.console li.busy i::before {
  background: var(--glow);
  opacity: 1;
  animation: pulse 0.9s infinite alternate;
}
@keyframes pulse {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
.console li b {
  font-weight: 500;
  color: var(--glow);
}
.console .out {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--navy-line);
  color: var(--navy-ink-2);
}
.console .out[hidden] {
  display: none;
}
.console .out b {
  color: #fff;
  font-weight: 500;
}
.console .fine {
  margin-top: 12px;
  font-size: 11.5px;
  color: var(--navy-ink-3);
  font-family: var(--sans);
}

/* Pricing */
.price {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
}
.ticks {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15px;
}
.ticks li::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  margin-right: 12px;
  vertical-align: 2px;
}
.calc {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: 26px;
  box-shadow: var(--sh-2);
}
.calc label {
  display: flex;
  justify-content: space-between;
  font-weight: 600;
  font-size: 15px;
}
.calc label output {
  font-family: var(--mono);
  font-weight: 500;
}
.calc input[type='range'] {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  accent-color: var(--brand);
}
.calc .totals {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}
.calc .totals div {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg);
}
.calc .totals small {
  display: block;
  color: var(--ink-3);
  font-size: 12px;
}
.calc .totals .n {
  font-family: var(--display);
  font-size: 30px;
  line-height: 1.1;
  margin-top: 4px;
}
.calc .totals .n sup {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-3);
  margin-left: 4px;
  vertical-align: super;
}
.calc .fine {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Security row */
.trust {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 32px;
  margin-top: 36px;
}
.trust h3 {
  font-size: 16px;
}
.trust p {
  color: var(--ink-2);
  font-size: 14.5px;
  margin-top: 6px;
}
.trust .k {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--brand);
  letter-spacing: 0.06em;
}

/* Closing call to action */
.cta-final {
  background: var(--navy);
  color: var(--navy-ink);
}
.cta-final .wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: center;
}
.cta-final .eyebrow {
  color: var(--glow);
}
.cta-final h2 {
  color: #fff;
}
.cta-final p {
  color: var(--navy-ink-2);
  margin-top: 10px;
  max-width: 32em;
}

/* Prose pages */
.prose {
  max-width: 70ch;
  padding-block: 56px 80px;
}
.prose h1 {
  font-size: clamp(34px, 4vw, 48px);
  margin-top: 12px;
}
.prose .lede {
  font-size: 18px;
  color: var(--ink-2);
  margin-block: 18px 36px;
  line-height: 1.6;
}
.prose h2 {
  font-size: 28px;
  margin-block: 40px 12px;
}
.prose p {
  color: var(--ink-2);
  margin-bottom: 14px;
}
.prose ul {
  color: var(--ink-2);
  padding-left: 22px;
  margin: 0 0 14px;
}
.prose li + li {
  margin-top: 6px;
}
.claims {
  width: 100%;
  border-collapse: collapse;
  margin-block: 8px 40px;
  font-size: 15px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  overflow: hidden;
}
.claims th,
.claims td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.claims th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  background: var(--bg);
  font-weight: 600;
}
.claims tr:last-child td {
  border-bottom: 0;
}
.claims td:first-child {
  font-weight: 600;
}
.claims td:last-child {
  color: var(--ink-2);
}
.log {
  display: grid;
  gap: 22px;
  margin-top: 8px;
}
.log > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.log > div > span {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  padding-top: 3px;
}
.log h2 {
  font-size: 20px;
  margin: 0 0 6px;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* Contact form */
.contact {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  padding-block: 56px 80px;
  align-items: start;
}
.contact h1 {
  font-size: clamp(34px, 4vw, 48px);
  margin-top: 12px;
}
.contact .lede {
  font-size: 18px;
  color: var(--ink-2);
  margin-block: 18px 24px;
  line-height: 1.6;
}
.assure {
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
  margin-top: 28px;
}
.assure div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.assure svg {
  flex: 0 0 auto;
  color: var(--brand);
  margin-top: 3px;
}
.panel {
  background: var(--surface);
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
  padding: 26px 20px;
  display: grid;
  gap: 18px;
}
.panel h2 {
  font-size: 26px;
}
.panel[hidden] {
  display: none;
}
.field {
  display: grid;
  gap: 6px;
}
.field label,
.field legend {
  font-weight: 600;
  font-size: 14px;
  padding: 0;
}
.field input,
.field textarea {
  font: inherit;
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  min-height: 46px;
  width: 100%;
  box-shadow: var(--sh-1);
}
.field textarea {
  min-height: 110px;
  resize: vertical;
}
.field .hint {
  color: var(--ink-3);
  font-size: 13px;
}
fieldset.field {
  border: 0;
  margin: 0;
  padding: 0;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  background: var(--surface);
  overflow: hidden;
}
/* The unseen input covers its chip, so the whole chip is the thing a thumb presses. */
.chips input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.chips label:has(input:checked) {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-deep);
  font-weight: 600;
}
.chips label:has(input:focus-visible) {
  outline: 3px solid rgba(36, 87, 166, 0.35);
  outline-offset: 2px;
}
.form-note {
  color: var(--ink-3);
  font-size: 13.5px;
}
.status {
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 14.5px;
}
.status.ok {
  background: var(--pass-w);
  color: var(--pass);
}
.status.bad {
  background: var(--fail-w);
  color: var(--fail);
}
.status[hidden] {
  display: none;
}
.email-card {
  display: grid;
  gap: 14px;
}
.email-card .address {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--brand-deep);
  word-break: break-all;
}
.email-card ol {
  margin: 0;
  padding-left: 22px;
  color: var(--ink-2);
  display: grid;
  gap: 6px;
}

/* Footer */
.site-foot {
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 14.5px;
}
.site-foot .wrap {
  padding-block: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
}
/* On phones each footer link is a 44 pixel row a thumb can press; the rows sit flush. */
.site-foot nav {
  display: flex;
  gap: 0 20px;
  flex-wrap: wrap;
}
.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  text-decoration: none;
}
.site-foot.on-dark {
  background: var(--navy);
  color: var(--navy-ink-3);
  border-top: 1px solid var(--navy-line);
}
.site-foot.on-dark a {
  color: var(--navy-ink-2);
}

/* Wider layouts, added upward from the phone layout above. */

/* Large phones and up: the header buttons, the audit chain's hashes, the portfolio's
   extra columns and the pricing totals get room of their own. */
@media (min-width: 521px) {
  .head-actions {
    gap: 10px;
  }
  .head-actions .btn {
    padding-inline: 14px;
    font-size: 14px;
  }
  .trust {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .chain li {
    grid-template-columns: 58px 1fr auto;
  }
  .chain li .hash {
    display: block;
  }
  .desk .hide-s {
    display: table-cell;
  }
  .calc .totals {
    grid-template-columns: 1fr 1fr;
  }
}

/* Small tablets and up: the before and after table goes side by side. */
@media (min-width: 681px) {
  .ba .row {
    grid-template-columns: 1fr 1fr;
  }
  .ba .row > div:first-child {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }
  .ba .row.head > div:last-child {
    display: block;
  }
}

/* Tablets in landscape and desktops: two-column sections and the full header nav. */
@media (min-width: 801px) {
  .wrap {
    padding-inline: 24px;
  }
  .site-head {
    flex-wrap: nowrap;
    row-gap: 16px;
  }
  .site-nav {
    display: flex;
  }
  .site-menu {
    display: none;
  }
  .head-actions .btn {
    padding-inline: 18px;
    font-size: 15.5px;
    white-space: normal;
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px;
    padding-block: 72px 88px;
  }
  .section {
    padding-block: 88px;
  }
  .audit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .cta-final .wrap {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .log > div {
    grid-template-columns: 110px 1fr;
    gap: 16px;
  }
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .panel {
    padding: 32px;
  }
  /* The phone tap heights give way to the desktop look from here up. */
  .site-foot nav {
    gap: 20px;
  }
  .site-foot a {
    display: inline;
    min-height: auto;
  }
  .email-card .address {
    display: block;
    min-height: auto;
  }
  .chips label,
  .calc input[type='range'] {
    min-height: auto;
  }
}

/* Desktops: one record, three places, in a row, and pricing beside its calculator. Below
   this the calculator's column is too narrow for its two totals, which pushed the page
   sideways, so pricing stays stacked until here. */
@media (min-width: 961px) {
  .trio {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 0.8fr);
  }
  .price {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }
}