/* Page-scoped geometry. Applied AFTER July's legacy style.css to avoid global CSS bleed. */
body.cy-site {
  font-family: var(--cy-font-ui);
  line-height: 1.6;
  min-width: 0;
  --radius-lg: var(--cy-radius-lg);
  --radius-md: var(--cy-radius);
  --header-height: var(--cy-header-height);
}
body.cy-site :is(button, input, select, textarea) { font-family: inherit; }
body.cy-site :is(main, section, article, aside, .container, .glass-card, .p-card, .pricing-card) { min-width: 0; }
body.cy-site .container { width: 100%; max-width: calc(var(--cy-page-max) + 2 * var(--cy-gutter)); padding-inline: var(--cy-gutter); margin-inline: auto; }
body.cy-site .section { padding-block: var(--cy-section-gap); }
body.cy-site .section-header { margin-bottom: clamp(24px, 4vw, 56px); }
body.cy-site .section-title { font-size: var(--cy-h2); line-height: 1.18; letter-spacing: -.025em; }
body.cy-site .section-subtitle { max-width: 66ch; margin-inline: auto; line-height: 1.65; }
body.cy-site .hero-title { font-size: clamp(2.65rem, 6.2vw, 5.4rem); line-height: 1.08; letter-spacing: -.045em; }
body.cy-site .btn { min-height: 44px; max-width: 100%; padding-inline: clamp(14px, 2vw, 24px); font-size: .94rem; line-height: 1.25; text-align: center; }
body.cy-site :is(.btn-sm, .ctrl-tag) { min-height: 34px; font-size: .84rem; }
body.cy-site .glass-card { border-radius: var(--cy-radius-lg); }
body.cy-site .p-card { padding: clamp(18px, 2.6vw, 32px); }
body.cy-site :is(.p-grid, .grid-3) { gap: clamp(14px, 2vw, 24px); }
body.cy-site :is(.glass-panel, .pricing-card) { border-radius: var(--cy-radius); }
body.cy-site :is(.card-title, .pricing-title) { font-size: var(--cy-h3); line-height: 1.35; }
body.cy-site :is(input, select, textarea, button, a) { -webkit-tap-highlight-color: transparent; }
body.cy-site :is(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--cy-gold-bright); outline-offset: 3px; }
body.cy-site :is(.pricing-value, .stat-number, .metric-value, .stat-value) { font-variant-numeric: tabular-nums; }
body.cy-site :is(img, video, svg) { max-width: 100%; }
body.cy-site .nav-links { gap: clamp(4px, 1vw, 14px); }
body.cy-site .nav-link { font-size: .88rem; padding-inline: clamp(8px, 1.1vw, 13px); }
body.cy-site .header-actions { gap: clamp(7px, 1vw, 14px); }
body.cy-site header#header .container { max-width: calc(var(--cy-page-max) + 2 * var(--cy-gutter)); }
body.cy-site .stats-container { max-width: 100%; }
/* Home command selector: old nowrap flex row forced 495px-wide mobile layouts. */
body.cy-home .tabs-container { max-width: 100%; padding: clamp(18px, 4vw, 40px) !important; border-radius: var(--cy-radius-lg) !important; }
body.cy-home .tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-width: 0; margin-bottom: clamp(18px, 3vw, 32px) !important; }
body.cy-home .tab-btn { padding: 10px 16px !important; font-size: .79rem !important; line-height: 1.25; letter-spacing: .02em; white-space: normal; min-width: 0; }
body.cy-home .tab-content { max-width: 100%; min-width: 0; overflow-wrap: anywhere; }
body.cy-home .tab-content :is(pre, code) { max-width: 100%; overflow-wrap: anywhere; }
body.cy-home .tab-content pre { overflow-x: auto; }
body.cy-home .hero-content { min-width: 0; }
/* Documents keep a narrower reading column without changing the site's overall gutter. */
body.cy-docs .docs-container { width: 100%; max-width: calc(var(--cy-page-max) + 2 * var(--cy-gutter)); padding-inline: var(--cy-gutter); gap: clamp(18px, 2.5vw, 32px); }
body.cy-docs .docs-sidebar { width: clamp(230px, 22vw, 280px); }
body.cy-docs .docs-content { min-width: 0; }
/* Consistent premium/setting page tops; don't modify functional form fields. */
body.cy-premium main { padding-inline: var(--cy-gutter); }
body.cy-premium .pricing-title { font-size: var(--cy-h3); }
body.cy-premium .pricing-value { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
body.cy-settings .dashboard-header-modern h1 { font-size: var(--cy-h2); }
body.cy-settings .server-grid-modern { gap: var(--cy-s4); }
body.cy-profile :is(.profile-main, .profile-container) { max-width: min(100%, var(--cy-page-max)); }
@media (max-width: 1024px) {
  body.cy-site .nav-links { width: min(340px, 88vw); max-width: 100%; }
  body.cy-site .nav-link { font-size: 1rem; padding-block: 12px; }
  body.cy-site .header-actions { margin-left: auto; }
}
@media (max-width: 768px) {
  body.cy-site .section { padding-block: clamp(46px, 9vw, 70px); }
  body.cy-site .section-header { margin-bottom: 26px; }
  body.cy-site .p-card { padding: 20px; }
  body.cy-home .hero-title { font-size: clamp(2.3rem, 11vw, 3.5rem) !important; }
  body.cy-home .hero-content { padding-top: max(84px, var(--cy-header-height)); }
  body.cy-home .tabs-container { padding: 18px !important; }
  body.cy-home .tabs { justify-content: flex-start; }
  body.cy-home .tab-btn { flex: 1 1 auto; justify-content: center; padding: 9px 12px !important; }
  body.cy-home .hero-cta { gap: 10px; flex-wrap: wrap; }
  body.cy-home .stats-container { gap: 14px; }
  body.cy-docs .docs-container { display: block; }
  body.cy-docs .docs-sidebar { width: 100%; position: static; height: auto; max-height: 280px; margin-bottom: 20px; }
}
@media (max-width: 480px) {
  body.cy-site .container { padding-inline: 16px; }
  body.cy-site .header-actions .btn { padding-inline: 12px; }
  body.cy-site .hero-desc { max-width: 100%; }
  body.cy-site :is(.section-title, .dashboard-header-modern h1) { overflow-wrap: break-word; }
  body.cy-home .tab-btn { flex: 1 1 calc(50% - 8px); }
  body.cy-home .tabs-container { border-radius: 18px !important; }
  body.cy-home .tab-content { font-size: .91rem; }
  body.cy-site .footer-content { gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.cy-site *, body.cy-site *::before, body.cy-site *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Decorative 600px absolute glows must not expand the mobile layout viewport. */
body.cy-site .section > div[style*="width: 600px"] {
  width: min(600px, 100%) !important;
  max-width: 100%;
  pointer-events: none;
}
body.cy-home .hero { overflow: clip; }

/* Public premium cards shouldn't waste most of the viewport on a blank hero. */
body.cy-premium main { padding-top: var(--cy-header-height) !important; }
body.cy-premium #hero { min-height: clamp(300px, 39vh, 480px) !important; padding: clamp(48px, 5.5vw, 86px) 0 !important; }
body.cy-premium .pricing-card .btn { min-width: 0; }
body.cy-premium .features-list li { font-size: .92rem; line-height: 1.5; }

/* Narrow screens: legacy 320px minimum grid and 15/20px inline table padding caused clipped content. */
body.cy-commands .cmd-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  gap: clamp(12px, 2.2vw, 22px);
}
body.cy-commands .cmd-card { padding: clamp(16px, 2.3vw, 26px); }
body.cy-premium table { width: 100%; max-width: 100%; table-layout: fixed; }
body.cy-premium table :is(th, td) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  body.cy-premium table :is(th, td) { padding: 7px 5px !important; font-size: clamp(.68rem, 2.6vw, .85rem); line-height: 1.5; }
  body.cy-premium .p-card.featured { transform: none; }
  body.cy-premium .pricing-card { max-width: 100%; }
  body.cy-commands .cmd-card { padding: 16px; }
}

/* Shared, accessible navigation (July design, modern information architecture). */
body.cy-site .cy-public-header .nav-links { display: flex; align-items: center; gap: clamp(2px,.35vw,7px); }
body.cy-site .cy-public-header .nav-link { font-size: .84rem; padding: 9px clamp(8px,.78vw,13px); white-space: nowrap; }
body.cy-site .cy-public-header .nav-more-item { position: relative; }
body.cy-site .cy-public-header .nav-more { position: relative; }
body.cy-site .cy-public-header .nav-more > summary {
  display: flex; gap: 5px; align-items: center; cursor: pointer; list-style: none; border-radius: 100px;
}
body.cy-site .cy-public-header .nav-more > summary::-webkit-details-marker { display: none; }
body.cy-site .cy-public-header .nav-more > summary::after { content: '⌄'; font-size: .9em; transition: transform .16s; }
body.cy-site .cy-public-header .nav-more[open] > summary::after { transform: rotate(180deg); }
body.cy-site .cy-public-header .nav-more[open] > summary,
body.cy-site .cy-public-header .nav-more[data-current-section] > summary { color: var(--cy-gold); background: rgba(212,175,55,.07); }
body.cy-site .cy-public-header .nav-more-menu {
  position: absolute; right: 0; top: calc(100% + 9px); min-width: 240px;
  display: flex; flex-direction: column; gap: 4px; padding: 9px;
  border: 1px solid rgba(212,175,55,.22); border-radius: 14px;
  background: rgba(12,12,15,.98); box-shadow: 0 20px 45px rgba(0,0,0,.5);
  backdrop-filter: blur(22px); z-index: 10;
}
body.cy-site .cy-public-header .nav-more:not([open]) .nav-more-menu { display: none; }
body.cy-site .cy-public-header .nav-more-link {
  display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none;
  color: var(--cy-muted); white-space: nowrap; font-size: .9rem;
}
body.cy-site .cy-public-header .nav-more-link:hover,
body.cy-site .cy-public-header .nav-more-link.active { color: var(--cy-gold); background: rgba(212,175,55,.09); }
body.cy-site .cy-public-header .header-actions { flex-shrink: 0; }
body.cy-site .cy-public-header .brand { flex-shrink: 0; }
body.cy-site .cy-public-header .header-actions #lang-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: 20px; min-height: 38px;
}
body.cy-site .cy-public-header .header-actions .login-btn {
  white-space: nowrap; min-height: 40px; padding-inline: 14px; font-size: .87rem;
}
body.cy-site .cy-public-header .hamburger {
  border: 1px solid var(--cy-line); color: var(--cy-text); cursor: pointer;
}
body.cy-site .cy-public-header .hamburger:focus-visible,
body.cy-site .cy-public-header .nav-more > summary:focus-visible {
  outline: 2px solid var(--cy-gold-bright); outline-offset: 3px;
}
body.cy-site .cy-public-header .cy-user-avatar {
  width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
}
body.cy-playlist .legacy-page {
  margin-top: calc(var(--cy-header-height) + 42px);
  margin-bottom: clamp(44px, 7vw, 90px);
  max-width: min(100%, calc(var(--cy-page-max) + 2 * var(--cy-gutter)));
  padding-inline: var(--cy-gutter);
}
@media (max-width: 1180px) and (min-width: 1025px) {
  body.cy-site .cy-public-header .brand-name { font-size: 1.25rem; }
  body.cy-site .cy-public-header .nav-link { font-size: .79rem; padding-inline: 7px; }
  body.cy-site .cy-public-header .header-actions { gap: 6px; }
}
@media (max-width: 1024px) {
  body.cy-site .cy-public-header .nav-links {
    display: flex; align-items: stretch; gap: 3px; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--cy-header-height) + 18px) 24px 32px;
    height: 100dvh; max-height: 100dvh;
  }
  body.cy-site .cy-public-header .nav-links > li { width: 100%; flex-shrink: 0; }
  body.cy-site .cy-public-header .nav-link { display: flex; width: 100%; font-size: 1rem; padding: 12px 10px; }
  body.cy-site .cy-public-header .nav-more { width: 100%; }
  body.cy-site .cy-public-header .nav-more > summary { border-radius: 10px; }
  body.cy-site .cy-public-header .nav-more-menu {
    position: static; min-width: 0; width: 100%; margin: 6px 0 12px; padding: 4px 0 4px 10px;
    box-shadow: none; border: 0; border-left: 2px solid rgba(212,175,55,.24); border-radius: 0;
    background: transparent; backdrop-filter: none;
  }
  body.cy-site .cy-public-header .nav-more-link { padding: 11px 10px; white-space: normal; }
  body.cy-site .cy-public-header #mobile-login-btn-tray { width: 100%; margin-top: 6px; justify-content: center; }
  body.cy-site .cy-public-header .mobile-nav-btn { min-height: 44px; width: 100%; text-align: left; padding: 10px; }
}
@media (max-width: 480px) {
  body.cy-site .cy-public-header .brand-name { font-size: 1.3rem; }
  body.cy-site .cy-public-header .header-actions .login-btn { font-size: .82rem; padding-inline: 12px; }
  body.cy-site .cy-public-header .header-actions #lang-btn { padding-inline: 9px; }
  body.cy-playlist .legacy-page { margin-top: calc(var(--cy-header-height) + 22px); padding-inline: 16px; }
}

/* Readable 14px desktop links. Less-used help/legal links are in More. */
@media (min-width: 1025px) {
  body.cy-site .cy-public-header .nav-link { font-size: .88rem; padding-inline: clamp(9px, .9vw, 14px); }
}

/* Keep profile names from stretching the shared Header after Discord login. */
body.cy-site .cy-public-header .login-btn.logged-in,
body.cy-site .cy-public-header .header-actions .login-btn {
  max-width: clamp(120px, 16vw, 170px);
  overflow: hidden;
}
body.cy-site .cy-public-header .header-actions .login-btn > div { min-width: 0; max-width: 100%; }
body.cy-site .cy-public-header .header-actions .user-name-header,
body.cy-site .cy-public-header .header-actions .login-btn > span {
  display: block; min-width: 0; max-width: 100%; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
@media (max-width: 480px) {
  body.cy-site .cy-public-header .header-actions .login-btn { max-width: 116px; }
  body.cy-site .cy-public-header .header-actions .login-btn .cy-user-avatar { flex-shrink: 0; }
}