/* JayLex Studio: one palette for the public pages and the local cabinet. */
:root {
  --studio-bg: #f7f8fd;
  --studio-surface: #ffffff;
  --studio-elevated: #f0edf9;
  --studio-ink: #20273d;
  --studio-muted: #626c85;
  --studio-line: #e1e3ee;
  --studio-accent: #7046c6;
  --studio-tint: #edeafa;
  --studio-action: linear-gradient(125deg, #7046c6, #7951cc);
  --studio-glow: rgba(138, 106, 211, .10);
  --bg: var(--studio-bg);
  --surface: var(--studio-surface);
  --surface-soft: #f1f2fa;
  --soft: var(--surface-soft);
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
  --accent: var(--studio-accent);
  --accent-deep: var(--studio-accent);
  --tint: var(--studio-tint);
  --pink: #bb5595;
  --green: #257f63;
  --shadow: 0 24px 75px -45px rgba(37, 30, 76, .23);
  color-scheme: light;
}

html[data-theme="dark"] {
  --studio-bg: #0b0d1b;
  --studio-surface: #151a30;
  --studio-elevated: #1b2038;
  --studio-ink: #f2f4fc;
  --studio-muted: #b0b9d0;
  --studio-line: #2b334e;
  --studio-accent: #9c7af3;
  --studio-tint: #24213f;
  --studio-action: linear-gradient(125deg, #7451dc, #815bde);
  --studio-glow: rgba(125, 88, 221, .13);
  --bg: var(--studio-bg);
  --surface: var(--studio-surface);
  --surface-soft: #101426;
  --soft: var(--surface-soft);
  --ink: var(--studio-ink);
  --muted: var(--studio-muted);
  --line: var(--studio-line);
  --accent: var(--studio-accent);
  --accent-deep: var(--studio-accent);
  --tint: var(--studio-tint);
  --pink: #da8ec6;
  --green: #78d8b3;
  --shadow: 0 28px 70px -38px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

body {
  background:
    radial-gradient(ellipse 62% 640px at 95% 110px, var(--studio-glow), transparent 74%),
    radial-gradient(ellipse 44% 500px at 0 850px, color-mix(in srgb, var(--accent) 4%, transparent), transparent 77%),
    var(--bg);
  color: var(--ink);
}

::selection { background: #a78be7; color: #101426; }

.site-header,
.legal-site-header {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(151, 123, 213, .025);
}

.gradient-text {
  background-image: linear-gradient(115deg, #7551cc 8%, #aa72c5 92%);
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="dark"] .gradient-text {
  background-image: linear-gradient(115deg, #a58bf0 8%, #cfb7f6 92%);
}

.button:not(.button-secondary):not(.button-light),
html[data-theme="dark"] .hero-buttons > .button,
html[data-theme="dark"] .price-card:not(.pro-card) > .button,
.cancel-button:not(.cancel-button-secondary),
html[data-theme="dark"] .cancel-button:not(.cancel-button-secondary),
.legal-document .legal-contact-cta,
html[data-theme="dark"] .legal-document .legal-contact-cta {
  background: var(--studio-action);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px -14px rgba(111, 68, 216, .7);
}

.button:not(.button-secondary):not(.button-light):hover,
.cancel-button:not(.cancel-button-secondary):hover,
.legal-document .legal-contact-cta:hover {
  background: var(--studio-action);
  filter: none;
  box-shadow: 0 12px 28px -16px rgba(115, 73, 210, .65);
}

.button-secondary,
html[data-theme="dark"] .button-secondary,
.cancel-button-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}

.button-secondary:hover,
.cancel-button-secondary:hover {
  background: var(--surface-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.icon-button,
.legal-theme {
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}

.language-options {
  border-color: var(--line);
  background: var(--surface);
  box-shadow: 0 20px 55px -15px rgba(8, 10, 30, .3);
}

.visual-halo,
html[data-theme="dark"] .visual-halo {
  background: radial-gradient(ellipse at 55% 50%, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 6%, transparent) 44%, transparent 73%);
}

.dashboard-mock {
  background: linear-gradient(135deg, var(--studio-elevated), var(--surface) 55%);
  border-color: var(--line);
  box-shadow: 0 38px 75px -38px rgba(14, 15, 42, .48), 0 1px 0 inset color-mix(in srgb, var(--ink) 4%, transparent);
}

.mock-sidebar { background: color-mix(in srgb, var(--surface) 83%, var(--bg)); }

.mock-next,
.demo-summary,
.reminder-demo {
  background: color-mix(in srgb, var(--studio-elevated) 50%, var(--surface));
  border-color: var(--line);
}

.hero-phone .phone-balance {
  background: linear-gradient(140deg, #7652d9, #996cdd);
}

.hero-orbit-badge,
.hero-free-badge {
  background: var(--studio-elevated);
  border-color: color-mix(in srgb, var(--accent) 25%, var(--line));
  color: var(--ink);
  box-shadow: 0 14px 38px -25px rgba(22, 18, 46, .55);
}

.hero-free-badge .icon { color: var(--accent); }

.tour-card,
.feature-card,
.catalog-card,
.budget-lab-panel,
.price-card,
.legal-document,
.cancel-form-panel {
  background: linear-gradient(135deg, color-mix(in srgb, var(--studio-elevated) 18%, var(--surface)), var(--surface) 70%);
  border-color: var(--line);
  box-shadow: 0 1px 0 inset color-mix(in srgb, var(--ink) 3%, transparent), 0 15px 45px -40px rgba(31, 25, 66, .3);
}

.feature-card:hover,
.catalog-card:hover,
.cancel-provider-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.catalog-card-button {
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--tint) 75%, var(--surface));
}

.catalog-control-label select,
.catalog-search-wrap,
.catalog-search-field,
.cancel-search,
.cancel-category {
  background-color: var(--surface);
  border-color: var(--line);
}

.catalog-dialog {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 35px 100px rgba(0, 0, 0, .25);
}

.catalog-dialog::backdrop {
  background: rgba(6, 9, 24, .68);
}

.catalog-dialog-plan,
.catalog-dialog-terms,
.budget-lab-totals,
.legal-contact-card,
.cancel-provider-card {
  background: color-mix(in srgb, var(--studio-elevated) 40%, var(--surface));
  border-color: var(--line);
}

.pricing-section { background: color-mix(in srgb, var(--surface-soft) 84%, transparent); }

.price-card.pro-card {
  background: linear-gradient(140deg, var(--tint), var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.jx-story-stage {
  --story-ink: #f2f4fc;
  --story-muted: #b0b9d0;
  --story-line: #2b334e;
  background: linear-gradient(135deg, #1b2038, #101426 62%, #221c3b);
  border: 1px solid #2b334e;
  box-shadow: 0 30px 60px -35px rgba(4, 6, 19, .5);
}

.jx-story-stage:before { background: rgba(137, 95, 235, .12); }
.jx-story-panel-title,
.jx-story-example,
.jx-story-stage-bottom { color: #b0b9d0; }
.jx-story-event-point { border-color: #1b2038; }

.cancel-hub-shell {
  --cancel-lavender: #c8b4ff;
  --cancel-ink: #f2f4fc;
  --cancel-muted: #b0b9d0;
  background: linear-gradient(130deg, #101426, #13182d 58%, #1a1930);
  border-color: #2b334e;
}

.cancel-hub-shell:before {
  background: radial-gradient(ellipse at 0 0, rgba(125, 88, 221, .12), transparent 58%);
}

.cancel-hub-console { background: #1b2038; border-color: #313951; }
.cancel-hub-tabs { background: #101426; border-color: #313951; }
.cancel-hub-tab { color: #c6cee3; }
.cancel-hub-tab:hover { background: #282642; }
.cancel-hub-console-head,
.cancel-hub-note { color: #b0b9d0; }
.cancel-hub-note { border-color: #313951; }
.cancel-hub-links > a { color: #c4b6e5; }

.android-section {
  background: linear-gradient(130deg, #131931, #151c35 65%, #211c40);
  border: 1px solid #2b334e;
}

.android-section:before {
  background: radial-gradient(circle, rgba(128, 87, 212, .18), transparent 67%);
}

.android-copy > p,
.android-copy > .availability-note,
.android-demo-caption { color: #b0b9d0; }

.closing-section {
  background: linear-gradient(125deg, #633bb5, #7550ca 58%, #825fd1);
  border: 1px solid rgba(201, 174, 255, .2);
  box-shadow: 0 25px 60px -35px rgba(88, 49, 164, .35);
}

.closing-section .button,
html[data-theme="dark"] .closing-section .button,
.button-light {
  background: #f8f7ff;
  color: #533493;
  border-color: transparent;
}

.closing-section .button:hover,
.button-light:hover { background: #fff; filter: none; }

.legal-document-nav > a[aria-current="page"],
.legal-document-nav > a:hover {
  color: var(--accent-deep);
  background: var(--tint);
}

.legal-contact-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.cancel-letter { border-color: #dce0ec; }

html[dir="rtl"] .legal-header-nav {
  margin-left: 26px;
  margin-right: auto;
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(ellipse 100% 580px at 100% 100px, var(--studio-glow), transparent 74%),
      var(--bg);
  }
  .site-header,
  .legal-site-header { background: color-mix(in srgb, var(--bg) 96%, transparent); }
  .feature-card,
  .catalog-card,
  .budget-lab-panel,
  .price-card,
  .legal-document,
  .cancel-form-panel { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .button:not(.button-secondary):not(.button-light):hover,
  .legal-document .legal-contact-cta:hover { filter: none; }
}

@media print {
  body { background: #fff; color: #000; }
  .legal-document,
  .cancel-letter { background: #fff; color: #000; border: 0; box-shadow: none; }
}