@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

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

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

:root {
  color-scheme: dark;
  --background: #0b0d10;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-strong: #12161b;
  --text: #e8eaed;
  --secondary: #9aa0a6;
  --border: rgba(255, 255, 255, 0.08);
  --accent: #ffb454;
  --accent-hover: #ffbb62;
  --button-text: #17120b;
}

* {
  box-sizing: border-box;
}

/* No single-word last lines. `pretty` pulls a word down off the line above rather than leaving one
   stranded; `balance` evens out short headings. Both are inert where the engine doesn't support them,
   so the fixed strings that must never orphan also carry a non-breaking space. */
p,
li,
small,
.label,
figcaption {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

html {
  background: var(--background);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  padding-top: 72px;
  overflow-x: clip;
  color: var(--text);
  background: transparent;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  font: inherit;
}

button,
a,
input,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection {
  color: var(--button-text);
  background: var(--accent);
}

.page-shell {
  position: relative;
  z-index: 1;
  width: 100%;
}

#sky-canvas {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.site-header {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  padding: 0 20px;
  background: var(--background);
}

.site-header::after {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 40px;
  background: linear-gradient(to bottom, var(--background), rgba(11, 13, 16, 0));
  content: "";
  pointer-events: none;
}

.wordmark {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  letter-spacing: -0.035em;
  color: #f2f3f5;
  font-size: 26px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-earth {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(94, 169, 255, 0.25), 0 0 10px rgba(94, 169, 255, 0.35);
  object-fit: cover;
}

.site-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
}

.site-nav a {
  color: var(--secondary);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--text);
}

.earth-column {
  position: relative;
}

/* The globe is sized by the width it has AND the height it can spare. Everything under it —
   the owner block and the buy card — has to stay on the first screen, so on a short phone the
   globe gives up the difference. The reserve assumes a four-line hero; the fitter in app.js
   measures the real thing and re-sizes from there, so this is the no-JavaScript floor. */
.globe-stage {
  position: relative;
  width: min(calc(100vw - 48px), 600px, max(calc(100vh - 540px), 260px));
  width: min(calc(100vw - 48px), 600px, max(calc(100dvh - 540px), 260px));
  max-width: 600px;
  aspect-ratio: 1;
  margin: 24px auto 0;
  overflow: visible;
}

.globe-stage::after {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: -2px;
  left: 0;
  height: 19%;
  background: linear-gradient(to bottom, rgba(11, 13, 16, 0), var(--background));
  content: "";
  pointer-events: none;
}

#earth-canvas,
.earth-fallback {
  display: block;
  width: 100%;
  height: 100%;
}

.earth-fallback {
  display: none;
  border-radius: 50%;
  object-fit: cover;
}

.globe-stage.is-fallback #earth-canvas {
  display: none;
}

.globe-stage.is-fallback .earth-fallback {
  display: block;
}

.content-column {
  margin: -2px 20px 0;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
}

.hero-panel {
  display: flex;
  flex-direction: column;
}

.desktop-rules-summary {
  display: none;
}

.label {
  margin: 0 0 6px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
}

.owner-section .label {
  font-size: 14px;
}

.owner-section h1 {
  margin: 0;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.owner-section h1.is-departing {
  opacity: 0.4;
  text-decoration: line-through;
  transition: opacity 250ms ease;
}

.owner-section h1.is-arriving {
  opacity: 0;
  transform: translateY(8px);
}

.owner-section h1.is-arriving.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 250ms ease, transform 250ms ease;
}

.owner-message {
  display: -webkit-box;
  max-width: 38ch;
  margin: 8px 0 0;
  overflow: hidden;
  color: #c9ccd1;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* A plain amber line, not a pill: the only button on this screen is TAKE THE EARTH. */
.owner-link {
  display: none;
  width: fit-content;
  max-width: 100%;
  margin-top: 12px;
  overflow: hidden;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-link.visible {
  display: block;
}

.owner-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gift-disclaimer {
  margin: 12px 0 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.4;
}

.owner-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 16px 0 0;
  color: var(--secondary);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.owner-stats strong {
  font-weight: 400;
}

.card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 20px;
}

.impact-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
  margin-top: 24px;
  padding: 16px;
  border-color: rgba(255, 180, 84, 0.35);
}

.impact-card > p {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  align-items: baseline;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
}

.impact-percent {
  color: var(--accent);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.impact-card > .impact-total {
  color: var(--text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The amount leads; "so far" sits under it, right-aligned with the figure. */
.impact-card > .impact-total small {
  display: block;
  margin-top: 1px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
}

.impact-foot {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  color: var(--secondary);
  font-size: 13px;
}

.impact-foot b {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.action-card {
  margin-top: 12px;
  padding: 16px;
}

.action-card .label {
  font-size: 14px;
}

.action-card .primary-button {
  min-height: 48px;
}

.primary-button {
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  color: var(--button-text);
  background: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.primary-button:hover {
  background: var(--accent-hover);
}

.primary-button:disabled {
  color: #73777c;
  background: #252a30;
  cursor: not-allowed;
}

.action-countdown {
  margin: 12px 0 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.purchase-note {
  margin: 2px 0 0;
  color: var(--secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.below-section {
  margin-top: 48px;
}

.below-section h2 {
  margin: 0 0 16px;
  scroll-margin-top: 112px;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.rules-card {
  padding-top: 4px;
}

.rules-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rules-card li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.rules-card li:nth-child(n + 4) {
  display: none;
}

.rules-card ol.expanded li {
  display: grid;
}

.rules-card li > span {
  color: var(--secondary);
  font-variant-numeric: tabular-nums;
}

.rules-card li p {
  margin: 0;
}

.rules-card li strong {
  font-weight: 500;
}

.rules-legal {
  margin: 16px 0 0;
  color: var(--secondary);
  font-size: 13px;
  line-height: 1.5;
}

.disclosure-button {
  width: 100%;
  padding: 16px 0 0;
  border: 0;
  color: var(--secondary);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.disclosure-button:hover {
  color: var(--text);
}

.history-card {
  padding-top: 4px;
}

.history-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 8px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.history-row:nth-child(n + 6) {
  display: none;
}

.history-list.expanded .history-row {
  display: grid;
}

.history-index,
.history-held {
  color: var(--secondary);
  font-size: 13px;
}

a.history-index {
  text-decoration: none;
}

a.history-index:hover,
a.history-index:focus-visible {
  color: var(--text);
}

.history-person {
  min-width: 0;
}

.history-name {
  display: block;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

a.history-name {
  text-decoration: underline;
  text-decoration-color: rgba(232, 234, 237, 0.35);
  text-underline-offset: 3px;
}

.history-gift,
.history-held {
  display: block;
  margin-top: 2px;
  line-height: 1.35;
}

.history-gift {
  color: var(--secondary);
  font-size: 13px;
}

.history-price {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.history-empty {
  margin: 0;
  padding: 16px 0;
  color: var(--secondary);
  font-size: 15px;
}

.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}

.secondary-button {
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: transparent;
  font-weight: 500;
  cursor: pointer;
}

.secondary-button:hover {
  background: var(--surface);
}

footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 48px;
  color: var(--secondary);
  font-size: 13px;
}

footer p {
  max-width: 54ch;
  margin: 0;
}

footer a {
  width: fit-content;
  color: var(--secondary);
}

footer .sky-credit {
  color: #727981;
  font-size: 11px;
}

.buy-dialog {
  width: calc(100% - 32px);
  max-width: 500px;
  max-height: calc(100svh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text);
  background: var(--surface-strong);
}

.buy-dialog::backdrop {
  background: rgba(0, 0, 0, 0.74);
}

/* Header, scrolling body, footer. On desktop the whole thing is short enough to sit still; on a
   phone the body is the only part that moves. */
.buy-dialog form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 12px;
  background: var(--surface-strong);
}

/* Centred: the heading, the standing line, and everything in the footer summary. The fields below
   keep a left edge to scan down. */
.dialog-heading {
  flex: 1;
  min-width: 0;
  text-align: center;
  /* The close button is 44px; the same on the left keeps the heading optically centred. */
  margin-left: 44px;
}

.dialog-heading h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-wrap: balance;
}

.dialog-heading h2:focus-visible {
  outline: none;
}

.dialog-heading h2 span {
  color: var(--accent);
}

.dialog-standing {
  margin: 6px 0 0;
  color: var(--secondary);
  font-size: 13px;
}

.dialog-standing:empty {
  display: none;
}

.dialog-body {
  flex: 1;
  min-height: 0;
  padding: 4px 20px 8px;
  overflow-y: auto;
}

.dialog-footer {
  padding: 12px 20px 18px;
  background: var(--surface-strong);
}

.dialog-notice {
  margin: 0 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(240, 178, 90, 0.4);
  border-radius: 10px;
  color: var(--text);
  background: rgba(240, 178, 90, 0.08);
  font-size: 13px;
}

.close-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--secondary);
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.field {
  display: block;
  margin-top: 16px;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
}

.field > span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.field > span small:first-of-type {
  margin-right: auto;
}

.field small {
  color: #747a80;
  font-size: 12px;
  font-weight: 400;
}

.field .field-hint {
  display: block;
  margin-top: 6px;
}

.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.2);
  font-size: 16px;
  font-weight: 400;
}

.field textarea {
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: #6f757b;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #ff9b98;
}

/* The amount, as choices rather than a number to work out. */
.amount-field {
  margin: 12px 0 0;
  padding: 0;
  border: 0;
}

.amount-field legend {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 8px;
  padding: 0;
  color: var(--secondary);
  font-size: 13px;
  font-weight: 500;
}

.amount-field legend small {
  color: #747a80;
  font-size: 12px;
  font-weight: 400;
}

.amount-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.amount-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  background: rgba(0, 0, 0, 0.2);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.amount-chip small {
  color: #747a80;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.amount-chip[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(240, 178, 90, 0.1);
}

.amount-chip[aria-pressed="true"] small {
  color: var(--accent);
}

.amount-custom {
  display: flex;
  align-items: center;
  margin-top: 10px;
  padding-left: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}

.amount-custom[hidden] {
  display: none;
}

/* The focus ring belongs to the whole box, prefix included; the input's own ring lands inside it
   and reads as a second, misaligned field. */
.amount-custom:focus-within {
  border-color: var(--accent);
}

.amount-custom input:focus,
.amount-custom input:focus-visible {
  outline: none;
}

.amount-prefix {
  color: var(--secondary);
  font-size: 16px;
}

.amount-custom input {
  width: 100%;
  /* No spinner arrows: this is a price, not a stepper, and the chips are the coarse control. */
  appearance: textfield;
  -moz-appearance: textfield;
  padding: 13px 14px 13px 4px;
  border: 0;
  color: var(--text);
  background: transparent;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}

.amount-custom input::-webkit-outer-spin-button,
.amount-custom input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

.amount-consequence {
  text-align: center;
  margin: 10px 0 0;
  color: var(--text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.amount-status {
  text-align: center;
  margin: 4px 0 0;
  color: var(--secondary);
  font-size: 12px;
}

/* Message, link and gift start collapsed: optional creative work does not belong between an
   impulse buyer and the button. */
.disclosure {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
}

.disclosure summary {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  padding: 0 14px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.disclosure summary::-webkit-details-marker {
  display: none;
}

.disclosure summary::after {
  margin-left: auto;
  color: var(--secondary);
  content: '+';
  font-size: 18px;
}

.disclosure[open] summary::after {
  content: '–';
}

.disclosure summary small {
  color: #747a80;
  font-size: 12px;
  font-weight: 400;
}

.disclosure-body {
  padding: 0 14px 14px;
}

.disclosure-body .field:first-child {
  margin-top: 4px;
}

.disclosure-policy {
  margin: 12px 0 0;
  color: #747a80;
  font-size: 12px;
}

/* Errors sit under the field that caused them, not in one paragraph at the bottom. */
.field-error {
  display: none;
  margin: 6px 0 0;
  color: #ff9b98;
  font-size: 12px;
  font-weight: 400;
}

.field-error.visible {
  display: block;
}

.form-error {
  margin: 0 0 8px;
  color: #ff9b98;
  font-size: 13px;
}

.form-error:empty {
  display: none;
}

.purchase-disclaimer,
.pay-note,
.pay-trust {
  text-align: center;
  margin: 8px 0 0;
  color: var(--secondary);
  font-size: 12px;
}

.pay-trust {
  margin-top: 4px;
  color: #747a80;
}

.pay-note {
  color: var(--secondary);
}

.purchase-disclaimer {
  text-align: center;
  margin-top: 10px;
  color: #747a80;
  font-size: 11px;
}

.pay-receipts {
  margin: 2px 0 10px;
  color: var(--secondary);
  font-size: 12px;
  text-align: center;
}

.pay-receipts a {
  color: var(--secondary);
}

.toast {
  position: fixed;
  z-index: 20;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  opacity: 0;
  color: var(--text);
  background: #1a1f25;
  font-size: 14px;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
}

@media (min-width: 700px) and (max-width: 1023px) {
  .content-column {
    width: min(560px, calc(100% - 40px));
    margin-right: auto;
    margin-left: auto;
  }
}

@media (min-width: 1024px) {
  .page-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-template-rows: auto;
    column-gap: clamp(32px, 4vw, 64px);
    width: min(1344px, calc(100% - 64px));
    margin: 0 auto;
  }

  .site-header {
    padding-right: max(32px, calc((100vw - 1344px) / 2));
    padding-left: max(32px, calc((100vw - 1344px) / 2));
  }

  .site-nav {
    font-size: 13px;
  }

  .site-nav {
    gap: 24px;
  }

  .desktop-layout {
    display: contents;
  }

  .earth-column {
    position: sticky;
    top: 72px;
    display: grid;
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    place-items: center;
    height: calc(100vh - 72px);
    min-width: 0;
  }

  .globe-stage {
    position: relative;
    top: auto;
    width: min(78vh, 100%);
    max-width: none;
    margin: 0 auto;
  }

  .globe-stage::after {
    height: 14%;
  }

  .content-column {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding: 0 0 48px;
  }

  /* The first screen fills the space beside the globe and centres in it, so the column
     and the globe share a centre line. The panel grows past its min-height rather than
     clipping under the fixed header when the content is tall. */
  .hero-panel {
    justify-content: center;
    padding: 0;
  }

  .owner-section h1 {
    font-size: 64px;
    line-height: 1;
  }

  .owner-message {
    margin-top: 8px;
    font-size: 22px;
  }

  .owner-link {
    margin-top: 12px;
  }

  .owner-stats {
    margin-top: 10px;
  }

  .action-card {
    order: 2;
    margin-top: 12px;
    padding: 16px;
  }

  .action-countdown {
    margin-top: 8px;
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
  }

  .purchase-note {
    margin-top: 4px;
  }

  .impact-card {
    order: 3;
    margin-top: 8px;
    padding: 16px;
  }

  .impact-card > p {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .desktop-rules-summary {
    display: block;
    order: 4;
    margin-top: 8px;
    padding: 10px 16px 11px;
  }

  .desktop-rules-summary h2 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
  }

  .desktop-rules-summary ul {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 0;
    color: var(--secondary);
    font-size: 13px;
    line-height: 1.45;
    list-style: none;
  }

  .desktop-rules-summary li::before {
    margin-right: 7px;
    color: #6f757b;
    content: "·";
  }

  .desktop-rules-summary button {
    margin-top: 6px;
    padding: 0;
    border: 0;
    color: var(--text);
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }

  .desktop-rules-summary button:hover {
    color: var(--accent);
  }

  .below-section {
    margin-top: 32px;
    scroll-margin-top: 32px;
  }

  .share-row,
  footer {
    margin-top: 32px;
  }

  .toast {
    right: 24px;
    left: auto;
    width: 380px;
  }
}

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

  .owner-section h1.is-departing,
  .owner-section h1.is-arriving.is-visible {
    transition-duration: 1ms;
  }
}

html, body { touch-action: manipulation; }
input, textarea, select { font-size: 16px; }

html, body { overflow-x: clip; max-width: 100%; }
.globe-stage { overflow: hidden; }

/* The ?og-view= capture page (scripts/capture-og-globes.mjs) is the globe and nothing else, so the
   fade that sits the Earth into the page would print itself into the share card. Inert otherwise. */
[data-og-view] .globe-stage::after { display: none; }

/* Optical left alignment of the owner block: big type has side bearings, so pull the name back a hair;
   everything else sits hard on the column edge. */
.owner-section > * { margin-left: 0; }
.owner-section h1 { margin-left: -0.04em; }

/* ---- Column pass by hand (Sahil review, 27 Aug 3pm): fewer sizes, more air, owner first ---- */
.owner-section .label { font-size: 14px; margin-bottom: 8px; }
.owner-message { color: #d4d7dc; }
.owner-stats { margin-top: 14px; align-items: baseline; }
.owner-stats-link { margin-left: 6px; color: var(--secondary); opacity: 0.55; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.owner-stats-link:hover { opacity: 1; }
.action-card .label { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.action-line { margin: 10px 0 0; color: var(--secondary); font-size: 14px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.action-line [data-next-earth-share] { color: var(--text); font-weight: 500; }
.clearance-line { margin: 8px 0 0; color: var(--accent); font-size: 14px; line-height: 1.45; }
.owner-section[data-unclaimed] .label,
.owner-section[data-unclaimed] .owner-stats,
.owner-section[data-unclaimed] .owner-link { display: none; }
/* Two rows on the left (the 51% line, then the receipts link) with the running total beside
   them, spanning both and centred against the pair. Padding matches the buy card. */
.impact-card { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 16px; padding: 16px; }
.impact-card > p { grid-column: 1; grid-row: 1; font-size: 15px; }
.impact-card > .impact-total { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.impact-percent { font-size: 26px; }
.impact-card > .impact-total { font-size: 20px; }
@media (min-width: 1024px) {
  /* Same three-group rhythm as mobile: label tight to the name, quote close under it,
     a longer step out to the link and the stats. */
  .owner-section h1 { font-size: 72px; letter-spacing: -0.02em; }
  .owner-section .label { margin-bottom: 6px; }
  .owner-message { margin-top: 10px; font-size: 24px; }
  .owner-link { margin-top: 12px; }
  .owner-stats { margin-top: 18px; }
  .action-card { margin-top: 30px; padding: 16px; }
  .impact-card { margin-top: 12px; }
  .desktop-rules-summary { margin-top: 12px; }
}
@media (max-width: 1023px) {
  /* The stats line and the buy card are one flow, so the gap is small on purpose. */
  .action-card { margin-top: 12px; }
  .impact-card { margin-top: 12px; }

  /* Mobile hero mirrors the centred globe above it */
  .owner-section { text-align: center; }
  .owner-message { margin-left: auto; margin-right: auto; }
  .owner-link { margin-left: auto; margin-right: auto; }
  .owner-stats { justify-content: center; }

  /* The Earth is the hero on a phone, so the chrome above it is trimmed and the space it was
     holding goes to the globe. */
  body { padding-top: 58px; }
  .site-header { height: 58px; padding: 0 16px; }
  .wordmark { font-size: 22px; }
  .wordmark-earth { width: 29px; height: 29px; }
  .globe-stage { margin-top: 6px; }

  /* Three groups, not one even list: the globe stands clear, the label/name/quote read as one
     identity block, and the link and stats sit off at a longer step as meta. */
  .content-column { margin-top: 16px; }
  .owner-section .label { margin-bottom: 4px; }
  .owner-message { margin-top: 8px; }
  .owner-link { margin-top: 10px; }
  .owner-clicks { margin-top: 8px; }
  .owner-stats { margin-top: 18px; }
}
@media (min-width: 1024px) {
  /* First screen owns the viewport: everything below it starts past the fold on any screen size. */
  .hero-panel { min-height: calc(100vh - 72px); }
  .below-section:first-of-type { margin-top: 24px; }
}
@media (min-width: 1024px) {
  .owner-section h1 { font-size: 80px; letter-spacing: -0.025em; line-height: 0.98; }
  .owner-message { font-size: 26px; }
}

/* Wordmark: crisp pre-rendered disc, no ring, tighter type */
.wordmark { font-weight: 600; letter-spacing: -0.04em; }
.wordmark-earth { box-shadow: none; filter: drop-shadow(0 0 6px rgba(94, 169, 255, 0.28)); transform: translateY(2px); }
@media (min-width: 1024px) { .wordmark { font-size: 27px; gap: 9px; } .wordmark-earth { width: 36px; height: 36px; } }

/* Wordmark final: option B (vector Earth) in Space Grotesk 700 (Sahil, 27 Aug 4pm) */
.wordmark { font-family: "Space Grotesk", Inter, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; }
.wordmark-earth { filter: none; box-shadow: none; transform: translateY(2px); }

.impact-link { grid-column: 1; grid-row: 2; align-self: center; color: var(--accent); font-size: 14px; text-decoration: none; }
.impact-link:hover { text-decoration: underline; }

.desktop-rules-summary .rules-caveat { color: var(--muted, #6f747c); }

/* Long owner names step down so they stay on one or two clean lines */
@media (min-width: 1024px) {
  .owner-section h1[data-length="long"] { font-size: 60px; }
  .owner-section h1[data-length="xl"] { font-size: 46px; line-height: 1.05; }
}
@media (max-width: 1023px) {
  .owner-section h1[data-length="long"] { font-size: 36px; }
  .owner-section h1[data-length="xl"] { font-size: 30px; line-height: 1.1; }
}

/* Compact first screen for short desktop viewports (set by the hero fitter) */
@media (min-width: 1024px) {
  .hero-panel[data-compact] .owner-section { padding-top: 0; }
  .hero-panel[data-compact] .owner-message { margin-top: 6px; }
  .hero-panel[data-compact] .owner-link { margin-top: 10px; }
  .hero-panel[data-compact] .owner-stats { margin-top: 10px; }
  .hero-panel[data-compact] .action-card { margin-top: 20px; padding: 12px 16px; }
  .hero-panel[data-compact] .impact-card { margin-top: 8px; padding: 10px 16px; }
  .hero-panel[data-compact] .desktop-rules-summary { margin-top: 8px; padding: 8px 16px 9px; }
  .hero-panel[data-compact] .desktop-rules-summary ul { gap: 0; }
}

/* Short phones: the fold fitter sets data-fold-tight on <html> when shrinking the globe alone
   isn't enough to keep the buy card on the first screen. It lives on the root rather than the
   hero panel because the globe's own top margin is part of the budget. */
@media (max-width: 1023px) {
  .owner-section h1 { font-size: 58px; }
  .owner-section h1[data-length="long"] { font-size: 44px; }
  .owner-section h1[data-length="xl"] { font-size: 34px; }
  [data-fold-tight] .globe-stage { margin-top: 10px; }
  [data-fold-tight] .content-column { margin-top: 8px; }
  [data-fold-tight] .owner-section .label { margin-bottom: 3px; }
  [data-fold-tight] .owner-section h1 { font-size: 46px; }
  [data-fold-tight] .owner-section h1[data-length="long"] { font-size: 36px; }
  [data-fold-tight] .owner-section h1[data-length="xl"] { font-size: 29px; }
  [data-fold-tight] .owner-message { margin-top: 6px; font-size: 16px; }
  [data-fold-tight] .owner-link { margin-top: 10px; font-size: 13px; }
  [data-fold-tight] .owner-clicks { margin-top: 6px; }
  [data-fold-tight] .owner-stats { margin-top: 10px; font-size: 13px; }
  [data-fold-tight] .action-card { margin-top: 10px; padding: 12px 14px; }
  [data-fold-tight] .presence-line { margin-bottom: 6px; }
  [data-fold-tight] .action-line { margin-top: 8px; }
  [data-fold-tight] .impact-card { margin-top: 10px; }

  /* Last resort, for a hero long enough that the floor-sized globe still doesn't clear the fold:
     the quote gives up its second line rather than the button falling off the screen. */
  [data-fold-tight="hard"] .owner-message { -webkit-line-clamp: 1; }
  [data-fold-tight="hard"] .owner-stats { margin-top: 8px; }
  [data-fold-tight="hard"] .action-card { margin-top: 8px; }
}

/* Who else is here, said quietly, right above the price. The slot is always in the layout and
   only its opacity changes, so the buy card never jumps when people arrive or leave. */
/* The buy card reads down one edge: presence, button, subline. Desktop aligns all of it left
   (the button's own label stays centred, which is what a button does); mobile centres it to
   match the hero above. */
.presence-line {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 300ms ease, height 300ms ease, margin 300ms ease;
}

.presence-line.visible { height: 17px; margin: 0 0 8px; opacity: 1; }

@media (max-width: 1023px) {
  .presence-line { justify-content: center; }
  .action-line,
  .clearance-line { text-align: center; }
}

.presence-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: presence-pulse 2.6s ease-out infinite;
}

@keyframes presence-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 180, 84, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(255, 180, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 180, 84, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .presence-line { transition-duration: 1ms; }
  .presence-dot { animation: none; }
}

/* Real counters, in the same understated stat voice as the owner line */
.owner-clicks { margin: 10px 0 0; color: var(--secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.page-stats { color: var(--secondary); font-size: 13px; font-variant-numeric: tabular-nums; }
.owner-section[data-unclaimed] .owner-clicks { display: none; }
@media (min-width: 1024px) {
  .hero-panel[data-compact] .owner-clicks { margin-top: 8px; }
}

/* Loading cover: nothing pops in until the globe is up and the state has rendered */
.boot {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  justify-content: center;
  background: var(--background);
  transition: opacity 300ms ease;
}

.boot.is-hiding { opacity: 0; pointer-events: none; }
.boot[hidden] { display: none; }
.boot-mark { font-size: 30px; }
.boot-hint { margin: 0; color: var(--secondary); font-size: 13px; }

.boot-progress {
  width: 150px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
}

.boot-progress span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--accent);
  animation: boot-slide 1.15s ease-in-out infinite;
}

@keyframes boot-slide {
  from { transform: translateX(-115%); }
  to { transform: translateX(265%); }
}

@media (prefers-reduced-motion: reduce) {
  .boot { transition-duration: 1ms; }
  .boot-progress span { width: 100%; opacity: 0.45; animation: none; }
}

@media (min-width: 1024px) { .boot-mark { font-size: 38px; } }

.pay-share {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  text-align: center;
  text-wrap: balance;
}

.pay-share strong { color: var(--accent); font-weight: 600; }

/* The phone gets a bottom sheet: the header and the money stay put, the fields scroll between
   them. The old centred modal put the CTA below an internal scroll, where a buyer editing an
   optional message could not see what they were about to pay. */
@media (max-width: 1023px) {
  .buy-dialog {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    margin: auto auto 0;
    border-width: 1px 0 0;
    border-radius: 18px 18px 0 0;
  }

  .buy-dialog form {
    max-height: 92dvh;
  }

  .dialog-header {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
  }

  .dialog-heading h2 {
    font-size: 23px;
  }

  .dialog-body {
    padding: 8px 16px 12px;
    overscroll-behavior: contain;
  }

  .dialog-footer {
    position: sticky;
    z-index: 2;
    bottom: 0;
    padding: 12px 16px max(14px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
  }

  .pay-share {
    font-size: 14px;
  }

  /* The footer is the tallest fixed thing on a phone, and every line in it is load-bearing, so it
     buys its room back from leading rather than by dropping a line. */
  .pay-note,
  .pay-trust,
  .purchase-disclaimer {
    margin-top: 4px;
    font-size: 11px;
  }

  .pay-receipts {
    margin-bottom: 8px;
  }
}