:root { color-scheme: dark; }
* { box-sizing: border-box; }
body.discover-page {
  --bg: #0c1020;
  --fg: #f8fafc;
  --fg-secondary: #c3c8dd;
  --card-bg: #202239;
  --border: rgba(150, 137, 255, 0.24);
  --primary: #7788ff;
  --primary-hover: #9ca8ff;
  background: #0c1020;
  background-attachment: scroll;
  background-image: none;
  color: var(--fg);
  display: block;
  font-family: Inter, system-ui, sans-serif;
  margin: 0;
  min-height: 100vh;
  padding: 0;
}
.discover-shell {
  background:
    radial-gradient(circle at 76% 18%, rgba(121, 54, 218, 0.34), transparent 29%),
    radial-gradient(circle at 18% 65%, rgba(37, 99, 235, 0.16), transparent 30%),
    linear-gradient(135deg, #0c1020 0%, #12122a 54%, #0c1020 100%);
  min-height: calc(100vh - 118px);
}
.discover-nav {
  margin: 0 auto;
  max-width: 1180px;
  padding: 22px 20px 18px;
}
.discover-nav__active { color: #fff !important; }
.discover-nav__active::after { background: #14b8a6; border-radius: 99px; content: ""; display: block; height: 2px; margin-top: 5px; width: 100%; }
.discover-main { margin: 0 auto; max-width: 1120px; padding: 0 20px 82px; }
.discover-main a { color: #a7f3d0; text-underline-offset: 4px; }
.hero { max-width: 780px; padding: 94px 0 54px; }
.eyebrow { color: #a7f3d0; font-size: .78rem; font-weight: 800; letter-spacing: .1em; margin: 0 0 13px; text-transform: uppercase; }
h1, h2 { color: #fff; font-family: Poppins, Inter, sans-serif; }
h1 { font-size: clamp(3rem, 6.4vw, 5.15rem); letter-spacing: -.045em; line-height: .98; margin: 0 0 22px; }
h2 { font-size: clamp(1.42rem, 2.4vw, 2rem); line-height: 1.2; margin: 0 0 12px; }
p { line-height: 1.75; }
.hero > p:last-child { color: #d9def0; font-size: 1.14rem; line-height: 1.65; margin: 0; max-width: 690px; }
.trails { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.trail {
  background: linear-gradient(145deg, rgba(43, 43, 71, .96), rgba(26, 28, 48, .94));
  border: 1px solid rgba(170, 161, 255, .25);
  border-radius: 14px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .16);
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: 30px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.trail:nth-child(4n + 2) { background: linear-gradient(145deg, rgba(54, 38, 83, .95), rgba(27, 28, 50, .95)); }
.trail:nth-child(4n + 3) { background: linear-gradient(145deg, rgba(25, 67, 80, .88), rgba(25, 29, 50, .96)); }
.trail:nth-child(4n) { background: linear-gradient(145deg, rgba(61, 45, 88, .9), rgba(27, 29, 50, .96)); }
.trail:hover { border-color: rgba(126, 140, 255, .7); box-shadow: 0 22px 48px rgba(32, 21, 93, .32); transform: translateY(-3px); }
.trail h2 a { color: #fff; text-decoration: none; }
.trail h2 a:hover { color: #c7d2fe; }
.trail p { color: #d3d7e7; margin: 0 0 16px; }
.trail .muted { color: #aeb6d2; font-size: .88rem; margin-top: auto; }
.button, .save-panel button {
  align-self: flex-start;
  background: #14b8a6;
  border: 1px solid #14b8a6;
  border-radius: 8px;
  color: #07131f;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-weight: 800;
  margin-top: 3px;
  padding: 12px 17px;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}
.button:hover, .save-panel button:hover { background: #2dd4bf; color: #07131f; text-decoration: none; transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .6; }
.editorial {
  background: rgba(32, 34, 57, .64);
  border: 1px solid rgba(150, 137, 255, .18);
  border-radius: 14px;
  color: #d8dced;
  margin: 42px 0;
  max-width: 820px;
  padding: 26px 28px;
}
.editorial h2 { color: #c7d2fe; font-size: 1.28rem; }
.editorial p { margin: 0; }
.picks { display: grid; gap: 18px; }
.pick { background: rgba(31, 33, 55, .82); border: 1px solid rgba(150, 137, 255, .22); border-radius: 13px; padding: 27px 30px; }
.pick h2 { font-size: 1.55rem; }
.pick p { color: #d7dbee; max-width: 850px; }
.pick .eyebrow { color: #a7f3d0; }
.caveat { border-left: 3px solid rgba(20, 184, 166, .75); color: #b9c2da !important; padding-left: 16px; }
.muted { color: #aeb6d2; font-size: .88rem; }
.save-panel { background: linear-gradient(125deg, rgba(20, 184, 166, .16), rgba(68, 53, 136, .34)); border: 1px solid rgba(94, 234, 212, .3); border-radius: 14px; margin: 44px 0 0; padding: 30px; }
.save-panel p { color: #dce4ee; max-width: 770px; }
.save-panel label { align-items: flex-start; color: #e5e7f2; display: flex; gap: 12px; line-height: 1.6; margin: 18px 0; }
.save-panel input { accent-color: #14b8a6; margin-top: 6px; }
.save-panel #status { color: #bcefe6; }
.discover-footer { background: #17182a; box-shadow: none; margin: 0; padding: 22px 20px; width: 100%; }
.discover-footer .footer-content { max-width: 1120px; }
.discover-footer .footer-links { gap: 18px 26px; }
.discover-footer .footer-link { color: #aeb9ff; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #5eead4; outline-offset: 4px; }
@media (max-width: 760px) {
  .discover-nav { padding-top: 18px; }
  .discover-nav__active::after { display: none; }
  .hero { padding: 58px 0 38px; }
  .trails { grid-template-columns: 1fr; }
  .trail { min-height: 0; padding: 25px; }
  .pick, .editorial, .save-panel { padding: 23px; }
}
@media (max-width: 520px) {
  .discover-main { padding-inline: 16px; }
  .discover-nav { padding-inline: 16px; }
  .public-site-nav__links { gap: 8px 13px; }
  .public-site-nav__links a { font-size: .85rem; }
  h1 { font-size: clamp(2.65rem, 14vw, 3.55rem); }
}