/* SprigDeal material and motion tokens. Brand colors stay defined by the existing app styles. */
:root {
  --sd-glass-blur: 24px;
  --sd-glass-saturation: 1.38;
  --sd-glass-fill: rgba(255, 255, 255, 0.68);
  --sd-glass-fill-strong: rgba(255, 255, 255, 0.86);
  --sd-glass-rim: rgba(255, 255, 255, 0.92);
  --sd-glass-line: rgba(113, 158, 125, 0.27);
  --sd-glass-sheen: rgba(255, 255, 255, 0.72);
  --sd-glass-shadow: 0 1px 1px rgba(255, 255, 255, 0.88) inset,
    0 8px 18px rgba(28, 66, 46, 0.055),
    0 22px 48px rgba(28, 66, 46, 0.095);
  --sd-surface-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 2px 5px rgba(27, 63, 45, 0.035),
    0 12px 28px rgba(27, 63, 45, 0.065),
    0 28px 62px rgba(27, 63, 45, 0.055);
  --sd-surface-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.98) inset,
    0 7px 15px rgba(27, 63, 45, 0.055),
    0 20px 44px rgba(27, 63, 45, 0.105),
    0 34px 72px rgba(27, 63, 45, 0.07);
  --sd-motion-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sd-motion-fast: 180ms;
  --sd-motion-medium: 240ms;
}

/* Liquid glass header: the existing links and layout remain in place. */
.landing .seo-top {
  position: sticky;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.34) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(var(--sd-glass-blur)) saturate(var(--sd-glass-saturation)) !important;
  backdrop-filter: blur(var(--sd-glass-blur)) saturate(var(--sd-glass-saturation)) !important;
  transition: background-color var(--sd-motion-medium) ease, box-shadow var(--sd-motion-medium) ease;
}

.landing .seo-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 6px max(12px, calc((100vw - 1280px) / 2));
  border: 1px solid var(--sd-glass-line);
  border-radius: 19px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.84), var(--sd-glass-fill) 58%, rgba(246, 251, 246, 0.68));
  box-shadow: 0 1px 0 var(--sd-glass-rim) inset, 0 2px 5px rgba(29, 66, 47, 0.035), 0 12px 30px rgba(29, 66, 47, 0.1);
  pointer-events: none;
  transition: background var(--sd-motion-medium) ease, box-shadow var(--sd-motion-medium) ease, border-color var(--sd-motion-medium) ease;
}

.landing .seo-top.is-scrolled::before {
  border-color: rgba(113, 158, 125, 0.34);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.81) 58%, rgba(246, 251, 246, 0.86));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 5px 12px rgba(29, 66, 47, 0.04), 0 16px 38px rgba(29, 66, 47, 0.14);
}

.landing .seo-top > * { position: relative; z-index: 1; }
.landing .seo-nav a { transition: color var(--sd-motion-fast) ease, background-color var(--sd-motion-fast) ease, transform var(--sd-motion-fast) ease; }
.landing .seo-nav a:not(.seo-nav-cta):hover { transform: translateY(-1px); }
.landing .seo-nav .seo-nav-cta,
.landing .seo-nav .sd-nav-register {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 3px 7px rgba(20, 69, 48, 0.12), 0 9px 20px rgba(20, 69, 48, 0.12) !important;
}

/* Always-visible ambient depth behind the existing hero mockup. */
.landing .seo-hero {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 73% 47%, rgba(55, 139, 104, 0.19), transparent 47%) !important;
}

/* The shared dashboard .dot rule is absolutely positioned; keep the hero badge marker in its inline flow. */
.landing .seo-pill .dot { position: static !important; inset: auto !important; flex: 0 0 7px; }

.landing .seo-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: min(62vw, 720px);
  aspect-ratio: 1;
  right: 0;
  top: 2%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(55, 139, 104, 0.14), rgba(123, 169, 108, 0.08) 39%, transparent 71%);
  filter: blur(26px);
  pointer-events: none;
}

.landing .seo-hero > * { position: relative; }
.landing .seo-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(113, 158, 125, 0.3) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 252, 247, 0.94)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 4px 10px rgba(25, 73, 49, 0.045), 0 20px 46px rgba(25, 73, 49, 0.11), 0 42px 82px rgba(25, 73, 49, 0.095) !important;
  transition: box-shadow var(--sd-motion-medium) var(--sd-motion-ease), border-color var(--sd-motion-medium) ease;
}

.landing .seo-visual::before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0 0 auto;
  height: 28%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.13) 34%, transparent);
  pointer-events: none;
}

.landing .seo-visual > * { position: relative; z-index: 1; }

/* Premium card material. Forms and data tables stay on opaque, low-glare surfaces. */
.landing .seo-price-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(113, 158, 125, 0.25) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(246, 251, 246, 0.9)) !important;
  box-shadow: var(--sd-surface-shadow) !important;
  transition: transform var(--sd-motion-medium) var(--sd-motion-ease), box-shadow var(--sd-motion-medium) ease, border-color var(--sd-motion-medium) ease, background var(--sd-motion-medium) ease;
}

.landing .seo-price-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.16) 42%, transparent);
  pointer-events: none;
  z-index: -1;
}

.landing .seo-price-panel > * { position: relative; z-index: 1; }

.landing .seo-price-panel {
  border-color: rgba(113, 158, 125, 0.34) !important;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.99), rgba(242, 249, 242, 0.94) 62%, rgba(255, 255, 255, 0.95)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.97) inset, 0 5px 12px rgba(22, 61, 43, 0.055), 0 19px 46px rgba(22, 61, 43, 0.13), 0 38px 70px rgba(22, 61, 43, 0.08) !important;
}

.landing .seo-price-panel .price { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95); }
.landing .seo-faq details { transition: border-color var(--sd-motion-fast) ease; }
.landing .seo-faq details[open] { border-color: rgba(113, 158, 125, 0.42); }

/* Existing CTA colors remain intact; only their finish and feedback change. */
.landing .seo-btn,
.landing .seo-nav-cta,
.ws-shell .btn,
#staticFallback .btn {
  position: relative;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 3px 7px rgba(19, 58, 39, 0.08), 0 9px 19px rgba(19, 58, 39, 0.07);
  transition: transform var(--sd-motion-fast) var(--sd-motion-ease), box-shadow var(--sd-motion-fast) ease, background-color var(--sd-motion-fast) ease, border-color var(--sd-motion-fast) ease;
}

.landing .seo-btn:active,
.landing .seo-nav-cta:active,
.ws-shell .btn:active:not(:disabled),
#staticFallback .btn:active:not(:disabled) { transform: scale(0.985); }

/* The actual workspace uses almost-opaque premium surfaces for legibility. */
.ws-sidebar,
#staticFallback .sidebar {
  background: rgba(255, 255, 255, 0.91) !important;
  border-right-color: rgba(113, 158, 125, 0.24) !important;
  box-shadow: 10px 0 32px rgba(27, 61, 42, 0.075), 1px 0 0 rgba(255, 255, 255, 0.92) inset !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.32);
  backdrop-filter: blur(22px) saturate(1.32);
}

.ws-top,
#staticFallback .topbar {
  background: rgba(255, 255, 255, 0.78) !important;
  border-bottom-color: rgba(113, 158, 125, 0.2) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 9px 28px rgba(27, 61, 42, 0.075) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.34);
  backdrop-filter: blur(24px) saturate(1.34);
  transition: background-color var(--sd-motion-medium) ease, box-shadow var(--sd-motion-medium) ease;
}

.ws-top.is-scrolled,
#staticFallback .topbar.is-scrolled { background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 12px 34px rgba(27, 61, 42, 0.105) !important; }

.ws-navigation button,
#staticFallback .nav-btn {
  position: relative;
  transition: color var(--sd-motion-fast) ease, background-color var(--sd-motion-fast) ease, box-shadow var(--sd-motion-fast) ease, transform var(--sd-motion-fast) var(--sd-motion-ease);
}

.ws-navigation button.active,
#staticFallback .nav-btn.active {
  background: linear-gradient(100deg, rgba(223, 240, 225, 0.95), rgba(239, 248, 238, 0.82)) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 5px 14px rgba(38, 93, 60, 0.075), inset 2px 0 0 #36835d;
}

.ws-content .panel,
.ws-content .metric-box,
.ws-content .customer-card,
.ws-content .follow-card,
.ws-content .pipeline-card,
.ws-content .billing-page-grid > section,
.ws-content .plan-cards article,
#staticFallback .page .card,
#staticFallback #runtimeApp .metric-card {
  border-color: rgba(113, 158, 125, 0.2) !important;
  background: linear-gradient(145deg, #fff, rgba(249, 252, 249, 0.98)) !important;
  box-shadow: var(--sd-surface-shadow) !important;
  transition: transform var(--sd-motion-medium) var(--sd-motion-ease), box-shadow var(--sd-motion-medium) ease, border-color var(--sd-motion-medium) ease;
}

.ws-content .metric-box { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 4px 8px rgba(27, 63, 45, 0.035), 0 12px 28px rgba(27, 63, 45, 0.065) !important; }
.ws-content .panel.panel-tint { background: #1c5440 !important; }
.ws-content .panel.panel-tint h2 { color: #fffefa !important; }
.ws-content .panel.panel-tint .accent { color: #d0dcba !important; }
.ws-content .panel.panel-tint .rate-caption { color: #d0d9ce !important; }
.ws-content .pipeline-column { background: rgba(245, 249, 245, 0.96); border-color: rgba(113, 158, 125, 0.2); box-shadow: 0 5px 18px rgba(27, 63, 45, 0.045) inset; }
.ws-content .table-scroll, .ws-content .app-table, .ws-content form, .ws-content input, .ws-content select, .ws-content textarea { -webkit-backdrop-filter: none; backdrop-filter: none; }
.ws-content .app-table tbody tr { transition: background-color var(--sd-motion-fast) ease; }
.ws-content .app-table tbody tr:hover { background: rgba(232, 244, 234, 0.56); }

.ws-shell .mobile-bottom,
#staticFallback #runtimeApp .bottomnav {
  position: fixed;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.76) !important;
  border-top-color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 -1px 0 rgba(113, 158, 125, 0.2), 0 -12px 34px rgba(21, 61, 42, 0.13) !important;
  -webkit-backdrop-filter: blur(25px) saturate(1.38);
  backdrop-filter: blur(25px) saturate(1.38);
}

.ws-shell .mobile-bottom::before,
#staticFallback #runtimeApp .bottomnav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, rgba(255, 255, 255, 0.96) 28%, rgba(255, 255, 255, 0.96) 72%, transparent 96%);
  pointer-events: none;
}

.ws-shell .mobile-bottom > button,
#staticFallback #runtimeApp .bottomnav > button { position: relative; transition: color var(--sd-motion-fast) ease, transform var(--sd-motion-fast) var(--sd-motion-ease); }
.ws-shell .mobile-bottom > button.active,
#staticFallback #runtimeApp .bottomnav > button.active { color: #237951; }
.ws-shell .mobile-bottom .new-center > span,
#staticFallback #runtimeApp .bottomnav .sd-create-action .add-nav {
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.27) inset, 0 5px 12px rgba(24, 75, 51, 0.2), 0 12px 24px rgba(24, 75, 51, 0.16);
}

.ws-shell .mobile-bottom .new-center > span::before,
#staticFallback #runtimeApp .bottomnav .sd-create-action .add-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 58%;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
  pointer-events: none;
}

.ws-shell .mobile-bottom .new-center > span > *,
#staticFallback #runtimeApp .bottomnav .sd-create-action .add-nav > * { position: relative; z-index: 1; }

.modal-shade { animation: none !important; -webkit-backdrop-filter: blur(7px) saturate(1.08); backdrop-filter: blur(7px) saturate(1.08); }
.detail-modal { animation: none !important; background: linear-gradient(145deg, #fff, rgba(250, 252, 250, 0.99)); border: 1px solid rgba(113, 158, 125, 0.2); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 20px 50px rgba(20, 54, 37, 0.16), 0 45px 100px rgba(12, 39, 28, 0.16); }

@media (hover: hover) and (pointer: fine) {
  .landing .seo-price-panel:hover { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.98) inset, 0 8px 18px rgba(22, 61, 43, 0.065), 0 25px 58px rgba(22, 61, 43, 0.16), 0 40px 74px rgba(22, 61, 43, 0.095) !important; }
  .ws-content .panel:hover,
  .ws-content .customer-card:hover,
  .ws-content .follow-card:hover,
  .ws-content .pipeline-card:hover { transform: translateY(-2px); border-color: rgba(113, 158, 125, 0.34) !important; box-shadow: var(--sd-surface-shadow-hover) !important; }
  .ws-navigation button:hover { transform: translateX(2px); }
}

@media (max-width: 600px) {
  :root { --sd-glass-blur: 16px; --sd-glass-saturation: 1.22; }
  .landing .seo-top::before { inset-inline: 8px; border-radius: 17px; }
  .landing .seo-hero { background: radial-gradient(ellipse at 50% 28%, rgba(55, 139, 104, 0.16), transparent 62%) !important; }
  .landing .seo-hero::before { width: 100vw; right: -12%; top: 16%; filter: blur(34px); }
  .landing .seo-visual { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.96) inset, 0 4px 10px rgba(25, 73, 49, 0.05), 0 15px 32px rgba(25, 73, 49, 0.12), 0 28px 48px rgba(25, 73, 49, 0.08) !important; }
  .ws-shell .mobile-bottom, #staticFallback #runtimeApp .bottomnav { -webkit-backdrop-filter: blur(17px) saturate(1.22); backdrop-filter: blur(17px) saturate(1.22); }
  .ws-content .panel:hover, .ws-content .customer-card:hover, .ws-content .follow-card:hover, .ws-content .pipeline-card:hover { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .landing .seo-top,
  .landing .seo-top::before,
  .ws-sidebar,
  .ws-top,
  .ws-shell .mobile-bottom,
  #staticFallback .sidebar,
  #staticFallback .topbar,
  #staticFallback #runtimeApp .bottomnav { background: rgba(255, 255, 255, 0.96) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .landing .seo-top,
.landing .seo-top::before,
.landing .seo-nav a,
.landing .seo-visual,
.landing .seo-price-panel,
.ws-navigation button,
.ws-content .panel,
.ws-content .metric-box,
.ws-content .customer-card,
.ws-content .follow-card,
.ws-content .pipeline-card { transition: none !important; }
  .landing .seo-price-panel:hover,
.ws-content .panel:hover,
.ws-content .customer-card:hover,
.ws-content .follow-card:hover,
.ws-content .pipeline-card:hover,
.ws-navigation button:hover,
.landing .seo-btn:active,
.landing .seo-nav-cta:active { transform: none !important; }
}