/* Relay Mail — built on the Nocturne Design System (v1.1)
   Night #1a202c · Indigo-600 #5a67d8 · Off-white #e2e8f0 · Inter / Inter Display */

@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --night: #1a202c;
  --night-deep: #141924;
  --panel: rgba(26, 32, 44, 0.8);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.2);
  --indigo: #5a67d8;
  --indigo-hover: #4c51bf;
  --indigo-soft: #a3bffa;
  --focus: #4299e1;
  --green: #38a169;
  --red: #9b2c2c;
  --red-text: #feb2b2;
  --white: #ffffff;
  --text: #e2e8f0;
  --muted: #a0aec0;
  --ease: 180ms cubic-bezier(.2, .7, .3, 1);
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  background-image:
    radial-gradient(60rem 36rem at 85% -10%, rgba(90, 103, 216, 0.16), transparent 70%),
    radial-gradient(40rem 30rem at -10% 40%, rgba(66, 153, 225, 0.06), transparent 70%);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "calt";
}

img, svg { display: block; max-width: 100%; }
a { color: var(--indigo-soft); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--white); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 48rem) { .wrap { padding: 0 2rem; } }

.skip { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--night); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { color: var(--white); margin: 0; }
h1, h2 { font-weight: 700; letter-spacing: -0.025em; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem); line-height: 1.06; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); line-height: 1.15; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; }
p { margin: 0; }
.lede { font-size: 1.1875rem; color: var(--text); max-width: 36em; }
.muted { color: var(--muted); }
.measure { max-width: 38em; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--white); text-decoration: none; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--white); }
.brand svg { width: 1.75rem; height: 1.75rem; }
.brand small { font-weight: 400; color: var(--muted); font-size: .8125rem; margin-left: .125rem; }
.nav { display: flex; align-items: center; gap: .25rem; }
.nav a { color: var(--text); text-decoration: none; font-size: .9375rem; padding: .5rem .75rem; border-radius: .5rem; transition: background var(--ease), color var(--ease); }
.nav a:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
.nav a[aria-current="page"] { color: var(--white); background: rgba(255, 255, 255, .06); }
.nav .nav-signin { border: 1px solid var(--line-strong); margin-left: .5rem; }
.nav .hide-sm { display: none; }
@media (min-width: 44rem) { .nav .hide-sm { display: inline-block; } }
@media (max-width: 30rem) { .brand small { display: none; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font: inherit; font-weight: 600; font-size: 1rem; line-height: 1; padding: .875rem 1.25rem; border-radius: .625rem; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--ease), border-color var(--ease), transform var(--ease); }
.btn-primary { background: var(--indigo); color: var(--white); }
.btn-primary:hover { background: var(--indigo-hover); color: var(--white); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--white); border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, .06); color: var(--white); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn .spinner { width: 1rem; height: 1rem; border: 2px solid rgba(255,255,255,.35); border-top-color: var(--white); border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero */
.hero { padding: 4.5rem 0 3.5rem; }
@media (min-width: 60rem) { .hero { padding: 6.5rem 0 5rem; } }
.hero h1 { max-width: 13em; }
.hero .lede { margin-top: 1.375rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.formerly { display: inline-block; margin-bottom: 1.25rem; font-size: .875rem; color: var(--muted); }
.formerly strong { color: var(--text); font-weight: 500; }

/* The route — the signature element */
.route { margin-top: 3.5rem; position: relative; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1.5rem; }
@media (min-width: 52rem) { .route { padding: 2rem 2.25rem; } }
.route-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; position: relative; }
@media (min-width: 52rem) { .route-stops { grid-template-columns: 1fr 1.2fr 1fr; gap: 0; } }
.stop { position: relative; padding-left: 2rem; }
@media (min-width: 52rem) { .stop { padding-left: 0; padding-top: 2.25rem; } .stop:nth-child(2) { text-align: center; } .stop:nth-child(3) { text-align: right; } }
.stop-label { font-size: .8125rem; color: var(--muted); }
.stop-addr { display: block; margin-top: .25rem; color: var(--white); font-weight: 500; font-size: .9688rem; overflow-wrap: anywhere; font-feature-settings: "tnum"; }
.stop-note { display: block; margin-top: .25rem; font-size: .875rem; color: var(--muted); }
.stop::before { content: ""; position: absolute; left: .3125rem; top: .375rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--night); border: 2px solid var(--muted); z-index: 1; }
.stop.is-relay::before { border-color: var(--indigo-soft); background: var(--indigo); box-shadow: 0 0 0 5px rgba(90, 103, 216, .25); }
@media (min-width: 52rem) {
  .stop::before { left: 0; top: 0; }
  .stop:nth-child(2)::before { left: 50%; transform: translateX(-50%); }
  .stop:nth-child(3)::before { left: auto; right: 0; }
}
.track { position: absolute; left: calc(1.5rem + .6875rem - 1px); top: calc(1.5rem + .75rem); bottom: calc(1.5rem + 3.6rem); width: 2px; background: var(--line-strong); }
@media (min-width: 52rem) { .track { left: calc(2.25rem + .375rem); right: calc(2.25rem + .375rem); top: calc(2rem + .375rem - 1px); bottom: auto; width: auto; height: 2px; } }
.packet { position: absolute; width: .5rem; height: .5rem; border-radius: 50%; background: var(--white); box-shadow: 0 0 12px 2px rgba(163, 191, 250, .8); left: -3px; top: 0; animation: travel-v 4.8s cubic-bezier(.6, 0, .4, 1) infinite; }
@media (min-width: 52rem) { .packet { top: -3px; left: 0; animation-name: travel-h; } }
@keyframes travel-v { 0% { top: 0; opacity: 0; } 8% { opacity: 1; } 42%, 58% { top: 50%; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes travel-h { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 42%, 58% { left: 50%; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .packet { display: none; } }
.alias-swap { transition: opacity 260ms ease; }
.alias-swap.is-out { opacity: 0; }

/* Sections */
.section { padding: 4.5rem 0; border-top: 1px solid var(--line); }
@media (min-width: 60rem) { .section { padding: 6rem 0; } }
.section-head { max-width: 40rem; margin-bottom: 2.75rem; }
.section-head p { margin-top: 1rem; color: var(--muted); }

/* How it works: a real sequence, drawn as the same route vertically */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; max-width: 44rem; }
.steps li { position: relative; padding: 0 0 2.25rem 3.5rem; counter-increment: step; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -.125rem; width: 2.125rem; height: 2.125rem; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .9375rem; color: var(--white); background: var(--night); border: 2px solid var(--indigo); font-feature-settings: "tnum"; }
.steps li::after { content: ""; position: absolute; left: 1rem; top: 2.25rem; bottom: .25rem; width: 2px; background: var(--line-strong); }
.steps li:last-child::after { display: none; }
.steps h3 { margin-bottom: .375rem; }
.steps p { color: var(--muted); }
.steps code, .inline-code { font-family: inherit; font-weight: 500; color: var(--white); background: rgba(255,255,255,.06); padding: .0625rem .375rem; border-radius: .375rem; font-size: .95em; overflow-wrap: anywhere; }

/* Features as a definition list, two columns */
.features { display: grid; gap: 2rem 3rem; margin: 0; }
@media (min-width: 44rem) { .features { grid-template-columns: 1fr 1fr; } }
.features div { border-top: 1px solid var(--line-strong); padding-top: 1.125rem; }
.features dt { color: var(--white); font-weight: 600; font-size: 1.0625rem; }
.features dd { margin: .375rem 0 0; color: var(--muted); }

/* Recipient panel */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 1.75rem; }
@media (min-width: 52rem) { .panel { padding: 2.75rem; } }
.recipients { display: grid; gap: 2.5rem; }
@media (min-width: 60rem) { .recipients { grid-template-columns: 1.15fr 1fr; gap: 4rem; align-items: start; } }
.recipients p + p { margin-top: 1rem; }
.recipients .btn { margin-top: 1.75rem; }
.domain-list { list-style: none; margin: 0; padding: 0; }
.domain-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.domain-list li:first-child { border-top: 1px solid var(--line); }
.domain-list .d { color: var(--white); font-weight: 500; }
.domain-list .n { color: var(--muted); font-size: .9375rem; }
.list-caption { color: var(--muted); font-size: .9375rem; margin-bottom: .75rem; }

/* Promises */
.promises { display: grid; gap: 1.5rem; max-width: 52rem; }
@media (min-width: 44rem) { .promises { grid-template-columns: 1fr 1fr; gap: 1.75rem 3rem; } }
.promises p { color: var(--muted); }
.promises strong { display: block; color: var(--white); font-weight: 600; margin-bottom: .25rem; }

/* Prose pages */
.page-head { padding: 3.5rem 0 2.5rem; }
@media (min-width: 60rem) { .page-head { padding: 5rem 0 3rem; } }
.page-head p { margin-top: 1rem; }
.prose { max-width: 42rem; }
.prose h2 { font-size: 1.5rem; margin: 3rem 0 1rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 2rem 0 .5rem; }
.prose p, .prose ul, .prose ol { margin: 0 0 1rem; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li { margin-bottom: .375rem; }
.prose li::marker { color: var(--muted); }
.updated { font-size: .875rem; color: var(--muted); }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.toc a { font-size: .9375rem; text-decoration: none; padding: .375rem .75rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); }
.toc a:hover { color: var(--white); background: rgba(255,255,255,.06); }

/* Abuse page layout */
.abuse-layout { display: grid; gap: 3rem; padding-bottom: 5rem; }
@media (min-width: 62rem) { .abuse-layout { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; align-items: start; } }
.aside h2 { font-size: 1.25rem; margin-bottom: .75rem; }
.aside section + section { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.aside p, .aside li { color: var(--muted); font-size: .9688rem; }
.aside ul { padding-left: 1.125rem; margin: .5rem 0 0; }
.aside li { margin-bottom: .375rem; }
.aside .urgent { border-left: 3px solid var(--red-text); padding-left: 1rem; }
.aside .urgent h2 { color: var(--white); }

/* Forms */
.form { display: grid; gap: 1.5rem; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend, .label { display: block; color: var(--white); font-weight: 500; font-size: .9375rem; margin-bottom: .5rem; padding: 0; }
.hint { display: block; color: var(--muted); font-size: .875rem; margin: -.25rem 0 .5rem; }
.req { color: var(--muted); font-weight: 400; }
.input, .textarea, .select {
  width: 100%; font: inherit; font-size: 1rem; color: #f7fafc;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: .625rem; padding: .75rem .875rem; transition: border-color var(--ease), background var(--ease);
}
.input::placeholder, .textarea::placeholder { color: #718096; }
.input:hover, .textarea:hover { border-color: rgba(255,255,255,.32); }
.input:focus, .textarea:focus { outline: none; border-color: var(--focus); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(66,153,225,.25); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red-text); }
.input:disabled, .textarea:disabled { opacity: .55; cursor: not-allowed; }
.textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.textarea.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; min-height: 11rem; }
.field-error { display: none; color: var(--red-text); font-size: .875rem; margin-top: .375rem; }
.field-error.is-shown { display: block; }
.row-2 { display: grid; gap: 1.5rem; }
@media (min-width: 40rem) { .row-2 { grid-template-columns: 1fr 1fr; } }

.choices { display: grid; gap: .5rem; }
@media (min-width: 40rem) { .choices { grid-template-columns: 1fr 1fr; } }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span { display: block; height: 100%; padding: .75rem .875rem .75rem 2.5rem; border: 1px solid rgba(255,255,255,.2); border-radius: .625rem; background: rgba(255,255,255,.03); transition: border-color var(--ease), background var(--ease); }
.choice span strong { display: block; color: var(--white); font-weight: 500; font-size: .9688rem; }
.choice span small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.4; margin-top: .125rem; }
.choice span::before { content: ""; position: absolute; left: .875rem; top: 1rem; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--muted); }
.choice input:hover + span { border-color: rgba(255,255,255,.35); }
.choice input:checked + span { border-color: var(--indigo); background: rgba(90,103,216,.12); }
.choice input:checked + span::before { border-color: var(--indigo-soft); background: radial-gradient(circle, var(--indigo-soft) 0 35%, transparent 40%); }
.choice input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.check { display: flex; gap: .75rem; align-items: flex-start; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 1.125rem; height: 1.125rem; margin-top: .2rem; border: 2px solid var(--muted); border-radius: .3rem; background: transparent; cursor: pointer; display: grid; place-items: center; }
.check input:checked { background: var(--indigo); border-color: var(--indigo); }
.check input:checked::after { content: ""; width: .3rem; height: .6rem; border: solid var(--white); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check span { color: var(--text); font-size: .9375rem; }

.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form-foot .muted { font-size: .875rem; max-width: 26rem; }
.notice { border-radius: .75rem; padding: 1rem 1.125rem; font-size: .9688rem; display: none; }
.notice.is-shown { display: block; }
.notice-error { background: rgba(155, 44, 44, .18); border: 1px solid rgba(254, 178, 178, .35); color: var(--red-text); }
.done { display: none; }
.done.is-shown { display: block; }
.done h2 { font-size: 1.75rem; margin-bottom: .75rem; }
.done p + p { margin-top: .75rem; }
.ref { display: inline-block; margin-top: .25rem; font-weight: 600; color: var(--white); background: rgba(56, 161, 105, .16); border: 1px solid rgba(56, 161, 105, .45); padding: .375rem .75rem; border-radius: .5rem; font-feature-settings: "tnum"; letter-spacing: .02em; }
.turnstile-slot { min-height: 65px; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 2.5rem 0 3rem; margin-top: 0; }
.site-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .site-footer .wrap { grid-template-columns: 1fr auto; align-items: center; } }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .9375rem; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--white); text-decoration: underline; }
.copyright { color: var(--muted); font-size: .875rem; }
.copyright strong { color: var(--text); font-weight: 500; }
.dc-logo { display: inline-block; height: 1.125rem; width: auto; vertical-align: -0.2rem; margin-right: .5rem; opacity: .9; }

/* 404 */
.notfound { padding: 7rem 0; }
.notfound p { margin-top: 1rem; }
.notfound .btn { margin-top: 2rem; }

@media (min-width: 52rem) { .stop-addr { font-size: 1.0625rem; } }

.recipients.recipients-single { grid-template-columns: 1fr; }
.recipients-single .measure { max-width: 42em; }