/* =============================================================================
   HorseHub+ "Show day" skin for the standalone public pages (2026-11):
   /pricing/, /signup/, /success/, /welcome/, /redeem/.
   Linked AFTER each page's inline <style>, so it wins on equal specificity.
   Appearance only: no ids, scripts, prices, PayPal or auth behaviour change.
   Source of truth: mockups/show-day/ (design.md).
   ============================================================================= */

@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/manrope-latin-800-normal.woff2") format("woff2"); }

:root {
  --sd-paddock: #1c4632;
  --sd-paddock-2: #275a41;
  --sd-paddock-deep: #10291d;
  --sd-ink: #18291f;
  --sd-muted-ink: #4d5f54;
  --sd-on-dark: #fbf7ec;
  --sd-on-dark-muted: #d3dfd3;
  --sd-brass: #f0c24b;
  --sd-brass-light: #f6d77f;
  --sd-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --sd-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

html body {
  font-family: var(--sd-body);
  color: var(--sd-on-dark);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 46px, rgba(0,0,0,.12) 46px 49px),
    var(--sd-paddock);
  background-attachment: fixed;
}
/* rosette ribbon strip across the top */
html body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, #c8352b 0 20%, #1f4fa0 20% 40%, #f0c24b 40% 60%, #2f8a52 60% 80%, #f2a7c6 80% 100%);
}

/* ---------- type ---------- */
html body h1 {
  font-family: var(--sd-display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem); line-height: .98; color: var(--sd-on-dark);
  text-wrap: balance;
}
html body p { color: var(--sd-on-dark-muted); }
html body .sub, html body .intro, html body .muted { color: var(--sd-on-dark-muted); }
html body a { color: var(--sd-brass-light); }
html body .back-btn, html body a.back-link { color: var(--sd-on-dark-muted); font-weight: 700; }
html body .err, html body .error { color: #ffc2b8; font-weight: 700; }
html body .hint, html body .legal, html body .foot, html body .badge-note { color: rgba(251, 247, 236, .72); }

/* ---------- pricing ---------- */
html body .plan {
  background: #fff; color: var(--sd-ink); border: 0; border-radius: 16px;
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); position: relative; overflow: hidden;
}
html body .plan::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--sd-brass);
}
html body .plan h2 {
  font-family: var(--sd-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.6rem; color: var(--sd-paddock);
}
html body .price {
  font-family: var(--sd-display); font-weight: 800; font-size: 3rem; line-height: 1;
  color: var(--sd-paddock-deep); font-variant-numeric: tabular-nums;
}
html body .price small { font-family: var(--sd-body); font-size: .95rem; font-weight: 700; color: var(--sd-muted-ink); }
html body .trial { color: #1d6a3c; font-weight: 700; }
html body .plan ul { color: #33463b; }
html body .notice { background: rgba(240, 194, 75, .14); border: 1px solid rgba(240, 194, 75, .5); color: var(--sd-on-dark); }
html body .notice p { color: var(--sd-on-dark); }
html body .pitch-hook { font-family: var(--sd-display); font-weight: 800; text-transform: uppercase; font-size: 1.6rem; color: var(--sd-brass); }
html body .pitch-body { color: var(--sd-on-dark-muted); }
html body .pitch-trust { color: rgba(251, 247, 236, .7); }

/* ---------- primary actions: brass, show-rosette gold ---------- */
html body .cta,
html body button[type=submit],
html body a.enter,
html body .notice a.settings,
html body .retry-actions .primary {
  background: var(--sd-brass); color: var(--sd-paddock-deep);
  border: 2px solid var(--sd-paddock-deep); border-radius: 14px;
  font-family: var(--sd-body); font-weight: 800; text-decoration: none;
  box-shadow: 0 3px 0 var(--sd-paddock-deep);
}
html body .cta:hover,
html body button[type=submit]:hover,
html body a.enter:hover,
html body .notice a.settings:hover,
html body .retry-actions .primary:hover { background: #f5cf62; }
html body .cta:focus-visible,
html body button[type=submit]:focus-visible,
html body a.enter:focus-visible,
html body .back-btn:focus-visible,
html body a:focus-visible,
html body .resend button:focus-visible {
  outline: 3px solid var(--sd-brass); outline-offset: 3px;
}
html body .retry-actions .secondary { background: rgba(255,255,255,.1); color: var(--sd-on-dark); border: 2px solid rgba(255,255,255,.4); border-radius: 14px; }

/* ---------- forms ---------- */
html body label { color: var(--sd-on-dark); font-weight: 700; }
html body input:not([type=checkbox]):not([type=radio]),
html body select,
html body textarea {
  background: #fff; color: var(--sd-ink); border: 2px solid transparent; border-radius: 12px;
  font-family: var(--sd-body); font-weight: 600;
}
html body select { background-color: #fff; }
html body select option { background-color: #fff; color: var(--sd-ink); }
html body input::placeholder, html body textarea::placeholder { color: #6b7a70; }
html body input:not([type=checkbox]):not([type=radio]):focus, html body select:focus, html body textarea:focus {
  outline: none; border-color: var(--sd-brass); box-shadow: 0 0 0 3px rgba(240, 194, 75, .35);
}
html body .plan-tag {
  background: var(--sd-brass); color: var(--sd-paddock-deep); border: 0; font-weight: 800;
}

/* ---------- welcome (set password) ---------- */
html body .card {
  background: var(--sd-paddock-deep); border: 1px solid rgba(240, 194, 75, .35);
  border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}

/* ---------- success (was a light page) ---------- */
html body .icon { background: var(--sd-brass); box-shadow: 0 0 0 4px rgba(240, 194, 75, .3); }
html body .icon svg { stroke: var(--sd-paddock-deep); }
html body .status { color: var(--sd-brass-light); }
html body .resend button { color: var(--sd-brass-light); }
html body .resend button[disabled] { color: rgba(251, 247, 236, .5); }
html body a.home { color: var(--sd-brass-light); }

@media (prefers-reduced-motion: reduce) { html body * { transition: none !important; } }
@media (forced-colors: active) { html body .plan, html body .card { border: 1px solid CanvasText; } }