/* RoCode app pages — landing parity theme.
   Loaded last on account, login, info, changelog, dashboard, terms, privacy,
   referral and email-preferences. Companion to chat-landing.css, which does the
   same job for the chat page; the token block is shared verbatim.

   Two levers:
     1. the tokens below, redeclared on :root. This file loads after style.css, so
        at equal specificity the later declaration wins and every panel, card,
        modal and button re-skins from one place.
     2. body.rc-flat rules with !important where a component declares its own
        value on the element and inheritance cannot reach it. !important is used
        deliberately: style.css already uses it on the skeuomorphic button faces,
        and specificity alone cannot beat a (0,4,2) selector from a body class. */

:root {
  --lp-bg: #120b1f;
  --lp-card: #1a102c;
  --lp-card-top: #211538;
  --lp-surface: #241a3a;
  --lp-surface-hover: #2e2148;
  --lp-surface-down: #382a58;
  --lp-line: rgba(207, 195, 224, .14);
  --lp-line-strong: rgba(207, 195, 224, .22);
  --lp-line-ui: #6f6489;
  --lp-edge: rgba(207, 195, 224, .10);
  --lp-text: #f6f1ff;
  --lp-text-2: #cfc3e0;
  --lp-text-3: #b7abc8;
  --lp-brand: #8b5cf6;
  --lp-violet: #a78bfa;
  --lp-violet-soft: #c4b5fd;
  --lp-fill: #8b5cf6;
  --lp-fill-hover: #9468f8;
  --lp-fill-down: #7c3aed;
  --lp-on-fill: #f6f1ff;
  --lp-ok: #6be08a;
  --lp-amber: #fbbf24;
  --lp-orange: #f97316;
  --lp-orange-hover: #fa7d24;
  --lp-disabled-bg: #261c3d;
  --lp-disabled-text: #a89cbd;
  --lp-radius: 18px;
  --lp-radius-sm: 12px;
  --lp-radius-xs: 8px;
  --lp-radius-pill: 999px;
  --lp-shadow: 0 24px 60px -18px rgba(0, 0, 0, .78), 0 2px 8px rgba(0, 0, 0, .34);
  --lp-card-shadow: inset 0 1px 0 var(--lp-edge), var(--lp-shadow);
  --lp-dur: .16s;
  --lp-ease: cubic-bezier(.22, .61, .36, 1);
  --lp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --lp-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --lp-nav-h: 64px;

  /* Spring Glass repointed at the flat language */
  --glass-sheen: none;
  --glass-fill: linear-gradient(180deg, var(--lp-card-top) 0, var(--lp-card) 120px);
  --glass-rim: linear-gradient(var(--lp-line), var(--lp-line));
  --glass-shadow: var(--lp-card-shadow);
  --rc-glass-bg: var(--glass-fill);
  --rc-glass-elevated-bg: var(--glass-fill);
  --rc-glass-border: var(--lp-line);
  --rc-glass-border-hover: var(--lp-line-strong);
  --rc-glass-hover-ring: 0 0 0 0 transparent;
  --rc-glass-inset-highlight: inset 0 1px 0 var(--lp-edge);
  --rc-glass-inset-highlight-hover: inset 0 1px 0 var(--lp-edge);
  --rc-panel-solid-bg: var(--lp-card);

  --rc-border-width: 1px;
  --rc-panel-shadow: var(--lp-shadow);
  --rc-chip-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  --rc-drop-shadow: 0 2px 8px rgba(0, 0, 0, .34);
  --rc-text-shadow: none;
  --rc-text-filter-shadow: none;
  --rc-noise-opacity: 0;
  --rc-btn-noise-svg: none;

  --font-body: var(--lp-font);
  --font-display: var(--lp-font);
  --font-mono: var(--lp-mono);
  --font-weight-base: 400;
  --font-weight-emphasis: 600;
  --font-weight-display: 600;

  --accent-subtle: rgba(139, 92, 246, .12);
  --border: var(--lp-line);
  --border-color: var(--lp-line);

  --scroll-size: 10px;
  --scroll-track: transparent;
  --scroll-thumb: rgba(255, 255, 255, .22);
}

body.rc-flat {
  font-family: var(--lp-font);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.005em;
  text-shadow: none;
  color: var(--lp-text);
}

body.rc-flat *,
body.rc-flat *::before,
body.rc-flat *::after {
  text-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.rc-flat::after { display: none; } /* film grain */

body.rc-flat pre,
body.rc-flat code,
body.rc-flat kbd,
body.rc-flat samp,
body.rc-flat var {
  font-family: var(--lp-mono) !important;
}

body.rc-flat ::selection { background: rgba(139, 92, 246, .35); }

body.rc-flat :focus-visible {
  outline: 2px solid var(--lp-violet);
  outline-offset: 3px;
  border-radius: var(--lp-radius-sm);
}

/* ---- type ---- */

body.rc-flat h1,
body.rc-flat .main-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

/* the gradient headline fill: not one rival uses it, and its dark end fails contrast */
body.rc-flat .main-title span,
body.rc-flat .auth-container h1.form-title,
body.rc-flat .auth-container h2.form-title {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--lp-text);
}

body.rc-flat .main-title span:not(.title-red):not(.title-green) { color: var(--lp-violet); }

body.rc-flat h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

body.rc-flat h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

body.rc-flat p,
body.rc-flat li {
  font-weight: 400;
  line-height: 1.6;
}

body.rc-flat .subtitle,
body.rc-flat .page-subtitle,
body.rc-flat .section-subtitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--lp-text-2);
}

body.rc-flat strong,
body.rc-flat b { font-weight: 600; }

body.rc-flat label {
  font-size: 14px;
  font-weight: 500;
  color: var(--lp-text-2);
  text-shadow: none;
}

/* ---- header ---- */

body.rc-flat .navbar-top {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--lp-nav-h);
  max-width: none;
  margin: 0;
  padding: 0 24px;
  border-bottom: 1px solid var(--lp-line);
}

body.rc-flat .logo-text {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.5;
  color: var(--lp-brand);
  text-shadow: none;
  animation: none !important;
}

/* the floating back control */
body.rc-flat a.btn.page-back-btn {
  top: 12px;
  left: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  --rc-btn-radius: 10px;
  --rc-btn-mid: var(--lp-surface);
  --rc-btn-shadow: var(--lp-surface);
  --rc-btn-text: var(--lp-text-2);
  border: 1px solid var(--lp-line-ui) !important;
}

body:has(.page-back-btn).rc-flat .navbar-top .logo { margin-left: 44px; }

body.rc-flat .product-badge {
  padding: 8px 16px;
  border: 1px solid var(--lp-line-ui);
  border-radius: var(--lp-radius-pill);
  background: var(--lp-surface);
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-2);
  box-shadow: none;
}

body.rc-flat .product-badge:hover {
  background: var(--lp-surface-hover);
  border-color: var(--lp-line-ui);
  color: var(--lp-text);
}

/* ---- buttons ---- */

/* The skeuomorphic system paints each button through a ::before "face" layer
   stacked under a .rc-btn-face label span that button-glass-hover.js injects at
   runtime. On these pages that layering left the label unpainted (Log Out was a
   blank slab). Rather than fight the stack, the face is switched off and the
   button paints its own background, which is also one less layer per button. */
body.rc-flat button::before,
body.rc-flat a.btn::before,
body.rc-flat a.btn-top-login::before,
body.rc-flat a.discord-btn::before,
body.rc-flat input[type="submit"]::before,
body.rc-flat input[type="button"]::before,
body.rc-flat button::after,
body.rc-flat a.btn::after,
body.rc-flat a.btn-top-login::after,
body.rc-flat a.discord-btn::after,
body.rc-flat input[type="submit"]::after,
body.rc-flat input[type="button"]::after {
  content: none !important;
  display: none !important;
}

/* The same exclusions style.css uses: segmented toggles, model cards and modal
   close buttons paint themselves and must not pick up the generic pill. */
/* :where() keeps this base rule at a LOW specificity on purpose. Written as
   plain selectors it outranked .btn-primary and every anchor CTA came out grey. */
body.rc-flat button:not(:where(.segmented-toggle-btn, .model-card, .close-modal-btn, .model-picker-close)),
body.rc-flat :where(a.btn, a.btn-top-login, a.discord-btn, input[type="submit"], input[type="button"]) {
  font-family: var(--lp-font);
  font-weight: 600;
  letter-spacing: -0.01em;
  background: var(--lp-surface) !important;
  color: var(--lp-text) !important;
  border: 1px solid var(--lp-line-ui) !important;
  border-radius: var(--lp-radius-sm);
  box-shadow: none;
  transition: background-color var(--lp-dur) var(--lp-ease), border-color var(--lp-dur) var(--lp-ease), color var(--lp-dur) var(--lp-ease), transform var(--lp-dur) var(--lp-ease);
}

body.rc-flat .rc-btn-face {
  position: static;
  text-shadow: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

body.rc-flat button svg,
body.rc-flat button .lucide,
body.rc-flat a.btn svg,
body.rc-flat a.btn .lucide { filter: none; }

body.rc-flat button:not(:where(.segmented-toggle-btn, .model-card)):not(:disabled):hover,
body.rc-flat :where(a.btn):hover { background: var(--lp-surface-hover) !important; }

body.rc-flat button:not(:where(.segmented-toggle-btn)):not(:disabled):active,
body.rc-flat a.btn:active { transform: scale(.98); }

body.rc-flat .btn-primary,
body.rc-flat .submit-btn,
body.rc-flat #modal-generate-btn {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 600;
  background: var(--lp-fill) !important;
  color: var(--lp-on-fill) !important;
  border-color: transparent !important;
}

body.rc-flat .btn-primary:hover,
body.rc-flat a.btn.btn-primary:hover,
body.rc-flat .submit-btn:hover,
body.rc-flat #modal-generate-btn:hover { background: var(--lp-fill-hover) !important; }

body.rc-flat .btn-secondary,
body.rc-flat .btn-top-login,
body.rc-flat .oauth-btn {
  min-height: 48px;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 500;
  background: var(--lp-surface) !important;
  color: var(--lp-text) !important;
  border-color: var(--lp-line-ui) !important;
}

body.rc-flat .btn-secondary:hover,
body.rc-flat .oauth-btn:hover { background: var(--lp-surface-hover) !important; }

body.rc-flat .btn-danger {
  background: #ef4444 !important;
  color: #fff !important;
  border-color: transparent !important;
}

body.rc-flat .btn-danger:hover,
body.rc-flat a.btn.btn-danger:hover { background: #dc2626 !important; }

body.rc-flat .upgrade-btn,
body.rc-flat #pricing-pro-btn,
body.rc-flat #pricing-studio-btn {
  background: var(--lp-orange) !important;
  color: #fff !important;
  border-color: transparent !important;
  text-transform: none;
  letter-spacing: -0.01em;
  box-shadow: none;
}

body.rc-flat .upgrade-btn:hover,
body.rc-flat #pricing-pro-btn:hover,
body.rc-flat #pricing-studio-btn:hover { background: var(--lp-orange-hover) !important; }

body.rc-flat button:disabled,
body.rc-flat a.btn[aria-disabled="true"],
body.rc-flat .pricing-cta[aria-disabled="true"] {
  filter: none;
  opacity: 1;
  background: var(--lp-disabled-bg) !important;
  color: var(--lp-disabled-text) !important;
  border-color: transparent !important;
}

/* a quiet link should look like a link, not a filled pill */
body.rc-flat .oauth-legacy-link,
body.rc-flat .text-link {
  min-height: 44px;
  padding: 0 4px;
  background: none !important;
  border: 0 !important;
  color: var(--lp-violet) !important;
  font-size: 15px;
  font-weight: 500;
}

body.rc-flat .oauth-legacy-link:hover,
body.rc-flat .text-link:hover {
  background: none !important;
  color: var(--lp-text) !important;
}

body.rc-flat .oauth-legacy-link::before,
body.rc-flat .oauth-legacy-link::after { display: none !important; }

/* ---- surfaces ---- */

body.rc-flat .card,
body.rc-flat .auth-container .card,
body.rc-flat .form-container,
body.rc-flat .changelog-entry,
body.rc-flat .simple-card-panel,
body.rc-flat .discord-callout,
body.rc-flat .rc-modal-sheet,
body.rc-flat .step-card,
body.rc-flat .status-banner {
  background:
    linear-gradient(180deg, var(--lp-card-top) 0, var(--lp-card) 120px) padding-box,
    var(--lp-card) padding-box;
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-card-shadow);
}

body.rc-flat .card:hover,
body.rc-flat .changelog-entry:hover,
body.rc-flat .step-card:hover {
  border-color: var(--lp-line);
  box-shadow: var(--lp-card-shadow);
  transform: none;
}

/* ---- inputs ---- */

body.rc-flat input,
body.rc-flat textarea,
body.rc-flat select {
  padding: 12px 14px;
  border: 1px solid var(--lp-line-ui);
  border-radius: var(--lp-radius-sm);
  background: var(--lp-bg);
  color: var(--lp-text);
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
  text-shadow: none;
  transition: border-color var(--lp-dur) var(--lp-ease), box-shadow var(--lp-dur) var(--lp-ease);
}

body.rc-flat input:hover,
body.rc-flat textarea:hover {
  border-color: var(--lp-line-ui);
  box-shadow: none;
}

body.rc-flat input:focus,
body.rc-flat textarea:focus {
  border-color: var(--lp-violet);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, .18);
}

body.rc-flat input::placeholder,
body.rc-flat textarea::placeholder { color: var(--lp-text-3); }

/* ---- toggles ---- */

body.rc-flat .slider {
  border: 1px solid rgba(0, 0, 0, .28);
  background: var(--lp-surface-down);
  box-shadow: none;
}

body.rc-flat .slider::after { display: none; }

body.rc-flat .slider::before {
  border: 0;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

body.rc-flat input:checked + .slider {
  border-color: transparent;
  background: var(--lp-fill);
  box-shadow: none;
}

body.rc-flat .switch:hover input:not(:checked):not(:disabled) + .slider,
body.rc-flat .switch:hover input:checked:not(:disabled) + .slider { box-shadow: none; }

/* ---- page chrome: back + log out ---- */

/* The two controls were stacked in an absolutely positioned column at the top
   left, which read as one empty slab over the wordmark. One row, top right,
   where an account page's log out belongs. */
/* style.css anchors this with #account-page (1,1,0), so these need !important
   rather than another class. */
body.rc-flat .page-top-actions {
  position: absolute !important;
  top: 12px !important;
  right: 24px !important;
  left: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 1001;
}

body.rc-flat a.btn.page-back-btn {
  position: static;
  order: -1;
}

body.rc-flat #top-logout-btn,
body.rc-flat .btn-compact {
  min-height: 40px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 10px;
  --rc-btn-radius: 10px;
}

body:has(.page-back-btn).rc-flat .navbar-top .logo { margin-left: 0; }

/* ---- page header ---- */

body.rc-flat .page-header {
  margin-bottom: 40px;
  max-width: none;
}

body.rc-flat .main-title {
  font-size: clamp(1.875rem, 3.2vw, 2.5rem);
  margin-bottom: 8px;
}

body.rc-flat .section-title,
body.rc-flat .pricing-section h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* the underline flourish under section headings */
body.rc-flat .section-title::after,
body.rc-flat .page-header::after { display: none; }

/* ---- page rhythm ---- */

/* The page mixed a 1180px pricing grid with 600px account cards and a 48px gap
   between every block, which read as unrelated slabs on a big empty field. */
body.rc-flat .main-container {
  max-width: 1120px;
  margin-inline: auto;
  gap: 32px;
  padding: 40px 24px 80px;
}

body.rc-flat .account-container { max-width: 820px; }
body.rc-flat .pricing-section { width: 100%; }
body.rc-flat [data-rocode-pricing] { gap: 24px; min-height: 0; }
body.rc-flat .pricing-grid { gap: 20px; }
body.rc-flat .pricing-card { max-width: none; }

body.rc-flat .stack-section { margin-top: 8px; }
body.rc-flat .stack-section--tight { margin-top: 0; }

body.rc-flat .card { padding: 24px; margin-bottom: 0; }
body.rc-flat #account-page .card h2,
body.rc-flat .card h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

body.rc-flat #account-page .card p,
body.rc-flat .card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--lp-text-2);
  margin-bottom: 16px;
}

body.rc-flat .card-footer { margin-top: 16px; }
body.rc-flat .note-text { font-size: 13px; color: var(--lp-text-3); }

body.rc-flat .subscription-status-message p { font-size: 15px; color: var(--lp-text-2); }

/* ---- pricing ---- */

body.rc-flat .pricing-card {
  background: var(--lp-card);
  border: 1px solid var(--lp-line);
  border-width: 1px;
  border-radius: var(--lp-radius);
  box-shadow: var(--lp-card-shadow);
}

body.rc-flat .pricing-card:hover {
  transform: none;
  border-color: var(--lp-line);
  box-shadow: var(--lp-card-shadow);
}

body.rc-flat .pricing-card.pro,
body.rc-flat .pricing-card.pro:hover {
  border-color: var(--lp-violet);
  box-shadow: var(--lp-card-shadow);
}

body.rc-flat .pricing-card h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--lp-text-2);
}

body.rc-flat .price {
  font-size: clamp(2rem, 2.6vw, 2.75rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

body.rc-flat .price .period {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--lp-text-2);
}

body.rc-flat .pricing-card,
body.rc-flat .plan-header,
body.rc-flat .features-list { text-align: left; }

body.rc-flat .pricing-card { align-items: stretch; }

body.rc-flat .plan-header {
  margin-bottom: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--lp-line);
}

body.rc-flat .price { justify-content: flex-start; margin: 10px 0 0; }

body.rc-flat .features-list {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 20px 0 24px;
}

/* the centred text with a decorative dot on each side was the messiest part of
   the card; the landing page uses a left check and a left-aligned line. */
body.rc-flat .features-list li {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  width: auto;
  max-width: none;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--lp-text);
  text-align: left;
}

body.rc-flat .features-list li::before,
body.rc-flat .features-list li::after { content: none !important; }

body.rc-flat .features-list li .check {
  display: inline-block;
  flex: none;
  color: var(--lp-ok);
  font-weight: 600;
  line-height: 1.45;
}

body.rc-flat .features-list li .feature-text { text-wrap: pretty; }
body.rc-flat strong.feature-text { font-weight: 600; }

body.rc-flat .pricing-cta { width: 100%; margin-top: auto; }

body.rc-flat .popular-tag {
  background: var(--lp-fill);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  box-shadow: none;
}

body.rc-flat .segmented-toggle {
  background: var(--lp-surface);
  border: 1px solid var(--lp-line-ui);
  border-radius: var(--lp-radius-pill);
  box-shadow: none;
}

body.rc-flat .segmented-toggle-btn {
  font-size: 15px;
  font-weight: 500;
  color: var(--lp-text-2) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none;
}

body.rc-flat .segmented-toggle-btn:hover { color: var(--lp-text) !important; }

body.rc-flat .segmented-toggle-btn.is-active {
  background: var(--lp-surface-down) !important;
  color: var(--lp-text) !important;
  box-shadow: inset 0 0 0 1px var(--lp-violet);
}

body.rc-flat .annual-save-badge {
  background: var(--lp-ok);
  color: #0e0e12;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
}

/* ---- modals ---- */

body.rc-flat button.close-modal-btn {
  top: 14px;
  right: 14px;
  left: auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--lp-line) !important;
  border-radius: 8px;
  background: var(--lp-surface);
  background-image: none;
  color: var(--lp-text-2);
  box-shadow: none !important;
}

body.rc-flat button.close-modal-btn::before { display: none; }

body.rc-flat button.close-modal-btn:hover {
  background: var(--lp-surface-hover);
  color: var(--lp-text);
  transform: none !important;
  filter: none;
}

/* ---- changelog ---- */

body.rc-flat .change-tag,
body.rc-flat .version-tag {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: var(--lp-radius-pill);
  box-shadow: none;
}

body.rc-flat .entry-body li {
  border-width: 1px;
  box-shadow: none;
}

/* ---- scrollbars ---- */

body.rc-flat *::-webkit-scrollbar { width: 10px; height: 10px; }

body.rc-flat *::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: none;
}

body.rc-flat *::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: rgba(255, 255, 255, .22);
  background-image: none;
  border-radius: 999px;
  box-shadow: none;
}

body.rc-flat *::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }

@media (max-width: 768px) {
  body.rc-flat .navbar-top { padding-inline: 16px; }
}