/* Rookie Quest public-page polish pass — calmer hierarchy across desktop and mobile. */

/* ---------- Rookie Quest brand hub ---------- */
#root .rq-brand-page {
  background:
    radial-gradient(circle at 78% 6%, rgba(124, 203, 255, 0.09), transparent 26rem),
    radial-gradient(circle at 10% 28%, rgba(255, 45, 170, 0.055), transparent 24rem),
    #071522 !important;
}

#root .rq-brand-nav {
  min-height: 68px !important;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr) !important;
  gap: 16px !important;
  padding: 9px clamp(16px, 3vw, 44px) !important;
  background: rgba(7, 21, 34, 0.96) !important;
}

#root .rq-brand-mark,
#root .rqk-auth-brand__sigil,
#root .rq-brand-emblem-core {
  color: transparent !important;
  font-size: 0 !important;
  background-color: #0c2234 !important;
  background-image: url('/brand/rqk-logo-mini.svg') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 88% !important;
}

#root .rq-brand-mark {
  width: 42px !important;
  height: 42px !important;
  flex-basis: 42px !important;
  border: 0 !important;
  border-radius: 11px !important;
}

#root .rq-brand-mark-small {
  width: 30px !important;
  height: 30px !important;
  flex-basis: 30px !important;
  border-radius: 8px !important;
}

#root .rq-brand-lockup-text strong {
  font-size: 18px !important;
}

#root .rq-brand-nav-links button {
  padding: 9px 10px !important;
  font-size: 12px !important;
}

#root .rq-brand-nav-actions {
  gap: 6px !important;
}

#root .rq-brand-nav-signin,
#root .rq-brand-nav-cta {
  min-height: 40px !important;
}

#root .rq-brand-hero {
  width: min(1120px, calc(100% - 32px)) !important;
  min-height: 540px !important;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.72fr) !important;
  gap: clamp(30px, 5vw, 64px) !important;
  padding: 54px 0 62px !important;
}

#root .rq-brand-hero h1 {
  margin: 16px 0 14px !important;
  font-size: clamp(46px, 6vw, 76px) !important;
  line-height: 0.96 !important;
}

#root .rq-brand-hero-intro {
  max-width: 650px !important;
  font-size: clamp(16px, 1.7vw, 19px) !important;
  line-height: 1.58 !important;
}

#root .rq-brand-hero-actions {
  margin-top: 22px !important;
}

#root .rq-brand-mantra {
  margin-top: 28px !important;
}

#root .rq-brand-hero-emblem {
  width: min(320px, 34vw) !important;
  border-color: rgba(124, 203, 255, 0.12) !important;
  background: rgba(12, 34, 52, 0.44) !important;
}

#root .rq-brand-emblem-core {
  width: 104px !important;
  height: 104px !important;
  border-radius: 23px !important;
  border-color: rgba(124, 203, 255, 0.36) !important;
  background-size: 84% !important;
}

#root .rq-brand-emblem-item {
  width: 52px !important;
  height: 52px !important;
  border-radius: 13px !important;
}

#root .rq-brand-definition,
#root .rq-brand-connected,
#root .rq-brand-final-cta,
#root .rq-brand-footer {
  width: min(1120px, calc(100% - 32px)) !important;
}

#root .rq-brand-definition {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important;
  gap: 30px !important;
  padding: clamp(24px, 3.5vw, 40px) !important;
  border-radius: 16px !important;
}

#root .rq-brand-definition h2,
#root .rq-brand-section-heading h2,
#root .rq-brand-connected h2,
#root .rq-brand-final-cta h2 {
  font-size: clamp(28px, 3.5vw, 43px) !important;
}

#root .rq-brand-ecosystem {
  width: min(1120px, calc(100% - 32px)) !important;
  padding: 72px 0 62px !important;
}

#root .rq-brand-section-heading {
  max-width: 680px !important;
  margin-bottom: 24px !important;
}

#root .rq-brand-product-grid {
  gap: 14px !important;
}

#root .rq-brand-product {
  min-height: 278px !important;
  padding: clamp(22px, 3vw, 30px) !important;
  border-radius: 14px !important;
}

#root .rq-brand-product-verb {
  margin-top: 18px !important;
}

#root .rq-brand-product > p:not(.rq-brand-product-verb) {
  margin: 10px 0 18px !important;
  line-height: 1.55 !important;
}

#root .rq-brand-connected {
  gap: 24px !important;
  padding: clamp(24px, 3.5vw, 40px) !important;
  border-radius: 16px !important;
}

#root .rq-brand-connected-icon {
  width: 54px !important;
  height: 54px !important;
}

#root .rq-brand-final-cta {
  margin-top: 62px !important;
  margin-bottom: 62px !important;
  padding: clamp(32px, 4.5vw, 52px) !important;
  border-radius: 16px !important;
}

#root .rq-brand-footer {
  padding: 24px 0 30px !important;
}

/* ---------- Keeper marketing page ---------- */
#root .landing-page-final {
  padding: clamp(12px, 2vw, 24px) !important;
  gap: 18px !important;
}

#root .landing-page-final .landing-final-nav,
#root .landing-page-final .landing-final-main,
#root .landing-page-final .landing-final-footer {
  width: min(1120px, 100%) !important;
}

#root .landing-page-final .landing-final-nav {
  min-height: 60px !important;
  padding: 6px 8px !important;
  border-radius: 14px !important;
  background: rgba(7, 21, 34, 0.96) !important;
  backdrop-filter: blur(14px) !important;
}

#root .landing-page-final .landing-logo-button {
  width: 46px !important;
  height: 46px !important;
}

#root .landing-page-final .landing-button {
  border-radius: 8px !important;
}

#root .landing-page-final .landing-final-main {
  gap: clamp(28px, 3.5vw, 44px) !important;
}

#root .landing-page-final .landing-final-hero {
  min-height: min(610px, calc(100dvh - 112px)) !important;
  grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr) !important;
  gap: clamp(26px, 3.6vw, 42px) !important;
  padding: 28px 0 10px !important;
}

#root .landing-page-final .landing-hero-copy {
  gap: 12px !important;
}

#root .landing-page-final .landing-final-logo-wrap {
  width: min(350px, 100%) !important;
}

#root .landing-page-final .landing-final-logo-wrap img,
#root .landing-page-final .landing-final-logo-wrap svg {
  width: min(340px, 100%) !important;
}

#root .landing-page-final h1 {
  font-size: clamp(40px, 5.4vw, 66px) !important;
  line-height: 1 !important;
}

#root .landing-page-final .landing-final-intro {
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.5 !important;
}

#root .landing-page-final .landing-preview-panel {
  min-height: 440px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#root .landing-page-final .landing-preview-body {
  gap: 10px !important;
  padding: 18px !important;
}

#root .landing-page-final .landing-preview-spotlight {
  min-height: 150px !important;
  padding: 16px !important;
  border-radius: 9px !important;
}

#root .landing-page-final .landing-preview-row {
  padding: 11px 12px !important;
  border-radius: 8px !important;
}

#root .landing-page-final .landing-final-features,
#root .landing-page-final .landing-benefit-grid,
#root .landing-page-final .landing-two-columns,
#root .landing-page-final .landing-roadmap,
#root .landing-page-final .landing-final-strip,
#root .landing-page-final .landing-marketing-block,
#root .landing-page-final .landing-start-paths,
#root .landing-page-final .landing-final-cta,
#root .landing-page-final .landing-status-panel,
#root .landing-page-final .landing-faq-panel,
#root .landing-page-final .landing-principles-panel,
#root .landing-page-final .landing-table-shift-panel {
  width: min(1040px, 100%) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

#root .landing-page-final .landing-final-feature,
#root .landing-page-final .landing-benefit-card,
#root .landing-page-final .landing-roadmap article,
#root .landing-page-final .landing-two-columns article,
#root .landing-page-final .landing-start-card,
#root .landing-page-final .landing-status-card,
#root .landing-page-final .landing-principle-card {
  padding: clamp(17px, 2vw, 22px) !important;
}

/* ---------- Login / registration ---------- */
#root .rqk-auth-page {
  padding: clamp(14px, 2vw, 28px) !important;
  background:
    radial-gradient(circle at 14% 8%, rgba(124, 203, 255, 0.10), transparent 28rem),
    radial-gradient(circle at 84% 18%, rgba(255, 45, 170, 0.07), transparent 26rem),
    #071522 !important;
}

#root .rqk-auth-page::before {
  opacity: 0.16 !important;
  background-size: 52px 52px !important;
}

#root .rqk-auth-page::after {
  background: radial-gradient(circle at 50% 45%, transparent 0%, rgba(0, 0, 0, 0.28) 100%) !important;
}

#root .rqk-auth-ambient span {
  opacity: 0.34 !important;
  background: radial-gradient(circle, rgba(124, 203, 255, 0.13), transparent 68%) !important;
}

#root .rqk-auth-ambient span:nth-child(2) {
  background: radial-gradient(circle, rgba(255, 45, 170, 0.11), transparent 68%) !important;
}

#root .rqk-auth-shell {
  width: min(1040px, 100%) !important;
  min-height: calc(100dvh - clamp(28px, 4vw, 56px)) !important;
  gap: 14px !important;
}

#root .rqk-auth-page .rqk-auth-brand {
  min-height: 48px !important;
  gap: 10px !important;
  padding: 5px 12px 5px 6px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124, 203, 255, 0.22) !important;
  background: rgba(12, 34, 52, 0.84) !important;
}

#root .rqk-auth-brand__sigil {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  background-size: 94% !important;
}

#root .rqk-auth-brand__text strong {
  font-size: 0.88rem !important;
}

#root .rqk-auth-brand__text small {
  font-size: 0.68rem !important;
}

#root .rqk-auth-layout {
  min-height: min(650px, calc(100dvh - 126px)) !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 420px) !important;
  gap: clamp(26px, 3.5vw, 40px) !important;
}

#root .rqk-auth-hero,
#root .rqk-auth-card,
#root .rqk-auth-feature-card,
#root .rqk-auth-note,
#root .rqk-auth-assurance,
#root .rqk-auth-next-steps {
  border-color: rgba(124, 203, 255, 0.18) !important;
  background: #0c2234 !important;
  background-image: none !important;
  box-shadow: none !important;
}

#root .rqk-auth-hero,
#root .rqk-auth-card {
  border-radius: 20px !important;
  backdrop-filter: none !important;
}

#root .rqk-auth-hero::before,
#root .rqk-auth-card::before {
  opacity: 0.5 !important;
  background: linear-gradient(145deg, rgba(124, 203, 255, 0.04), transparent 40%) !important;
}

#root .rqk-auth-hero {
  padding: clamp(28px, 3.8vw, 40px) !important;
}

#root .rqk-auth-hero h2 {
  font-size: clamp(2.2rem, 4.3vw, 3.65rem) !important;
  line-height: 0.98 !important;
}

#root .rqk-auth-hero > p:not(.rqk-auth-kicker) {
  margin-top: 16px !important;
  font-size: 0.98rem !important;
  line-height: 1.55 !important;
}

#root .rqk-auth-kicker,
#root .rqk-auth-heading p,
#root .rqk-auth-assurance > span,
#root .rqk-auth-next-steps > span {
  color: #7ccbff !important;
}

#root .rqk-auth-feature-grid {
  gap: 9px !important;
  margin-top: 22px !important;
}

#root .rqk-auth-feature-card {
  padding: 11px !important;
  border-radius: 12px !important;
  background: rgba(16, 43, 64, 0.82) !important;
}

#root .rqk-auth-feature-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 9px !important;
  background: #102b40 !important;
  color: #7ccbff !important;
  border: 1px solid rgba(124, 203, 255, 0.25) !important;
}

#root .rqk-auth-preview-card {
  display: none !important;
}

#root .rqk-auth-card {
  padding: clamp(22px, 3vw, 28px) !important;
}

#root .rqk-auth-heading {
  margin-bottom: 14px !important;
}

#root .rqk-auth-heading::after {
  margin-top: 14px !important;
  background: linear-gradient(90deg, rgba(124, 203, 255, 0.42), rgba(255, 255, 255, 0.05)) !important;
}

#root .rqk-auth-heading h1 {
  font-size: clamp(1.9rem, 3.4vw, 2.65rem) !important;
  line-height: 1.02 !important;
}

#root .rqk-auth-heading > span {
  margin-top: 9px !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

#root .rqk-auth-mode-toggle {
  gap: 4px !important;
  padding: 4px !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  background: #071522 !important;
  border-color: rgba(124, 203, 255, 0.16) !important;
}

#root .rqk-auth-page .rqk-auth-mode-toggle button {
  min-height: 38px !important;
  border-radius: 9px !important;
}

#root .rqk-auth-page .rqk-auth-mode-toggle button.is-active {
  background: #102b40 !important;
  border-color: #ff2daa !important;
}

#root .rqk-auth-note,
#root .rqk-auth-assurance {
  gap: 7px !important;
  padding: 10px 11px !important;
  margin-bottom: 12px !important;
  border-radius: 11px !important;
  font-size: 0.82rem !important;
}

#root .rqk-auth-page .rqk-auth-next-steps,
#root .rqk-auth-page .rqk-auth-trust-row {
  display: none !important;
}

#root .rqk-auth-form {
  gap: 11px !important;
}

#root .rqk-auth-input-group {
  gap: 5px !important;
}

#root .rqk-auth-input-shell {
  min-height: 48px !important;
  border-radius: 11px !important;
  background: #071522 !important;
  border-color: rgba(124, 203, 255, 0.2) !important;
}

#root .rqk-auth-input-shell:focus-within {
  border-color: #7ccbff !important;
  background: #091b2b !important;
  box-shadow: 0 0 0 3px rgba(124, 203, 255, 0.10) !important;
}

#root .rqk-auth-page .rqk-auth-primary {
  min-height: 48px !important;
  border-radius: 11px !important;
  border-color: #ff2daa !important;
  background: #102b40 !important;
}

#root .rqk-auth-page .rqk-auth-primary:hover:not(:disabled),
#root .rqk-auth-page .rqk-auth-primary:focus-visible:not(:disabled) {
  background: #14344c !important;
  border-color: #7ccbff !important;
}

#root .rqk-auth-page--login .rqk-auth-card {
  display: grid !important;
}

#root .rqk-auth-page--login .rqk-auth-heading { order: 1; }
#root .rqk-auth-page--login .rqk-auth-mode-toggle { order: 2; }
#root .rqk-auth-page--login .rqk-auth-note { order: 3; }
#root .rqk-auth-page--login .rqk-auth-assurance { display: none !important; }
#root .rqk-auth-page--login .rqk-auth-form { order: 4; }
#root .rqk-auth-page--login .rqk-google-access { order: 5; margin-top: 16px !important; margin-bottom: 0 !important; }
#root .rqk-auth-page--login .rqk-demo-access { order: 6; margin-top: 12px !important; margin-bottom: 0 !important; }

#root .rqk-demo-access,
#root .rqk-google-access {
  border-radius: 12px !important;
  border-color: rgba(124, 203, 255, 0.22) !important;
  background: rgba(16, 43, 64, 0.64) !important;
}

#root .rqk-demo-access {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px 14px !important;
  padding: 11px 12px !important;
}

#root .rqk-demo-access p,
#root .rqk-google-access p {
  font-size: 0.78rem !important;
  line-height: 1.4 !important;
}

#root .rqk-auth-page .rqk-demo-access__button {
  width: auto !important;
  min-width: 168px !important;
  min-height: 42px !important;
  border-radius: 10px !important;
}

/* ---------- Responsive behaviour ---------- */
@media (max-width: 980px) {
  #root .rqk-auth-shell {
    width: min(570px, 100%) !important;
  }

  #root .rqk-auth-layout {
    display: block !important;
    min-height: 0 !important;
  }

  #root .rqk-auth-hero {
    display: none !important;
  }

  #root .rqk-auth-card {
    width: 100% !important;
  }
}

@media (max-width: 900px) {
  #root .rq-brand-nav {
    grid-template-columns: 1fr auto !important;
  }

  #root .rq-brand-hero {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    padding: 48px 0 54px !important;
  }

  #root .rq-brand-hero-emblem {
    width: min(280px, 72vw) !important;
  }
}

@media (max-width: 760px) {
  #root .landing-page-final {
    padding: 10px !important;
  }

  #root .landing-page-final .landing-final-nav {
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 6px !important;
    padding: 6px !important;
  }

  #root .landing-page-final .landing-page-final .landing-nav-actions,
  #root .landing-page-final .landing-nav-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  #root .landing-page-final .landing-nav-actions .landing-button {
    flex: 0 1 auto !important;
    min-height: 38px !important;
    padding-inline: 10px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  #root .landing-page-final .landing-final-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 18px !important;
    padding: 12px 2px 4px !important;
  }

  #root .landing-page-final .landing-final-logo-wrap {
    width: min(270px, 82vw) !important;
  }

  #root .landing-page-final h1 {
    font-size: clamp(34px, 10.5vw, 46px) !important;
    letter-spacing: -0.045em !important;
  }

  #root .landing-page-final .landing-hero-actions {
    gap: 8px !important;
  }

  #root .landing-page-final .landing-proof-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
    border: 0 !important;
    background: transparent !important;
  }

  #root .landing-page-final .landing-proof-strip span {
    width: auto !important;
    min-height: 38px !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(124, 203, 255, 0.18) !important;
    border-radius: 8px !important;
    background: #0c2234 !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  #root .landing-page-final .landing-preview-panel {
    min-height: 0 !important;
  }

  #root .landing-page-final .landing-preview-list {
    display: none !important;
  }

  #root .landing-page-final .landing-preview-spotlight {
    min-height: 0 !important;
  }
}

@media (max-width: 680px) {
  #root .rq-brand-nav {
    min-height: 60px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  #root .rq-brand-nav-actions {
    width: 100% !important;
    justify-content: flex-end !important;
    gap: 3px !important;
  }

  #root .rq-brand-nav-signin {
    display: inline-flex !important;
    min-height: 38px !important;
    padding: 7px 8px !important;
    font-size: 10px !important;
  }

  #root .rq-brand-nav-cta {
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 10px !important;
  }

  #root .rq-brand-mark {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  #root .rq-brand-hero,
  #root .rq-brand-definition,
  #root .rq-brand-ecosystem,
  #root .rq-brand-connected,
  #root .rq-brand-final-cta,
  #root .rq-brand-footer {
    width: min(100% - 24px, 1120px) !important;
  }

  #root .rq-brand-hero {
    padding: 36px 0 44px !important;
  }

  #root .rq-brand-hero-copy {
    text-align: left !important;
  }

  #root .rq-brand-eyebrow,
  #root .rq-brand-hero-actions,
  #root .rq-brand-mantra {
    justify-content: flex-start !important;
  }

  #root .rq-brand-hero h1 {
    font-size: clamp(42px, 13vw, 58px) !important;
    line-height: 0.98 !important;
  }

  #root .rq-brand-hero-intro {
    margin-inline: 0 !important;
    font-size: 16px !important;
    line-height: 1.52 !important;
  }

  #root .rq-brand-hero-actions {
    width: 100% !important;
    gap: 8px !important;
  }

  #root .rq-brand-button {
    min-height: 44px !important;
  }

  #root .rq-brand-mantra {
    gap: 7px 14px !important;
    margin-top: 22px !important;
  }

  #root .rq-brand-definition,
  #root .rq-brand-connected,
  #root .rq-brand-final-cta {
    padding: 22px !important;
  }

  #root .rq-brand-definition {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  #root .rq-brand-definition h2,
  #root .rq-brand-section-heading h2,
  #root .rq-brand-connected h2,
  #root .rq-brand-final-cta h2 {
    font-size: clamp(26px, 8vw, 36px) !important;
  }

  #root .rq-brand-ecosystem {
    padding: 52px 0 46px !important;
  }

  #root .rq-brand-section-heading {
    margin-bottom: 18px !important;
  }

  #root .rq-brand-product {
    min-height: 0 !important;
    padding: 20px !important;
  }

  #root .rq-brand-product-verb {
    margin-top: 14px !important;
  }

  #root .rq-brand-connected {
    gap: 16px !important;
  }

  #root .rq-brand-final-cta {
    margin-top: 46px !important;
    margin-bottom: 46px !important;
  }

  #root .rq-brand-footer {
    gap: 10px !important;
    padding: 20px 0 26px !important;
  }

  #root .rqk-auth-page {
    padding: 10px !important;
  }

  #root .rqk-auth-shell {
    gap: 10px !important;
  }

  #root .rqk-auth-page .rqk-auth-brand {
    width: auto !important;
    max-width: 100% !important;
    justify-self: start !important;
  }

  #root .rqk-auth-card {
    border-radius: 16px !important;
    padding: 16px !important;
  }

  #root .rqk-auth-heading h1 {
    font-size: clamp(1.75rem, 9vw, 2.3rem) !important;
  }

  #root .rqk-auth-heading > span {
    font-size: 0.86rem !important;
  }

  #root .rqk-auth-page--login .rqk-auth-note {
    display: none !important;
  }

  #root .rqk-auth-assurance {
    display: none !important;
  }

  #root .rqk-demo-access {
    grid-template-columns: 1fr !important;
  }

  #root .rqk-auth-page .rqk-demo-access__button {
    width: 100% !important;
    min-width: 0 !important;
  }

  #root .rqk-auth-field-hint {
    font-size: 0.74rem !important;
  }
}

@media (max-width: 430px) {
  #root .rq-brand-lockup-text strong {
    display: none !important;
  }

  #root .rq-brand-lockup-text {
    display: none !important;
  }

  #root .rq-brand-nav-signin {
    display: inline-flex !important;
  }

  #root .landing-page-final .landing-final-nav {
    grid-template-columns: auto minmax(0, 1fr) !important;
    justify-items: stretch !important;
  }

  #root .landing-page-final .landing-logo-button {
    width: 40px !important;
    height: 40px !important;
  }

  #root .landing-page-final .landing-nav-actions .landing-button {
    min-height: 36px !important;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  #root .landing-page-final .landing-proof-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  #root .rqk-auth-brand__text small {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #root .rqk-auth-ambient span {
    animation: none !important;
  }
}