@font-face {
  font-family: 'Young Serif';
  src: url('fonts/young-serif.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('fonts/schibsted-grotesk.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plexmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f3eee3;
  --paper-2: #e9e2d1;
  --ink: #16153a;
  --ink-2: #4b4a68;
  --rule: rgba(22, 21, 58, 0.16);
  --rule-strong: rgba(22, 21, 58, 0.34);
  --blip: #e8890c;
  --band: #16153a;
  --band-ink: #f3eee3;
  --band-muted: #b9b6d2;
  --grain: 0.07;

  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Schibsted Grotesk', 'Segoe UI', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0e0d24;
    --paper-2: #181745;
    --ink: #f1ece0;
    --ink-2: #aeabc8;
    --rule: rgba(241, 236, 224, 0.15);
    --rule-strong: rgba(241, 236, 224, 0.36);
    --blip: #f2a03a;
    --band: #1b1a4a;
    --band-ink: #f1ece0;
    --band-muted: #b2afcc;
    --grain: 0.04;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

/* Paper grain, drawn inline so no extra file is requested. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: var(--grain);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--blip);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

/* Header */
.top {
  padding: 22px 0 0;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.lockup img {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.lockup-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.lockup-name {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.1px;
}

.lockup-by {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.6px;
  color: var(--ink-2);
  margin-top: 4px;
}

.top nav {
  display: flex;
  gap: 26px;
}

.top nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  background-image: linear-gradient(var(--blip), var(--blip));
  background-size: 0 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}

.top nav a:hover,
.top nav a:focus-visible {
  background-size: 100% 2px;
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding-top: 56px;
  padding-bottom: 72px;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 22px;
}

h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.5px;
  margin: 0 0 26px;
}

.mark {
  background-image: linear-gradient(var(--blip), var(--blip));
  background-size: 100% 0.13em;
  background-position: 0 94%;
  background-repeat: no-repeat;
}

.lede {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
  margin: 0 0 32px;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-bottom: 38px;
}

.soon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 22px;
  border-radius: 999px;
}

.soon i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blip);
  box-shadow: 0 0 0 0 var(--blip);
  animation: ping 2.4s ease-out infinite;
}

.text-link {
  font-weight: 600;
  font-size: 15px;
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

.text-link:hover {
  text-decoration-color: var(--blip);
}

.reminder {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 380px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 15px 18px;
  box-shadow: 0 1px 0 var(--rule), 0 14px 30px -18px rgba(22, 21, 58, 0.45);
  transform: rotate(-1.2deg);
}

.reminder .initial {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1e8a5b;
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
}

.reminder p {
  margin: 0;
}

.r-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.4px;
}

.r-title {
  font-weight: 700;
  font-size: 15.5px;
  margin-top: 2px !important;
}

.r-body {
  font-size: 14.5px;
  color: var(--ink-2);
}

/* Radar */
.radar {
  margin: 0;
}

.radar svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.radar .ring {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.radar .ring.dash {
  stroke-dasharray: 2 5;
}

.radar .axis {
  stroke: var(--rule);
  stroke-width: 1;
}

.radar .ticks {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 6;
  stroke-dasharray: 1.2 19.325;
}

.radar .scale {
  font-family: var(--mono);
  font-size: 11px;
  fill: var(--ink-2);
}

.radar .sweep {
  transform-origin: 220px 220px;
  animation: sweep 10s linear infinite;
}

.radar .sweep-line {
  stroke: var(--blip);
  stroke-width: 1.5;
}

.radar .wedge-a {
  stop-color: var(--ink);
  stop-opacity: 0.2;
}

.radar .wedge-b {
  stop-color: var(--ink);
  stop-opacity: 0;
}

.radar .dot {
  fill: var(--ink);
}

.radar .dot.hot {
  fill: var(--blip);
}

.radar .dot.trial {
  fill: var(--paper);
  stroke: var(--blip);
  stroke-width: 2;
}

.radar .halo {
  fill: none;
  stroke: var(--blip);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: halo 2.6s ease-out infinite;
}

.radar .name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  fill: var(--ink);
}

.radar .when {
  font-family: var(--mono);
  font-size: 11.5px;
  fill: var(--ink-2);
}

.radar figcaption {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.2px;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 14px auto 0;
  text-align: center;
}

/* Sections */
section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.2px;
  margin: 0;
}

.kicker {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 14px;
}

.how {
  padding-top: 24px;
  padding-bottom: 88px;
}

.how-head {
  margin-bottom: 36px;
}

.how-head h2 {
  max-width: 20ch;
}

.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1.5px solid var(--ink);
}

.ledger li {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.25s ease;
}

.ledger li:hover {
  background: linear-gradient(90deg, transparent, var(--paper-2) 12%, var(--paper-2) 88%, transparent);
}

.ledger .no {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink-2);
  padding-top: 8px;
}

.ledger h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  line-height: 1.2;
  margin: 0;
}

.ledger p {
  margin: 0;
  color: var(--ink-2);
  padding-top: 3px;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-bottom: 96px;
}

.facts div {
  padding: 4px 32px;
  border-left: 1px solid var(--rule-strong);
}

.facts div:first-child {
  padding-left: 0;
  border-left: 0;
}

.facts h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  margin: 0 0 8px;
}

.facts p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
}

/* Privacy band */
.band {
  position: relative;
  background: var(--band);
  color: var(--band-ink);
  overflow: hidden;
  padding: 92px 0;
}

.band::before {
  content: '';
  position: absolute;
  right: -180px;
  top: 50%;
  width: 760px;
  height: 760px;
  margin-top: -380px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(243, 238, 227, 0.1) 62px 63px);
  pointer-events: none;
}

.band .wrap {
  position: relative;
}

.band .kicker {
  color: var(--band-muted);
}

.band h2 {
  max-width: 14ch;
  margin-bottom: 40px;
}

.nos {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  max-width: 620px;
}

.nos li {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.2;
  padding: 16px 0;
  border-top: 1px solid rgba(243, 238, 227, 0.22);
}

.nos li:last-child {
  border-bottom: 1px solid rgba(243, 238, 227, 0.22);
}

.band p {
  max-width: 52ch;
  color: var(--band-muted);
  margin: 0 0 22px;
}

.band .text-link {
  color: var(--band-ink);
  text-decoration-color: var(--blip);
}

/* Payment */
.pay {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  padding-top: 96px;
  padding-bottom: 40px;
}

.pay > div:last-child {
  padding-top: 36px;
}

.pay p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

.pay ul {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  border-top: 1.5px solid var(--ink);
}

.pay li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}

.pay li::before {
  content: '+';
  font-family: var(--mono);
  color: var(--blip);
  font-weight: 500;
}

/* Footer */
.foot {
  margin-top: 72px;
  border-top: 1px solid var(--rule);
  padding: 32px 0 48px;
}

.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
}

.foot nav {
  display: flex;
  gap: 22px;
  font-size: 15px;
}

.foot nav a {
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
}

.copy {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

/* Privacy policy page */
.doc {
  max-width: 760px;
  padding-top: 56px;
  padding-bottom: 24px;
}

.doc h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin-bottom: 12px;
}

.doc .meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 30px;
}

.doc h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  margin: 40px 0 10px;
}

.doc p,
.doc li {
  color: var(--ink-2);
}

.doc p strong,
.doc li strong {
  color: var(--ink);
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin: 8px 0;
}

.doc a {
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.doc code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 5px;
}

.doc .note {
  background: var(--paper-2);
  border-left: 3px solid var(--blip);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  margin: 0 0 8px;
  color: var(--ink);
}

/* Motion */
.rise {
  animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes sweep {
  to {
    transform: rotate(360deg);
  }
}

@keyframes halo {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(4.2);
  }
}

@keyframes ping {
  70% {
    box-shadow: 0 0 0 9px rgba(232, 137, 12, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(232, 137, 12, 0);
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Smaller screens */
@media (max-width: 880px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 40px;
  }

  .lede {
    max-width: 38ch;
  }

  .ledger li {
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 6px 14px;
  }

  .ledger li p {
    grid-column: 2;
  }

  .facts {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .facts div,
  .facts div:first-child {
    padding: 0 0 0 18px;
    border-left: 2px solid var(--rule-strong);
  }

  .pay {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pay > div:last-child {
    padding-top: 0;
  }

  .band {
    padding: 72px 0;
  }

  .band::before {
    right: -420px;
  }
}

@media (max-width: 520px) {
  body {
    font-size: 16.5px;
  }

  .wrap {
    padding: 0 20px;
  }

  .top nav {
    gap: 16px;
  }

  .top nav a:first-child {
    display: none;
  }

  .lockup-name {
    font-size: 20px;
  }

  .lede {
    font-size: 18.5px;
  }

  .reminder {
    transform: none;
  }

  .radar .name {
    font-size: 16px;
  }

  .radar .when {
    font-size: 13.5px;
  }

  .radar .scale {
    font-size: 12.5px;
  }
}

.copy a {
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s ease;
}

.copy a:hover,
.copy a:focus-visible {
  text-decoration-color: var(--blip);
}

/* Background: slow sonar ripples and the odd blip. Decorative only, behind all content. */
.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.top,
main,
.foot {
  position: relative;
  z-index: 1;
}

.bg .ping {
  position: absolute;
  right: 0;
  top: 0;
  width: 240vmax;
  height: 240vmax;
  margin: -120vmax -120vmax 0 0;
  border: 1px solid var(--ink);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.02);
  will-change: transform, opacity;
  animation: ripple 18s linear infinite;
  animation-delay: calc(var(--d) * 1s);
}

.bg .ping:nth-child(even) {
  border-style: dashed;
}

.bg .blip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--blip);
  opacity: 0;
  animation: blip 12s ease-in-out infinite;
  animation-delay: calc(var(--d) * 1s);
}

@keyframes ripple {
  0% {
    transform: scale(0.02);
    opacity: 0;
  }
  8% {
    opacity: 0.22;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes blip {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
  10% {
    opacity: 0.5;
    transform: scale(1);
  }
  28% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media print {
  .bg {
    display: none;
  }
}