/* /start/ (task 01a19300 stage 5; direction canvas 01a19303 rev 1). The page
   matches the SITE, not the Suite tokens. site/style.css declares no custom
   properties, so the canvas values are scoped here under .start-page only.
   Fraunces appears ONLY on the h1 (request.css's clamp). No amount, figure or
   price lives in this file: the price is read from Stripe at runtime. */
.start-page {
  --cream: #f7f0df;
  --field: #fffaf0;
  --ink: #17201f;
  --orange: #f65d0a;
  --ember: #f47721;
  --moss: #476852;
  --error-rule: #b42318;
  --focus: #2453d4;
  --subtle: #5d6656;
  color: var(--ink);
}

.start-page .lede {
  margin: 0 0 28px;
}

.start-page .field {
  margin: 0 0 18px;
}

.start-page .slug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
}

.start-page .slug-row input {
  flex: 1 1 14rem;
  width: auto;
  min-width: 0;
}

/* The fixed suffix wraps under the field; it never truncates. */
.start-page .zone-suffix {
  font-size: 17px;
  overflow-wrap: anywhere;
}

.start-page .help,
.start-page .slug-feedback {
  font-size: 14px;
  margin: 6px 0 0;
}

.start-page .slug-feedback.is-free {
  color: var(--moss);
}

.start-page .slug-feedback.is-bad,
.start-page .start-error {
  color: var(--ink);
  border-left: 2px solid var(--error-rule);
  padding-left: 10px;
}

.start-page .start-notice {
  background: var(--field);
  border: 1px solid #17201f40;
  border-radius: 10px;
  padding: 10px 14px;
}

/* The signature element: the address card. */
.start-page .address-card {
  background: var(--field);
  border: 1px solid #17201f40;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 8px 0 24px;
}

.start-page .card-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ember);
  overflow-wrap: anywhere;
}

.start-page .card-slug.is-empty {
  color: var(--subtle);
}

.start-page .price-line {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  margin: 0;
}

/* Continue to payment: the site's orange with an INK label (5.14:1; white on
   #f65d0a is 3.24:1 and fails AA). Scoped to this page; the homepage's
   .primary is unchanged. Hover keeps the lift and the fill. */
.start-page .primary {
  color: var(--ink);
  background: var(--orange);
  min-height: 48px;
  cursor: pointer;
}

.start-page .primary:hover {
  background: var(--orange);
  color: var(--ink);
}

.start-page .primary:disabled {
  cursor: progress;
  transform: none;
}

.start-page .primary:focus-visible,
.start-page input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.start-page .submit-row {
  margin: 0 0 10px;
}

.start-page .after-button {
  font-size: 15px;
  margin: 0;
}

.start-page .fallback {
  margin-top: 28px;
}

@media (max-width: 760px) {
  .start-page .primary {
    display: block;
    width: 100%;
  }
}