@font-face {
  font-family: "Lila Support Lilita";
  src: url("../fonts/LilitaOne-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Lila Support Baloo";
  src: url("../fonts/Baloo2-Variable.ttf") format("truetype");
  font-display: swap;
}

.beta-notice-layer {
  position: fixed;
  z-index: 120000;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  overflow: auto;
  background: rgba(42, 19, 57, .72);
  backdrop-filter: blur(8px);
}

.beta-notice-layer[hidden] { display: none !important; }
body.beta-notice-open { overflow: hidden; }

.beta-notice-card {
  position: relative;
  width: min(590px, 100%);
  max-height: calc(100dvh - 36px);
  padding: clamp(25px, 6vw, 39px);
  overflow: auto;
  border: 3px solid rgba(255, 218, 93, .82);
  border-radius: clamp(27px, 7vw, 38px);
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 224, 99, .42), transparent 24%),
    radial-gradient(circle at 10% 100%, rgba(179, 225, 151, .36), transparent 30%),
    linear-gradient(145deg, #fffdf6, #fbf1ff);
  box-shadow: 0 28px 80px rgba(31, 10, 43, .4);
  color: #594763;
  font-family: "Lila Support Baloo", "Trebuchet MS", sans-serif;
  text-align: center;
}

.beta-notice-icon {
  display: grid;
  place-items: center;
  width: clamp(72px, 19vw, 98px);
  aspect-ratio: 1;
  margin: 0 auto 13px;
  border-radius: 29px;
  background: linear-gradient(145deg, #fff2a9, #fff);
  box-shadow: 0 13px 28px rgba(96, 61, 20, .16);
  font-size: clamp(2.5rem, 10vw, 4rem);
}

.beta-notice-card h2 {
  margin: 0 auto 14px;
  color: #4b1d66;
  font-family: "Lila Support Lilita", "Lila Support Baloo", sans-serif;
  font-size: clamp(2rem, 7.5vw, 3.15rem);
  font-weight: 400;
  line-height: 1.04;
}

.beta-notice-copy { display: grid; gap: 10px; max-width: 490px; margin: 0 auto; }
.beta-notice-copy p { margin: 0; font-size: clamp(.98rem, 3.6vw, 1.12rem); line-height: 1.52; }
.beta-notice-actions { display: grid; gap: 10px; margin-top: 23px; }
.beta-notice-primary,
.beta-notice-support {
  min-height: 52px;
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 17px;
  font: 800 1rem/1.2 "Lila Support Baloo", sans-serif;
  text-decoration: none;
  cursor: pointer;
}
.beta-notice-primary { border: 0; background: linear-gradient(135deg, #6c2a98, #8a42b5); color: #fff; box-shadow: 0 10px 22px rgba(85, 30, 125, .24); }
.beta-notice-support { border: 2px solid rgba(91, 42, 126, .17); background: rgba(255, 255, 255, .78); color: #5a267b; }
.beta-notice-primary:focus-visible,
.beta-notice-support:focus-visible { outline: 4px solid #f6c63f; outline-offset: 3px; }

.support-page {
  min-height: 100vh;
  margin: 0;
  color: #504459;
  background:
    radial-gradient(circle at 7% 8%, rgba(255, 228, 139, .52), transparent 27%),
    radial-gradient(circle at 94% 18%, rgba(225, 199, 244, .58), transparent 29%),
    linear-gradient(145deg, #fffdf8, #fff8ed 54%, #faf1ff);
  font-family: "Lila Support Baloo", "Trebuchet MS", sans-serif;
}

.support-page *, .support-page *::before, .support-page *::after { box-sizing: border-box; }
.support-page .site-header { background: rgba(255, 253, 247, .92); backdrop-filter: blur(12px); }
.support-shell { width: min(1120px, calc(100% - 30px)); margin: 0 auto; padding: clamp(24px, 4vw, 52px) 0 62px; }
.support-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(460px, 1.18fr); gap: clamp(22px, 4vw, 48px); align-items: start; }
.support-intro { position: sticky; top: 105px; padding: clamp(26px, 4vw, 43px); border: 2px solid rgba(121, 73, 137, .11); border-radius: 32px; background: linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(252, 242, 255, .94)); box-shadow: 0 18px 48px rgba(68, 31, 85, .1); }
.support-intro-icon { display: grid; place-items: center; width: 78px; aspect-ratio: 1; border-radius: 24px; background: #fff2ad; font-size: 2.5rem; box-shadow: 0 11px 25px rgba(103, 70, 25, .14); }
.support-eyebrow { display: inline-flex; margin-top: 22px; color: #875a00; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.support-intro h1 { margin: 9px 0 13px; color: #4b1d66; font-family: "Lila Support Lilita", "Lila Support Baloo", sans-serif; font-size: clamp(2.45rem, 5vw, 4.25rem); font-weight: 400; line-height: .98; }
.support-intro > p { margin: 0; font-size: 1.06rem; line-height: 1.6; }
.support-guardian-note { margin-top: 24px; padding: 17px; display: grid; gap: 5px; border-radius: 18px; background: #eef8e9; color: #415d42; }
.support-guardian-note strong { color: #345438; }
.support-privacy-note { margin: 13px 0 0; color: #776c7d; font-size: .86rem; line-height: 1.45; }

.support-form-card { padding: clamp(24px, 4vw, 42px); border: 2px solid rgba(99, 57, 112, .11); border-radius: 32px; background: rgba(255, 255, 255, .95); box-shadow: 0 18px 48px rgba(68, 31, 85, .1); }
.support-form-card h2 { margin: 0 0 6px; color: #4b1d66; font-family: "Lila Support Lilita", "Lila Support Baloo", sans-serif; font-size: clamp(1.8rem, 3.8vw, 2.5rem); font-weight: 400; }
.support-form-lead { margin: 0 0 22px; color: #73647b; line-height: 1.5; }
.support-form { display: grid; gap: 17px; }
.support-field { display: grid; gap: 7px; }
.support-field[hidden] { display: none !important; }
.support-field label { color: #4b1d66; font-weight: 850; }
.support-field input,
.support-field select,
.support-field textarea {
  width: 100%;
  scroll-margin-top: 122px;
  min-height: 51px;
  padding: 11px 14px;
  border: 2px solid #dfd0e8;
  border-radius: 15px;
  background: #fff;
  color: #4f4057;
  font: 600 1rem/1.35 "Lila Support Baloo", sans-serif;
}
.support-field textarea { min-height: 180px; resize: vertical; }
.support-field input:focus,
.support-field select:focus,
.support-field textarea:focus { outline: 3px solid rgba(247, 189, 40, .45); border-color: #8651a9; }
.support-field small { color: #776b7d; font-size: .82rem; line-height: 1.4; }
.support-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.support-form-message { padding: 12px 14px; border-radius: 14px; font-weight: 750; line-height: 1.4; }
.support-form-message[hidden] { display: none !important; }
.support-form-message[data-type="error"] { background: #fff0f1; color: #963344; }
.support-form-message[data-type="info"] { background: #eef7ff; color: #315e80; }
.support-submit { width: 100%; min-height: 53px; justify-content: center; }
.support-submit:disabled { opacity: .66; cursor: wait; }
.support-success { padding: clamp(30px, 6vw, 56px) 20px; text-align: center; border-radius: 25px; background: linear-gradient(145deg, #eff9e9, #fff9dc); }
.support-success[hidden] { display: none !important; }
.support-success-icon { font-size: 3.6rem; }
.support-success h2 { margin: 11px auto 8px; }
.support-success p { margin: 0 auto 22px; max-width: 420px; font-size: 1.04rem; }
.support-success .primary-btn { justify-content: center; }

.parental-dashboard-page .parental-actions-grid { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.parental-dashboard-page .parental-support-card { grid-column: 1 / -1; }
.parental-dashboard-page .parental-action-icon.is-support { background: linear-gradient(145deg, #eee2ff, #fff3c8); color: #5a267b; font-size: clamp(1.7rem, 7vw, 2.6rem); }
.premium-support-link { width: 100%; justify-content: center; }

@media (max-width: 760px) {
  .beta-notice-layer { place-items: center; padding-inline: 10px; }
  .beta-notice-card { max-height: calc(100dvh - 22px); padding: 22px 17px; border-radius: 27px; }
  .beta-notice-icon { width: 68px; margin-bottom: 10px; font-size: 2.7rem; }
  .beta-notice-card h2 { margin-bottom: 10px; font-size: clamp(1.85rem, 8.7vw, 2.5rem); }
  .beta-notice-copy { gap: 7px; }
  .beta-notice-copy p { font-size: .94rem; line-height: 1.42; }
  .beta-notice-actions { margin-top: 17px; }
  .support-shell { width: min(100% - 18px, 620px); padding: 17px 0 38px; }
  .support-layout { grid-template-columns: 1fr; gap: 15px; }
  .support-intro { position: static; padding: 24px 20px; text-align: center; }
  .support-intro-icon { width: 68px; margin-inline: auto; }
  .support-eyebrow { margin-top: 15px; }
  .support-intro h1 { font-size: clamp(2.3rem, 12vw, 3.3rem); }
  .support-intro > p { font-size: .97rem; line-height: 1.5; }
  .support-guardian-note { text-align: left; }
  .support-form-card { padding: 24px 17px; border-radius: 27px; }
  .support-field textarea { min-height: 150px; }
}

@media (max-width: 390px) {
  .beta-notice-card { padding: 18px 14px; }
  .beta-notice-icon { width: 59px; font-size: 2.25rem; }
  .beta-notice-card h2 { font-size: 1.78rem; }
  .beta-notice-copy p { font-size: .88rem; }
  .beta-notice-primary, .beta-notice-support { min-height: 48px; padding: 10px 12px; font-size: .91rem; }
  .support-shell { width: calc(100% - 14px); }
  .support-intro, .support-form-card { padding-inline: 15px; }
}

@media (max-height: 700px) and (orientation: landscape) {
  .beta-notice-layer { place-items: start center; }
  .beta-notice-card { max-height: calc(100dvh - 20px); padding: 17px 24px; }
  .beta-notice-icon { width: 52px; margin-bottom: 5px; font-size: 2rem; }
  .beta-notice-card h2 { margin-bottom: 7px; font-size: 1.8rem; }
  .beta-notice-copy { gap: 4px; }
  .beta-notice-copy p { font-size: .84rem; line-height: 1.34; }
  .beta-notice-actions { grid-template-columns: 1fr 1fr; margin-top: 11px; }
  .beta-notice-primary, .beta-notice-support { min-height: 44px; font-size: .85rem; }
}