/* EverLeaf Oracle-site polish layer — Sep 2026.
 * Loaded last so this file can improve the established Maple remaster without
 * disturbing route-specific layouts or CMS functionality.
 */
:root {
  --everleaf-ink: #173f39;
  --everleaf-leaf: #3f8c4b;
  --everleaf-leaf-strong: #2e713b;
  --everleaf-mint: #e8f4e3;
  --everleaf-cream: #fffdf5;
  --everleaf-gold: #d99b2b;
  --everleaf-border: rgba(58, 102, 74, .20);
  --everleaf-soft-shadow: 0 12px 34px rgba(28, 73, 56, .10), 0 2px 7px rgba(28, 73, 56, .07);
  --everleaf-hover-shadow: 0 18px 44px rgba(28, 73, 56, .15), 0 4px 10px rgba(28, 73, 56, .08);
}

html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(circle at 14% 8%, rgba(129, 188, 104, .08), transparent 28rem),
    linear-gradient(180deg, #fbfcf4 0%, #f7f7ef 100%);
}

/* Navigation and utility chrome */
.worldRibbon {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.worldRibbon strong { letter-spacing: .075em; }
.nav {
  border-bottom: 1px solid rgba(46, 88, 67, .10);
  transition: box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.nav.navScrolled {
  background: rgba(255,253,245,.96) !important;
  border-bottom-color: rgba(46, 88, 67, .18);
  box-shadow: 0 10px 30px rgba(26, 67, 53, .10);
}
.brandImage img {
  display: block;
  height: auto;
  filter: drop-shadow(0 2px 1px rgba(25,63,53,.06));
}
.desktopLinks > a:not(.btn),
.mobileMenuPanel > a {
  position: relative;
}
.desktopLinks > a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--everleaf-leaf);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .17s ease;
}
.desktopLinks > a:not(.btn):hover::after,
.desktopLinks > a.active:not(.btn)::after { transform: scaleX(1); }
.navActions .btn { white-space: nowrap; }

.mobileMenu summary {
  cursor: pointer;
  user-select: none;
}
.mobileMenu summary::-webkit-details-marker { display: none; }
.mobileMenuPanel {
  box-shadow: 0 20px 50px rgba(21, 57, 47, .22) !important;
}
.mobileMenuPanel > a.active {
  background: var(--everleaf-mint);
  color: var(--everleaf-leaf-strong);
  font-weight: 900;
}

/* Buttons: retain the established look while improving physical affordance. */
.btn, button.btn {
  font-weight: 900;
  box-shadow: 0 3px 0 rgba(28, 68, 51, .10);
}
.btn.primary, button.btn.primary {
  box-shadow: 0 4px 0 rgba(31, 94, 47, .24), 0 9px 20px rgba(63, 140, 75, .18);
}
.btn:active, button.btn:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 rgba(28, 68, 51, .10);
}

/* Hero status card */
#server-status { scroll-margin-top: 122px; }
.liveState {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
}
.liveDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b35a52;
  box-shadow: 0 0 0 4px rgba(179,90,82,.13);
  flex: 0 0 auto;
}
.liveDot.online {
  background: #57a95c;
  box-shadow: 0 0 0 4px rgba(87,169,92,.15);
}
.liveRefresh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 10px 12px 0;
  border-top: 1px solid rgba(62, 102, 79, .14);
  color: rgba(42,76,69,.72);
  font-size: 10px;
  line-height: 1.4;
}
.liveRefresh a {
  color: var(--everleaf-leaf-strong);
  font-weight: 900;
  white-space: nowrap;
}

/* Homepage onboarding */
.homeJourney {
  margin: 0 0 58px;
  padding: 28px;
  border: 1px solid var(--everleaf-border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0, rgba(126,184,94,.12), transparent 24rem),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(248,248,236,.96));
  box-shadow: var(--everleaf-soft-shadow);
}
.homeJourneyHead {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.homeJourneyHead h2 {
  margin: 4px 0 0;
  color: var(--everleaf-ink);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}
.homeJourneyHead p {
  max-width: 520px;
  margin: 0;
  color: #657871;
  font-size: 13px;
  line-height: 1.6;
}
.journeySteps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.journeyStep {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  min-height: 150px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(70,110,80,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.journeyStep::before {
  content: attr(data-step);
  position: absolute;
  right: 12px;
  top: 5px;
  color: rgba(48, 104, 60, .07);
  font-size: 64px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
}
.journeyStepIcon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: #eef6e8;
  border: 1px solid #d3e6c7;
}
.journeyStepIcon img { width: 27px; height: 27px; }
.journeyStep strong {
  display: block;
  margin: 1px 0 5px;
  color: var(--everleaf-ink);
  font-size: 15px;
}
.journeyStep p {
  margin: 0;
  color: #657871;
  font-size: 12px;
  line-height: 1.6;
}
.journeyStep small {
  display: inline-block;
  margin-top: 10px;
  color: var(--everleaf-leaf-strong);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
}
.journeyStep:hover {
  transform: translateY(-3px);
  border-color: rgba(65,132,70,.40);
  box-shadow: var(--everleaf-hover-shadow);
}

/* Value proposition row */
.everleafPromises {
  margin: 30px 0 54px;
}
.promiseGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.promiseCard {
  padding: 20px;
  border: 1px solid rgba(67,109,78,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
}
.promiseCard b {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: #edf5e6;
  color: var(--everleaf-leaf-strong);
  font-size: 16px;
}
.promiseCard h3 {
  margin: 0 0 7px;
  color: var(--everleaf-ink);
  font-size: 16px;
  line-height: 1.2;
}
.promiseCard p {
  margin: 0;
  color: #657871;
  font-size: 12px;
  line-height: 1.65;
}

/* Shared page quality */
.lightPage .paperCard,
.lightPage .featurePanel,
.lightPage .supportCard,
.lightPage .accountCard,
.lightPage .formCard,
.authCard,
.cmsPanel {
  border-color: rgba(61, 105, 77, .16) !important;
}
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  border-color: rgba(59, 101, 78, .25) !important;
  background: rgba(255,255,255,.92) !important;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]):hover, select:hover, textarea:hover {
  border-color: rgba(59, 124, 73, .42) !important;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
  border-color: #4c9654 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(76,150,84,.12) !important;
}
.tableWrap { overflow: auto; }
tbody tr { transition: background-color .14s ease; }
tbody tr:hover { background: rgba(224,239,214,.42); }
.notice, .success, .error {
  border-radius: 10px !important;
}

/* Footer */
.siteFooter {
  position: relative;
  overflow: hidden;
}
.siteFooter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120,174,94,.5), transparent);
}
.footerCol a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
  .liveDot.online { animation: everleaf-status-pulse 2.4s ease-in-out infinite; }
  @keyframes everleaf-status-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(87,169,92,.14); }
    50% { box-shadow: 0 0 0 7px rgba(87,169,92,.04); }
  }
}

@media (max-width: 980px) {
  .journeySteps { grid-template-columns: 1fr; }
  .journeyStep { min-height: 0; }
  .promiseGrid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .desktopLinks, .navActions { display: none !important; }
  .navin { grid-template-columns: minmax(0,1fr) auto !important; }
  .mobileMenu { display: block !important; position: relative; }
  .mobileMenuPanel {
    position: fixed !important;
    left: 16px !important;
    right: 16px !important;
    top: 82px !important;
    width: auto !important;
    max-height: calc(100vh - 98px);
    overflow: auto;
    z-index: 500;
  }
  .mobileMenu[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 490;
    background: rgba(15, 45, 37, .28);
    backdrop-filter: blur(2px);
  }
  .mobileMenu > summary,
  .mobileMenuPanel { position: relative; z-index: 501; }
  .homeJourney { padding: 22px; }
  .homeJourneyHead { align-items: flex-start; flex-direction: column; gap: 9px; }
}

@media (max-width: 560px) {
  .worldRibbon nav { display: none; }
  .nav { backdrop-filter: blur(18px); }
  .mobileMenuPanel { top: 75px !important; left: 10px !important; right: 10px !important; }
  .homeJourney { margin-inline: -2px; padding: 18px 14px; border-radius: 15px; }
  .journeyStep { grid-template-columns: 42px minmax(0,1fr); padding: 16px 14px; }
  .journeyStepIcon { width: 42px; height: 42px; }
  .journeyStepIcon img { width: 24px; height: 24px; }
  .promiseGrid { grid-template-columns: 1fr; }
  .promiseCard { padding: 17px; }
  .liveRefresh { align-items: flex-start; flex-direction: column; gap: 4px; }
}