/* Shared FAWN page polish inspired by WDS spacing discipline: consistent surfaces, tight controls, clear hierarchy. */
:root {
  --polish-green: #00c896;
  --polish-ink: #f7fff9;
  --polish-panel: rgba(13, 17, 15, 0.74);
  --polish-line: rgba(255, 255, 255, 0.12);
}

body.fawn-polished {
  min-height: 100vh;
  isolation: isolate;
  background-color: #080b0a;
  background-image: var(--page-atmosphere), linear-gradient(180deg, #080b0a 0%, #101211 100%) !important;
  background-attachment: fixed;
}

body.fawn-polished::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
  background:
    radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 30%), rgba(0, 200, 150, 0.22), transparent 19rem),
    url("fawn-penny-lifelike.png") left clamp(92px, 14vw, 180px) top clamp(110px, 18vh, 220px) / min(22vw, 210px) auto no-repeat,
    repeating-linear-gradient(115deg, rgba(255,255,255,0.026) 0 1px, transparent 1px 22px);
  mix-blend-mode: normal;
}

body.fawn-polished::after {
  content: "";
  position: fixed;
  right: clamp(-210px, -7vw, -70px);
  bottom: clamp(-150px, -9vw, -60px);
  width: min(56vw, 640px);
  aspect-ratio: 980 / 760;
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
  background: url("buck-dollar-lifelike.png") center / contain no-repeat;
  filter: saturate(1.08) drop-shadow(0 34px 90px rgba(0, 0, 0, 0.45));
  transform: translate3d(calc(var(--drift-x, 0) * -10px), calc(var(--drift-y, 0) * -8px), 0);
  transition: transform 0.25s ease-out;
  mix-blend-mode: normal;
}

body.fawn-polished > * { position: relative; z-index: 1; }

body.polish-roadmap { --page-atmosphere: radial-gradient(circle at 12% 18%, rgba(0, 200, 150, 0.24), transparent 25rem), radial-gradient(circle at 82% 16%, rgba(255, 215, 94, 0.16), transparent 24rem), linear-gradient(135deg, rgba(18, 48, 37, 0.8), rgba(7, 8, 10, 0.96)); }
body.polish-about { --page-atmosphere: radial-gradient(circle at 18% 24%, rgba(255, 215, 94, 0.18), transparent 22rem), radial-gradient(circle at 82% 74%, rgba(0, 200, 150, 0.22), transparent 28rem), linear-gradient(140deg, rgba(20, 16, 10, 0.88), rgba(6, 12, 10, 0.98)); }
body.polish-perks, body.polish-campus-savings { --page-atmosphere: radial-gradient(circle at 10% 78%, rgba(86, 159, 255, 0.16), transparent 24rem), radial-gradient(circle at 90% 12%, rgba(0, 200, 150, 0.22), transparent 24rem), linear-gradient(145deg, rgba(8, 20, 28, 0.92), rgba(7, 8, 10, 0.98)); }
body.polish-revenue, body.polish-founding, body.polish-member { --page-atmosphere: radial-gradient(circle at 17% 17%, rgba(0, 200, 150, 0.22), transparent 23rem), radial-gradient(circle at 76% 78%, rgba(255, 91, 115, 0.12), transparent 24rem), linear-gradient(145deg, rgba(14, 26, 18, 0.94), rgba(8, 8, 8, 0.98)); }
body.polish-login, body.polish-signup, body.polish-forgot-password, body.polish-reset-password, body.polish-settings, body.polish-dashboard, body.polish-admin { --page-atmosphere: radial-gradient(circle at 76% 18%, rgba(0, 200, 150, 0.2), transparent 22rem), radial-gradient(circle at 16% 82%, rgba(156, 119, 255, 0.12), transparent 23rem), linear-gradient(150deg, rgba(8, 11, 18, 0.94), rgba(6, 8, 8, 0.98)); }
body.polish-privacy, body.polish-terms, body.polish-founding-terms, body.polish-military, body.polish-refer { --page-atmosphere: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.1), transparent 22rem), radial-gradient(circle at 88% 74%, rgba(0, 200, 150, 0.18), transparent 26rem), linear-gradient(140deg, rgba(11, 15, 12, 0.96), rgba(10, 10, 10, 0.98)); }

.fawn-polished nav,
.fawn-polished .nav {
  background: rgba(8, 10, 9, 0.76) !important;
  border-bottom-color: rgba(255,255,255,0.1) !important;
  backdrop-filter: blur(18px);
}

.fawn-polished .content,
.fawn-polished main,
.fawn-polished .container,
.fawn-polished .hero-content,
.fawn-polished section {
  position: relative;
}

.fawn-polished .stack-item,
.fawn-polished .card,
.fawn-polished .feature-card,
.fawn-polished .problem-card,
.fawn-polished .step,
.fawn-polished .roadmap-card,
.fawn-polished .cta-block,
.fawn-polished form {
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 22px 70px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.04);
}

.fawn-feature-panel {
  max-width: 980px;
  margin: 22px auto 26px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(9, 13, 12, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.04);
}

.fawn-feature-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.fawn-feature-tab {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.045);
  color: rgba(247,255,249,0.76);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  cursor: pointer;
  text-align: left;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.fawn-feature-tab:hover,
.fawn-feature-tab.active {
  transform: translateY(-1px);
  color: #03110d;
  background: var(--polish-green);
  border-color: var(--polish-green);
}

.fawn-feature-output {
  min-height: 112px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, rgba(0,200,150,0.12), rgba(255,255,255,0.035));
}

.fawn-feature-mark {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(0,200,150,0.16);
  color: var(--polish-green);
  font-weight: 950;
  font-size: 1.05rem;
}

.fawn-feature-output h3 {
  margin: 0 0 4px;
  color: #f7fff9;
  font-size: 1.04rem;
}

.fawn-feature-output p {
  margin: 0 !important;
  color: rgba(247,255,249,0.72) !important;
  font-size: 0.92rem !important;
  line-height: 1.48 !important;
}

.fawn-polished a[href^="http"],
.fawn-polished a[href^="mailto:"] {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.fawn-polished a[href^="http"]::after,
.fawn-polished a[href^="mailto:"]::after {
  content: " ↗";
  font-size: 0.78em;
  color: var(--polish-green);
}

.fawn-polished a[href^="mailto:"]::after {
  content: " ✉";
}

@media (max-width: 720px) {
  body.fawn-polished::after { width: 92vw; right: -42vw; opacity: 0.26; }
  .fawn-feature-tabs { grid-template-columns: 1fr 1fr; }
  .fawn-feature-output { grid-template-columns: 1fr; }
}

/* --- Site-wide accessibility & motion polish ------------------------------
   Loaded by every page, so these apply everywhere without per-file edits.
   Pages that define their own :focus-visible (dashboard) simply win on
   specificity where they differ - the intent is identical. */

/* Keyboard navigation: visible accent ring on the focused control only. */
:focus-visible {
  outline: 2px solid #00c896;
  outline-offset: 2px;
  border-radius: 6px;
}

/* Custody surface: a tactile, plain-language explanation of the wallet model. */
.custody-callout {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 200, 150, 0.28);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(0, 200, 150, 0.16), rgba(255, 255, 255, 0.045));
  box-shadow: 0 18px 50px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style: preserve-3d;
  transition: transform 180ms ease, border-color 180ms ease;
}
.custody-callout:hover { border-color: rgba(0, 200, 150, 0.62); }
.custody-callout strong { display: block; color: #f7fff9; font-size: 0.92rem; }
.custody-callout small { display: block; color: rgba(247,255,249,0.68); line-height: 1.45; margin-top: 3px; }
.custody-orbit {
  width: 36px;
  height: 36px;
  display: block;
  border: 1px solid rgba(0, 200, 150, 0.55);
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px rgba(0,200,150,0.08), 0 0 24px rgba(0,200,150,0.18);
  animation: fawn-custody-pulse 2.8s ease-in-out infinite;
}
.custody-orbit::after {
  content: "✓";
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--polish-green);
  font-weight: 950;
}
@keyframes fawn-custody-pulse { 50% { transform: scale(1.08) rotate(8deg); box-shadow: inset 0 0 0 7px rgba(0,200,150,0.14), 0 0 34px rgba(0,200,150,0.28); } }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; }

/* Smooth, consistent interactive feedback on every button and link-button. */
button, .btn, a.btn, input[type="submit"] {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
button:active:not(:disabled), .btn:active, a.btn:active, input[type="submit"]:active:not(:disabled) {
  transform: scale(0.98);
}

/* Respect the OS-level reduced-motion preference everywhere: collapse
   decorative movement to near-instant states. Spinners/skeletons that
   communicate loading state are re-enabled per page where needed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}