/* ── Navigation ── */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in oklab, var(--ink-900) 70%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease-out-quart),
    border-color var(--dur-3) var(--ease-out-quart);
}

.nav[data-stuck="true"] {
  background: color-mix(in oklab, var(--ink-1000) 88%, transparent);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  width: 100%;
}

.nav__links { display: none; gap: var(--sp-5); align-items: center; }

@media (min-width: 58rem) { .nav__links { display: flex; } }

.nav__link {
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--fg-muted);
  text-decoration: none;
  padding-block: 0.35rem;
  position: relative;
  transition: color var(--dur-2) var(--ease-out-quart);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--copper-400);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-3) var(--ease-out-expo);
}

.nav__link:hover { color: var(--cream-50); }
.nav__link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__link[aria-current="true"] { color: var(--copper-200); }
.nav__link[aria-current="true"]::after { transform: scaleX(1); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.12rem;
  text-decoration: none;
  color: var(--cream-50);
}

.wordmark__img {
  height: 2.6rem;
  width: auto;
  flex: none;
  /* The mark is flat artwork recoloured to the palette, so it only needs depth. */
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.55));
  transition: filter var(--dur-3) var(--ease-out-quart), transform var(--dur-3) var(--ease-out-quint);
}

.wordmark:hover .wordmark__img {
  transform: translateY(-1px);
  filter: drop-shadow(0 5px 16px rgba(224, 166, 106, 0.4));
}

.wordmark__img--lg { height: 3.4rem; }

.scroll-rail {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  height: 2px;
  width: 100%;
  z-index: 901;
  pointer-events: none;
}

.scroll-rail__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--copper-700), var(--copper-300));
  box-shadow: 0 1px 10px -2px rgba(224, 166, 106, 0.7);
}

/* ── Buttons ── */
.btn {
  --btn-bg: var(--ink-750);
  --btn-fg: var(--cream-100);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.45rem;
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--line);
  isolation: isolate;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out-quint),
    box-shadow var(--dur-2) var(--ease-out-quart),
    border-color var(--dur-2) var(--ease-out-quart),
    background var(--dur-2) var(--ease-out-quart);
}

.btn:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn svg { width: 1.05em; height: 1.05em; flex: none; }

.btn--primary {
  --btn-bg: linear-gradient(180deg, var(--copper-300), var(--copper-500) 62%, var(--copper-600));
  --btn-fg: #1b1005;
  border-color: color-mix(in oklab, var(--copper-200) 55%, transparent);
  box-shadow: var(--shadow-copper);
  font-weight: 700;
}

.btn--primary:hover {
  box-shadow: 0 14px 38px -14px rgba(224, 166, 106, 0.7), 0 3px 8px -3px rgba(0, 0, 0, 0.8);
}

/* Shine sweep: the one adornment the primary action gets */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 252, 245, 0.5) 46%, transparent 58%);
  transform: translateX(-120%);
  z-index: -1;
}

.btn--primary:hover::after { animation: btn-sheen 900ms var(--ease-out-quart); }

@keyframes btn-sheen { to { transform: translateX(120%); } }

.btn--ghost { --btn-bg: transparent; border-color: var(--line-strong); }
.btn--ghost:hover { --btn-bg: color-mix(in oklab, var(--cream-100) 7%, transparent); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
  box-shadow: none;
}

.btn[data-state="loading"] { pointer-events: none; color: transparent; }
.btn[data-state="loading"]::before {
  content: "";
  position: absolute;
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 2px solid rgba(27, 16, 5, 0.3);
  border-top-color: #1b1005;
  animation: spin 720ms linear infinite;
}

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

/* ── Panels ── */
.panel {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--cream-100) 4%, transparent), transparent 42%),
    var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

/* Cursor spotlight, driven by --mx/--my from JS */
.spot { position: relative; overflow: hidden; }

.spot::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    17rem 17rem at var(--mx, 50%) var(--my, 0%),
    color-mix(in oklab, var(--copper-300) 20%, transparent),
    transparent 68%
  );
  transition: opacity var(--dur-3) var(--ease-out-quart);
}

.spot:hover::before, .spot:focus-within::before { opacity: 1; }

/* ── Icons ── */
.ico {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--lg { width: 1.7rem; height: 1.7rem; }

.ico-plate {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  flex: none;
  border-radius: var(--r-md);
  color: var(--copper-300);
  background: linear-gradient(160deg, color-mix(in oklab, var(--copper-500) 24%, transparent), transparent 72%);
  border: 1px solid var(--line-copper);
}

/* ── Feature rows ── */
.feature-list { display: grid; gap: var(--sp-3); }

.feature {
  display: grid;
  grid-template-columns: 1.3rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}

.feature__icon { color: var(--copper-300); margin-top: 0.16rem; }
.feature--carried .feature__icon { color: var(--sage-400); }
.feature__text { font-size: var(--step--1); color: var(--cream-200); line-height: 1.5; }
.feature__text b { color: var(--cream-50); font-weight: 600; }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.72rem;
  border-radius: var(--r-pill);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line-copper);
  color: var(--copper-200);
  background: color-mix(in oklab, var(--copper-700) 28%, transparent);
}

.badge--sage {
  border-color: color-mix(in oklab, var(--sage-400) 38%, transparent);
  color: var(--sage-300);
  background: color-mix(in oklab, var(--sage-900) 70%, transparent);
}

.badge--quiet { border-color: var(--line); color: var(--cream-300); background: transparent; }


/* ── Forms ── */
.field { display: grid; gap: 0.45rem; }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--cream-200); }
.field__hint { font-size: var(--step--2); color: var(--cream-400); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.82rem 0.95rem;
  background: var(--ink-1000);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--cream-50);
  font-size: var(--step--1);
  transition: border-color var(--dur-2) var(--ease-out-quart), background var(--dur-2) var(--ease-out-quart);
}

.input:hover, .textarea:hover, .select:hover { border-color: var(--line-strong); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--copper-500); background: var(--ink-850); }

.textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ab9f8c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem;
  padding-right: 2.6rem;
}

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

.field__error {
  display: none;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--step--2);
  color: #f0a58f;
}

.field[data-invalid="true"] .field__error { display: flex; }

.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--step--1);
  border: 1px solid var(--line);
}

.form-status[data-visible="true"] { display: flex; }

.form-status[data-tone="ok"] {
  border-color: color-mix(in oklab, var(--sage-400) 45%, transparent);
  background: color-mix(in oklab, var(--sage-900) 65%, transparent);
  color: var(--sage-300);
}

.form-status[data-tone="error"] {
  border-color: rgba(212, 115, 92, 0.5);
  background: rgba(212, 115, 92, 0.12);
  color: #f0a58f;
}