/* One palette for the studio, public information and game utility screens.
   Loaded last, without changing form behaviour or authentication controls. */
:root {
  --ink: #f9f4df;
  --muted: #c9c0a1;
  --night: #07130f;
  --forest: #0d2a1e;
  --gold: #f5b84b;
  --aqua: #58e0c2;
  --line: rgba(249, 244, 223, .16);
  --brand-display: "Baskerville", "Palatino Linotype", "Book Antiqua", serif;
  --brand-background:
    radial-gradient(circle at 16% 8%, rgba(245,184,75,.22), transparent 28rem),
    radial-gradient(circle at 86% 14%, rgba(88,224,194,.16), transparent 30rem),
    linear-gradient(145deg, #06110d 0%, #102416 44%, #08100d 100%);
  --brand-surface: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  --brand-accent: linear-gradient(120deg, #f5b84b, #fff0a8);
  --brand-radius: 14px;
}
body:is(.studio-home, .page-body, .brand-utility) {
  background: var(--brand-background);
  color: var(--ink);
  min-height: 100vh;
}
:is(.studio-home, .page-body) .site-header {
  background: linear-gradient(180deg, rgba(5,13,10,.96), rgba(5,13,10,.86));
  border-bottom-color: var(--line);
}
.page-body .site-header .container { max-width: 1320px; padding-inline: clamp(20px, 4vw, 56px); }
:is(.studio-home, .page-body) :is(h1, h2, h3, p, a, label) { overflow-wrap: anywhere; }
:is(.studio-home, .page-body) :is(.btn, .page-header-link, .page-actions > a) {
  border-radius: 10px;
  max-width: 100%;
}
:is(.studio-home, .page-body) a:focus-visible,
.brand-utility :is(a, button, input, select):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
.studio-home .hero-bg::before {
  background: radial-gradient(ellipse at 8% 25%, #f5b84b14, transparent 65%),
    radial-gradient(ellipse at 90% 65%, #58e0c214, transparent 65%);
}
.studio-home .hero .eyebrow, .studio-home .section-heading .eyebrow { color: var(--aqua); }
.studio-home .hero h1, .page-title { text-shadow: 0 12px 45px #f5b84b12; }
.studio-home #cta_demo { background: var(--brand-accent); border-color: #ffe39c; }
.studio-home #cta_chattingup { background: #58e0c210; border-color: #58e0c24d; }
.studio-home .hero-art::before {
  content: none;
}
.studio-home .art-feature {
  position: relative;
  isolation: isolate;
  border-radius: var(--brand-radius);
  border-color: #f5b84b70;
  box-shadow: 0 24px 65px #0005, 0 0 70px #f5b84b0c;
}
.studio-home .art-feature::before {
  content: "";
  position: absolute;
  inset-block: -12px 12px;
  inset-inline: -12px 12px;
  border: 1px solid #f5b84b4d;
  border-radius: var(--brand-radius);
  background: linear-gradient(135deg, #f5b84b0d, transparent 45%, #58e0c20a);
  pointer-events: none;
  z-index: -1;
}
.studio-home .art-feature img { border-radius: 13px 13px 0 0; }
.studio-home .art-caption { background: linear-gradient(100deg, #13271c, #091b16); border-top-color: #f5b84b4d; border-radius: 0 0 13px 13px; }
.studio-home .app-shelf { margin-top: 24px; gap: 12px; }
.studio-home .app-shelf a { background: radial-gradient(ellipse at 10% 0, #58e0c212, transparent 70%), var(--brand-surface); border-radius: 12px; box-shadow: inset 0 1px #fff1; }
.studio-home .app-shelf a:hover { background-color: #58e0c20a; box-shadow: inset 0 1px #fff2, 0 8px 28px #0003; }
.studio-home .app-shelf img { box-shadow: 0 6px 18px #0004; }
.studio-home .catalog-entry > :last-child { transition: transform .2s ease; }
.studio-home .catalog-entry:hover > :last-child { transform: translateY(3px); }
.studio-home .marquee-section {
  background: linear-gradient(90deg, #f5b84b22, #f5b84b0c 45%, #58e0c222);
  border-color: #f5b84b26;
}
.studio-home .game-media {
  background: radial-gradient(ellipse at 0 0, #f5b84b26, transparent 65%),
    linear-gradient(145deg, #27372a, #10261b);
  border-radius: var(--brand-radius);
  box-shadow: inset 0 1px #fff1, 0 16px 45px #0003;
}
.studio-home .game-copy::before { color: var(--gold); }
.studio-home .game-copy h3 { margin-block: 15px 20px; }
.studio-home .product-card {
  position: relative;
  background: radial-gradient(ellipse at 100% 0, #f5b84b1a, transparent 65%), var(--brand-surface);
  border-radius: var(--brand-radius);
  border-color: #f5b84b40;
  box-shadow: inset 0 1px #fff1;
}
.studio-home .product-card::before {
  content: "";
  position: absolute;
  top: -1px;
  inset-inline: 26px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--aqua), transparent);
}
.studio-home .product-icon { box-shadow: 0 12px 28px #0004, 0 0 32px #f5b84b0e; }
.studio-home .future-card {
  background: radial-gradient(ellipse at 100% 0, #f5b84b1a, transparent 65%), linear-gradient(140deg, #1c3024, #0b1a14);
  border-radius: var(--brand-radius);
  border-color: #f5b84b40;
}
.studio-home .studio-section { background: linear-gradient(110deg, #f5b84b0d, #58e0c208); }
.studio-home :is(.pillar, .step, .glass-form) { background: var(--brand-surface); border-radius: var(--brand-radius); }
.studio-home .social-card { border-radius: var(--brand-radius); }
.studio-home .site-footer { background: #06140f; }

/* The same editorial hierarchy on every legal, product and support page. */
.page-body .page-main { padding-block: calc(var(--header) + 54px) 72px; }
.page-body .page-main::before { background: none; }
.page-body .page-main::after {
  background-size: 96px 96px;
  opacity: .2;
  mask-image: radial-gradient(ellipse at 50% 0, black, transparent 78%);
}
.page-body .page-shell { width: 100%; max-width: 1080px; padding-inline: clamp(20px, 4vw, 56px); }
.page-body .page-hero { position: relative; gap: 16px; margin-bottom: 30px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.page-body .page-hero::after {
  content: "";
  position: absolute;
  bottom: -1px;
  inset-inline-start: 0;
  width: 88px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--aqua));
}
.page-body .page-title, .page-body .success-title {
  font-family: var(--brand-display);
  font-size: clamp(2.25rem, 4.4vw, 4rem);
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.035em;
  text-transform: none;
}
.page-body .page-card h1 { font-family: var(--brand-display); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 500; line-height: 1.15; letter-spacing: -.035em; }
.page-body #policy-lang, .page-body .page-actions .lang-desktop { display: inline-block; max-width: 100%; }
.page-body .page-kicker { color: var(--aqua); font-size: .7rem; letter-spacing: .15em; }
.page-body .page-meta { font-size: .86rem; margin: 0; }
.page-body :is(.page-card, .card, .success-card) {
  background: var(--brand-surface);
  border-color: #f5b84b33;
  border-radius: var(--brand-radius);
  box-shadow: 0 18px 48px #0003, inset 0 1px #fff1;
  padding: clamp(20px, 4vw, 40px);
  backdrop-filter: none;
}
.page-body :is(.page-card, .card) { line-height: 1.8; }
.page-body :is(.page-card, .card) h2 {
  font-family: var(--brand-display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
}
.page-body :is(.page-card, .card) h3 { line-height: 1.4; }
.page-body .publisher-card { background: linear-gradient(120deg, #f5b84b14, #58e0c208); border-inline-start-width: 2px; border-radius: 0 10px 10px 0; }
.page-body .brand-line { font-family: var(--brand-display); font-weight: 600; text-transform: none; }
.page-body :is(.app-hero-art, .app-gallery img, .summary > div, .notice) { border-radius: 10px; }
.page-body .app-hero-art { box-shadow: 0 16px 40px #0003; }
.page-body .page-actions { gap: 10px; }
.page-body .page-actions > a { min-height: 44px; padding: 10px 16px; font-size: .88rem; box-shadow: none; }
.page-body .field-group :is(input, select, textarea) { border-radius: 10px; background: #07130f88; }
.page-body .field-group select option { background: #102419; color: var(--ink); }
.page-body .privacy-form .btn { box-shadow: none; min-height: 46px; font-size: .9rem; }
.page-body .status-mark { border-radius: 12px; background: var(--brand-accent); }

/* Utility pages retain their layouts, validation, status colours and login flow. */
body.brand-utility {
  --bg: #07130f; --panel: #17291e; --panel2: #102419;
  --text: #f9f4df; --muted: #c9c0a1; --line: #f9f4df29;
}
.brand-utility > header { background: #07130fec; }
.brand-utility .card, .brand-utility.utility-captcha > main {
  background: linear-gradient(145deg, #223628, #102419);
  border-color: #f5b84b40;
  border-radius: var(--brand-radius);
}
.brand-utility.utility-redirect { padding: clamp(24px, 8vw, 80px); font: 1rem/1.7 "Avenir Next", "Trebuchet MS", sans-serif; }
.brand-utility.utility-redirect a { color: var(--aqua); }
@media (max-width: 680px) {
  .page-body .page-main { padding-block: calc(var(--header) + 30px) 44px; }
  .page-body .page-hero { margin-bottom: 22px; padding-bottom: 24px; }
  .page-body .page-title { font-size: clamp(2rem, 8vw, 3rem); }
  .page-body .page-header-link { display: inline-flex; padding: 7px 9px; font-size: .72rem; line-height: 1.3; }
  .page-body .brand-copy strong { font-size: .85rem; }
  .page-body .brand { gap: 8px; }
  .page-body .nav-row { gap: 12px; }
  .page-body .logo-mark { width: 34px; height: 34px; flex: 0 0 34px; }
  .page-body .page-actions > a { flex: 0 1 auto; }
  .studio-home .art-feature::before { inset-block: -8px 8px; inset-inline: -8px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-home .catalog-entry > :last-child { transition: none; }
}