/* MSPT landing styles. Keep lines <= 79 chars. */
/* Drop-in replacement. */

/* --- Base (dark as default) ----------------------------------------- */
:root {
  --hero-bg: #0f1115;          /* hero base */
  --panel-bg: #151a21;         /* section panel bg */
  --welcome-fg: #e6e8ea;       /* text on dark */

  --muted: #98a2b3;
  --accent: #16a34a;
  --accent-2: #2563eb;
  --ring: rgba(37, 99, 235, .35);

  /* borders/elevation */
  --card-bd: rgba(255, 255, 255, .10);
  --elev: 0 6px 24px rgba(0, 0, 0, .24);
  --radius-lg: 16px;

  /* Feature card surfaces (dark fallbacks) */
  --card-bg: #1e2631;          /* lighter than panel for lift */
  --card-bg-hover: #222c39;    /* hover lift */
  --card-surface: linear-gradient(
    to bottom,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02) 60%,
    rgba(255,255,255,0)
  );
}

/* Prefer color-mix when supported for smoother theming. */
@supports (background: color-mix(in srgb, black, white)) {
  :root {
    --card-bg: color-mix(in srgb, var(--panel-bg), white 14%);
    --card-bg-hover: color-mix(in srgb, var(--panel-bg), white 18%);
  }
}

/* --- Light theme tokens --------------------------------------------- */
:root[data-theme="light"] {
  --hero-bg: #f8fafc;
  --panel-bg: #ffffff;
  --welcome-fg: #0b1220;
  --muted: #475569;
  --card-bd: rgba(2, 6, 23, .10);
  --ring: rgba(37, 99, 235, .30);
  --elev: 0 4px 18px rgba(2, 6, 23, .08);

  --card-bg: #fbfdff;          /* off-white to lift from panel */
  --card-bg-hover: #f5f9ff;
  --card-surface: linear-gradient(
    to bottom,
    rgba(0,0,0,.03),
    rgba(0,0,0,0) 70%
  );
}

/* Light theme, with color-mix refinement */
@supports (background: color-mix(in srgb, black, white)) {
  :root[data-theme="light"] {
    --card-bg: color-mix(in srgb, var(--panel-bg), black 2%);
    --card-bg-hover: color-mix(in srgb, var(--panel-bg), black 4%);
  }
}

/* --- Landing-only body + wrapper theme (page-scoped) ---------------- */
html.page-landing,
body:has(#landing-root) {
  /* Map app-wide tokens to the landing palette */
  --background: var(--hero-bg);
  --background-light: var(--hero-bg);
  --background-dark: var(--hero-bg);
  --surface: var(--panel-bg);
  --text: var(--welcome-fg);

  /* Links */
  --link-color: #2563eb;
  --link-hover-color: #1d4ed8;
}

/* Paint the canvas (root + wrapper) with the new background */
html.page-landing,
html.page-landing body,
html.page-landing .layout-container,
:root:has(#landing-root),
:root:has(#landing-root) body,
:root:has(#landing-root) .layout-container {
  background-color: var(--background);
  color: var(--text);
}

/* Footer uses landing palette */
html.page-landing #customFooter,
:root:has(#landing-root) #customFooter {
  background-color: var(--hero-bg);
  color: var(--welcome-fg);
  border-top: 1px solid var(--card-bd);
}
html.page-landing #customFooter a,
:root:has(#landing-root) #customFooter a {
  color: var(--link-color);
}
html.page-landing #customFooter a:hover,
:root:has(#landing-root) #customFooter a:hover,
html.page-landing #customFooter a:focus,
:root:has(#landing-root) #customFooter a:focus {
  color: var(--link-hover-color);
}
html.page-landing #customFooter .ui.inverted,
:root:has(#landing-root) #customFooter .ui.inverted {
  background: transparent;
  color: var(--welcome-fg);
}
html.page-landing #customFooter .ui.inverted.header,
:root:has(#landing-root) #customFooter .ui.inverted.header,
html.page-landing #customFooter .ui.inverted .header,
:root:has(#landing-root) #customFooter .ui.inverted .header {
  color: var(--welcome-fg);
}
html.page-landing #customFooter .ui.divider,
:root:has(#landing-root) #customFooter .ui.divider {
  border-color: var(--card-bd);
}
html.page-landing #customFooter .ui.divided.grid > .column:not(.row):after,
:root:has(#landing-root) #customFooter
  .ui.divided.grid > .column:not(.row):after {
  background-color: var(--card-bd);
}
html.page-landing #customFooter .footerItem,
:root:has(#landing-root) #customFooter .footerItem {
  color: var(--muted);
}

/* Light theme mapping for landing body + links */
:root[data-theme="light"].page-landing,
:root[data-theme="light"]:has(#landing-root) {
  --background: var(--hero-bg);
  --background-light: var(--hero-bg);
  --background-dark: var(--hero-bg);
  --surface: var(--panel-bg);
  --text: var(--welcome-fg);
  --link-color: #1e40af;
  --link-hover-color: #1d4ed8;
}

/* Optional: link tone nudge with color-mix */
@supports (color: color-mix(in srgb, white, black)) {
  html.page-landing,
  body:has(#landing-root) {
    --link-color: color-mix(in srgb, var(--accent-2), white 6%);
    --link-hover-color: color-mix(in srgb, var(--accent-2), white 0%);
  }
  :root[data-theme="light"].page-landing,
  :root[data-theme="light"]:has(#landing-root) {
    --link-color: color-mix(in srgb, var(--accent-2), black 10%);
    --link-hover-color: color-mix(in srgb, var(--accent-2), black 4%);
  }
}

/* --- Global helpers ------------------------------------------------- */
html { scroll-behavior: smooth; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
  border: 0 !important;
}

/* --- Containers (panels use panel bg) ------------------------------- */
.ui.welcome.segment, .ui.landing.segment {
  background-color: var(--panel-bg);
  color: var(--welcome-fg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  transition: background-color .2s, color .2s;
}
.ui.welcome.header, .ui.landing.header {
  color: var(--welcome-fg);
  line-height: 1.2;
}
.ui.welcome-container, .ui.landing-container {
  padding: 24px 0 64px 0;
}

/* --- Hero ------------------------------------------------------------ */
.ui.hero.segment {
  background: radial-gradient(1200px 600px at 10% 10%,
              rgba(37, 99, 235, .12), transparent),
              radial-gradient(1200px 600px at 90% 10%,
              rgba(22, 163, 74, .12), transparent),
              var(--hero-bg);
  color: var(--welcome-fg);
  padding: 48px 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--card-bd);
  box-shadow: var(--elev);
}
:root[data-theme="light"] .ui.hero.segment {
  background: radial-gradient(1200px 600px at 10% 10%,
              rgba(37, 99, 235, .08), transparent),
              radial-gradient(1200px 600px at 90% 10%,
              rgba(22, 163, 74, .08), transparent),
              var(--hero-bg);
}
.ui.hero.segment .ui.header {
  color: var(--welcome-fg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.ui.hero.segment .hero-lead {
  color: var(--welcome-fg); opacity: .95; margin-top: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
:root[data-theme="light"] .ui.hero.segment .hero-lead {
  opacity: 1; text-shadow: none;
}

/* --- Brand row ------------------------------------------------------- */
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.brand-text { font-weight: 700; letter-spacing: .06em; opacity: .9;
  color: var(--welcome-fg); }

/* --- Bullets --------------------------------------------------------- */
.hero-bullets { margin: 16px 0 20px 0; padding-left: 18px; color: var(--muted);}
.hero-bullets li { margin: 6px 0; }

/* --- CTAs ------------------------------------------------------------ */
.hero-ctas { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 8px 0; }
.ui.green.button {
  background-color: var(--welcome-button-background-color, var(--accent))
    !important;
  color: var(--welcome-button-text-color, #fff) !important;
  transition: background-color .2s, color .2s, box-shadow .2s;
}
.ui.green.button:hover {
  background-color: var(--welcome-button-hover-background-color, #15803d)
    !important;
  color: var(--welcome-button-hover-text-color, #fff) !important;
  border: var(--welcome-button-hover-border-color, none) !important;
  box-shadow: 0 0 0 3px var(--ring);
}
.ui.button:focus, .ui.basic.button:focus, .ui.basic.primary.button:focus {
  box-shadow: 0 0 0 3px var(--ring) !important; outline: none;
}

/* --- Previews -------------------------------------------------------- */
.preview {
  display: block; border-radius: var(--radius-lg);
  border: 1px solid var(--card-bd); overflow: hidden;
  background: var(--panel-bg);
}
.preview.small { margin-top: 12px; }
.preview-img { display: block; width: 100%; height: auto; }

/* --- Feature cards (lighter than panel, with sheen) ----------------- */
.cards-grid { margin-top: 8px !important; }
.feature-link { display: block; text-decoration: none; color: inherit; }
.feature-card {
  border-radius: var(--radius-lg) !important;
  background: var(--card-surface), var(--card-bg) !important;
  border: 1px solid var(--card-bd) !important;
  color: var(--welcome-fg) !important;
  transition: transform .15s, box-shadow .2s, border-color .2s,
              background-color .2s;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  /* defeat global .ui.card .content bg via variable */
  --card-background: transparent;
}
.feature-card .content .header { margin-top: 2px; }
.feature-card .description { color: var(--muted); }
.feature-card:hover, .feature-card:focus {
  transform: translateY(-2px);
  background: var(--card-surface), var(--card-bg-hover) !important;
  box-shadow: var(--elev), 0 1px 0 rgba(255,255,255,.06) inset;
  border-color: rgba(37, 99, 235, .30) !important;
}
.feature-card .content,
.feature-card .extra.content {
  background: none;
  background-color: transparent;
}
.feature-card .content .header {
  color: var(--welcome-fg) !important;   /* #E6E8EA on dark */
}
.feature-card .description {
  color: var(--muted) !important;        /* #98A2B3 on dark */
}

/* --- Feature detail sections ---------------------------------------- */
.features-detail { margin-top: 12px; }
.feature-section {
  margin-top: 18px; scroll-margin-top: 96px; border-radius: var(--radius-lg);
}
/* brief flash when navigated-to */
@keyframes flash {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,.0); }
  15% { box-shadow: 0 0 0 6px rgba(37,99,235,.25); }
  100% { box-shadow: 0 0 0 0 rgba(37,99,235,.0); }
}
.feature-section.flash { animation: flash 900ms ease-out 1; }
/* rhythm */
.feature-section .grid { align-items: center; }
.feature-section .text-col { padding-right: 8px; }
.feature-section.alt .text-col { order: 2; }
.feature-section.alt .image-col { order: 1; }

/* --- Optional: gradients on all segments ---------------------------- */
.hero-bg-all .ui.welcome.segment, .hero-bg-all .ui.landing.segment {
  background: radial-gradient(1200px 600px at 10% 10%,
              rgba(37, 99, 235, .06), transparent),
              radial-gradient(1200px 600px at 90% 10%,
              rgba(22, 163, 74, .06), transparent),
              var(--panel-bg);
}
:root[data-theme="light"] .hero-bg-all .ui.welcome.segment,
:root[data-theme="light"] .hero-bg-all .ui.landing.segment {
  background: radial-gradient(1200px 600px at 10% 10%,
              rgba(37, 99, 235, .04), transparent),
              radial-gradient(1200px 600px at 90% 10%,
              rgba(22, 163, 74, .04), transparent),
              var(--panel-bg);
}

/* --- Animations (reveal) -------------------------------------------- */
.reveal {
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s ease, transform .4s ease;
}
.reveal-on { opacity: 1; transform: translateY(0); }

/* --- Feature-card media slot (kept for future) ---------------------- */
.feature-media {
  position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-top: 1px solid var(--card-bd); background: var(--panel-bg);
}
.feature-media .preview-img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* --- Carousel (outside arrows, no overlay, no dots) ----------------- */
.carousel-row { display: flex; align-items: center; gap: 8px; }
.carousel-viewport { flex: 1 1 auto; margin: 0; }
.carousel-frame { display: none; }
.carousel-frame.is-active { display: block; }
.carousel-row .nav {
  width: 36px; height: 36px; padding: 0 !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--card-bd) !important;
  border-radius: 999px !important;
  box-shadow: var(--elev);
}
.carousel-row .nav:focus {
  box-shadow: 0 0 0 3px var(--ring) !important;
}
:root[data-theme="light"] .carousel-row .nav {
  background: var(--card-bg) !important;
}

/* Lightbox overlay (no close button) */
.lightbox {
  position: fixed;
  inset: 0;
  padding: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .75);
  z-index: 1000;
}
.lightbox.on { display: flex; }
.lightbox img {
  max-width: min(96vw, 1440px);
  max-height: 90vh;
  border-radius: 12px;
  box-shadow: var(--elev);
  cursor: zoom-out;
}
img.preview-img[data-full] { cursor: zoom-in; }


/* --- Trending ideas strip ------------------------------------------ */
.ideas-strip { padding: 14px 16px; }

.ideas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ideas-nav { display: flex; gap: 6px; }

/* Add padding-block so hover-lift/focus ring aren't cut off */
.ideas-viewport,
#ideasViewport {
  overflow: hidden;
  margin-top: 8px;
  position: relative;
  padding-block: 8px;   /* <-- new */
}

.ideas-track {
  display: flex;
  gap: 12px;
  will-change: transform;
  transition: transform .25s ease;
}
/* Idea Cards --------------------------------------------------------------- */
.idea-card {
  flex: 0 0 auto;
  cursor: pointer;
  width: 240px;                    /* hard width for stable paging */
  max-width: 240px;
  min-width: 220px;
  display: block;
  padding: 10px 12px;
  background: var(--card-surface), var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius-lg);
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
  transition: transform .15s ease, box-shadow .2s, border-color .2s,
              background-color .2s, background .2s;
}

/* Hover: lift + background + subtle inset shadow */
.idea-card:hover {
  transform: translateY(-2px);
  background: var(--card-surface), var(--card-bg-hover);
  box-shadow: var(--elev), 0 1px 0 rgba(255,255,255,.06) inset;
  border-color: rgba(37, 99, 235, .30);
}

/* Focus-visible (keyboard): same lift/background/border, but ring instead of inset */
.idea-card:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: var(--card-surface), var(--card-bg-hover);
  border-color: rgba(37, 99, 235, .30);
  box-shadow: var(--elev), 0 0 0 3px var(--ring);
}

/* Top row: name + tag ------------------------------------------------ */
.idea-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;             /* keep tag from stretching */
}

/* Left stack (symbol + name) should be shrinkable for ellipsis */
.idea-top > div:first-child {
  display: flex;
  flex-direction: column;
  min-width: 0;                    /* enables ellipsis below */
}

.idea-sym { font-weight: 700; letter-spacing: .02em; }

.idea-name {
  font-size: .9rem;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact pill tag (one line, capitalized) --------------------------- */
.idea-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--card-bd);
  border-radius: 999px;
  line-height: 1;
  font-size: .8rem;
  white-space: nowrap;
  text-transform: capitalize;      /* enforce “Very Cheap”, etc. */
  opacity: .95;
}
/* Accessibility: visible focus without changing text colors */
.idea-card:focus-visible {
  outline: none;
  box-shadow: var(--elev), 0 0 0 3px var(--ring);
}

/* Bottom row: price + change ---------------------------------------- */
.idea-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 8px;
}

.chg-pos { color: #16a34a; }
.chg-neg { color: #ef4444; }

/* Kill global link hover color inside idea cards */
.ideas-strip a.idea-card,
.ideas-strip a.idea-card:hover,
.ideas-strip a.idea-card:focus,
.ideas-strip a.idea-card:active {
  color: var(--welcome-fg) !important;   /* keep text tone stable */
  text-decoration: none !important;
}

.ideas-strip .idea-name { color: inherit; opacity: .85; }

/* nicer swipe feel; keep page scroll on touch ----------------------- */
/* let the strip handle horizontal gestures but keep vertical page scroll */
#ideasViewport { touch-action: pan-y; }
#ideasTrack    { touch-action: pan-y; }

/* optional cursor hint during drag */
#ideasViewport.dragging { cursor: grabbing; }

/* Ideas-strip nav buttons — override Semantic UI to use landing tokens */
:root:has(#landing-root) .ideas-nav .ui.icon.button {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;

  background: var(--card-bg) !important;
  border: 1px solid var(--card-bd) !important;
  color: var(--welcome-fg) !important;

  box-shadow: var(--elev);
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .12s;
}

/* Icon inherits text tone */
:root:has(#landing-root) .ideas-nav .ui.icon.button > .icon {
  color: inherit !important;
  opacity: .95;
}

/* Hover */
:root:has(#landing-root) .ideas-nav .ui.icon.button:hover {
  transform: translateY(-1px);
  background: var(--card-bg-hover) !important;
  border-color: rgba(37, 99, 235, .30) !important;
}

/* Focus (keyboard) */
:root:has(#landing-root) .ideas-nav .ui.icon.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Active press */
:root:has(#landing-root) .ideas-nav .ui.icon.button:active {
  transform: translateY(0);
}

/* Disabled (if ever used) */
:root:has(#landing-root) .ideas-nav .ui.icon.button:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ===================== Landing-scoped button system ===================== */
/* Base reset for ALL Semantic UI buttons on landing */
:root:has(#landing-root) .ui.button,
html.page-landing .ui.button {
  border-radius: var(--radius-lg) !important;
  font-weight: 600;
  box-shadow: none !important;
  transition: background-color .2s, border-color .2s, box-shadow .2s, transform .12s;
}

/* Solid green CTA */
:root:has(#landing-root) .ui.green.button,
html.page-landing .ui.green.button {
  background-color: var(--accent) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
}
:root:has(#landing-root) .ui.green.button:hover,
html.page-landing .ui.green.button:hover {
  background-color: #15803d !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Basic (outline) buttons */
:root:has(#landing-root) .ui.basic.button,
html.page-landing .ui.basic.button {
  background: transparent !important;
  color: var(--welcome-fg) !important;
  border: 1px solid var(--card-bd) !important;
}
:root:has(#landing-root) .ui.basic.button:hover,
html.page-landing .ui.basic.button:hover {
  background: var(--card-bg-hover) !important;
  border-color: rgba(37, 99, 235, .30) !important;
}
:root:has(#landing-root) .ui.basic.button:focus-visible,
html.page-landing .ui.basic.button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* Primary basic (blue outline) */
:root:has(#landing-root) .ui.basic.primary.button,
html.page-landing .ui.basic.primary.button {
  color: var(--link-color) !important;
  border-color: var(--link-color) !important;
}
:root:has(#landing-root) .ui.basic.primary.button:hover,
html.page-landing .ui.basic.primary.button:hover {
  color: var(--link-hover-color) !important;
  border-color: var(--link-hover-color) !important;
  background: var(--card-bg-hover) !important;
}

/* ===================== Ideas strip arrow buttons ===================== */
:root:has(#landing-root) .ideas-nav .ui.icon.button,
html.page-landing .ideas-nav .ui.icon.button {
  width: 36px; height: 36px; padding: 0 !important;
  background: var(--card-bg) !important;
  color: var(--welcome-fg) !important;
  border: 1px solid var(--card-bd) !important;
  border-radius: 999px !important;
  box-shadow: var(--elev);
}
:root:has(#landing-root) .ideas-nav .ui.icon.button:hover,
:root:has(#landing-root) .ideas-nav .ui.icon.button:focus,
html.page-landing .ideas-nav .ui.icon.button:hover,
html.page-landing .ideas-nav .ui.icon.button:focus {
  border-color: rgba(37, 99, 235, .30) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
/* Kill any “primary/inverted” bleed */
:root:has(#landing-root) .ideas-nav .ui.icon.button.primary,
:root:has(#landing-root) .ideas-nav .ui.icon.button.inverted,
html.page-landing .ideas-nav .ui.icon.button.primary,
html.page-landing .ideas-nav .ui.icon.button.inverted {
  background: var(--card-bg) !important;
  color: var(--welcome-fg) !important;
  border-color: var(--card-bd) !important;
}

/* ===================== Get Started section ===================== */
:root:has(#landing-root) .ui.welcome.segment a.ui.button,
html.page-landing .ui.welcome.segment a.ui.button {
  border-radius: 12px !important;
  border: 1px solid var(--card-bd) !important;
  background: var(--card-bg) !important;
  color: var(--welcome-fg) !important;
  text-decoration: none !important;
  box-shadow: none !important;
}
/* Green stays green but matches ring */
:root:has(#landing-root) .ui.welcome.segment .ui.green.button,
html.page-landing .ui.welcome.segment .ui.green.button {
  background-color: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}
:root:has(#landing-root) .ui.welcome.segment .ui.green.button:hover,
:root:has(#landing-root) .ui.welcome.segment .ui.green.button:focus,
html.page-landing .ui.welcome.segment .ui.green.button:hover,
html.page-landing .ui.welcome.segment .ui.green.button:focus {
  background-color: #15803d !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}
/* Basic in that section */
:root:has(#landing-root) .ui.welcome.segment .ui.basic.button,
html.page-landing .ui.welcome.segment .ui.basic.button {
  background: transparent !important;
}
:root:has(#landing-root) .ui.welcome.segment .ui.basic.button:hover,
:root:has(#landing-root) .ui.welcome.segment .ui.basic.button:focus,
html.page-landing .ui.welcome.segment .ui.basic.button:hover,
html.page-landing .ui.welcome.segment .ui.basic.button:focus {
  background: var(--card-bg-hover) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  color: var(--welcome-fg) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

/* ===================== Footer buttons ===================== */
/* Neutralize layout.css hover/focus for ALL footer buttons */
:root:has(#landing-root) #customFooter .ui.button:hover,
:root:has(#landing-root) #customFooter .ui.button:focus,
html.page-landing #customFooter .ui.button:hover,
html.page-landing #customFooter .ui.button:focus {
  background-color: transparent !important;
  border-color: var(--card-bd) !important;
  color: var(--welcome-fg) !important;
  box-shadow: none !important;
}

/* Footer CTA look (inverted primary basic) */
:root:has(#landing-root) #customFooter .ui.inverted.primary.basic.button,
html.page-landing #customFooter .ui.inverted.primary.basic.button {
  background: transparent !important;
  border: 1px solid var(--card-bd) !important;
  color: var(--welcome-fg) !important;
  border-radius: var(--radius-lg) !important;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
:root:has(#landing-root) #customFooter .ui.inverted.primary.basic.button:hover,
:root:has(#landing-root) #customFooter .ui.inverted.primary.basic.button:focus,
html.page-landing #customFooter .ui.inverted.primary.basic.button:hover,
html.page-landing #customFooter .ui.inverted.primary.basic.button:focus {
  /* fallback */
  background-color: var(--card-bg-hover) !important;
  /* nicer tone where supported */
  background-color: color-mix(in srgb, var(--panel-bg), white 6%) !important;
  border-color: rgba(37, 99, 235, .30) !important;
  color: var(--welcome-fg) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}


@media (pointer: coarse) { .ideas-nav { display: none; } }

/* Small screens: stack buttons below the image */
@media (max-width: 640px) {
  .carousel-row { flex-direction: column; align-items: stretch; }
  .carousel-row .nav { align-self: center; margin-top: 6px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .feature-card, .reveal, .ui.green.button { transition: none; }
}

/* Small screens */
@media (max-width: 767px) {
  .ui.hero.segment { padding: 28px 18px; }
  .hero-lead { font-size: 1rem; }
  .hero-bullets { font-size: .95rem; }
}