/* Conversion surfaces only: main, public signup, pricing. No Studio/admin rules. */
:root {
  --neu-bg: #22242b;
  --neu-ink: #f7f4f7;
  --neu-muted: #c4bec9;
  --neu-raised: 10px 10px 25px #121318, -6px -6px 18px #30333c;
  --neu-inset: inset 5px 5px 12px #14151b, inset -4px -4px 10px #30333c;
  --neu-pink: #ff83a8;
}
html[data-theme="light"] {
  --neu-bg: #ececf1;
  --neu-ink: #24232c;
  --neu-muted: #56515e;
  --neu-raised: 10px 10px 25px #c9c9d1, -6px -6px 18px #fff;
  --neu-inset: inset 5px 5px 12px #d0d0d9, inset -4px -4px 10px #fff;
}
/* Retain a visible edge, focus ring and legible text alongside soft shadows. */
#composeView, body.pricing-page { background: var(--neu-bg); color: var(--neu-ink); }
#composeView .make, #composeView .ways { background: var(--neu-bg); }
#composeView .welcome-hero {
  background: radial-gradient(ellipse at 50% 0, #72304955, transparent 60%), var(--neu-bg);
  border: 1px solid #a3879733; border-radius: 30px;
  box-shadow: var(--neu-inset); isolation: isolate;
}
#composeView .welcome-hero::after { box-shadow: inset 0 0 45px #ff83a808; }
#composeView .hero-grid { opacity: .12; }
#composeView .hero-copy { padding-top: 64px; padding-bottom: 86px; }
#composeView .hero-copy h1 { color: var(--neu-ink); text-shadow: none; }
#composeView .hero-copy h1 span { color: var(--neu-pink); }
#composeView .hero-copy p { color: var(--neu-muted); }
#composeView .hero-float, #composeView .way {
  border-radius: 22px; background: var(--neu-bg); color: var(--neu-ink);
  border: 1px solid #a3879740; box-shadow: var(--neu-raised);
}
#composeView .way { transition: transform .2s ease, border-color .2s ease; }
#composeView .way:hover { transform: translateY(-5px); border-color: var(--neu-pink); }
#composeView .way-body p { color: var(--neu-muted); }
#composeView .start-invitation { display: grid; justify-items: center; gap: 14px; margin: 28px 0 12px; }
#composeView .first-video-tag {
  color: #ffc0d3; background: #3e2835; border: 1px solid #b36b865c;
  padding: 6px 14px; font-size: 13px; font-weight: 700; border-radius: 99px;
  box-shadow: var(--neu-inset);
}
#composeView #startMakingVideo {
  min-height: 56px; margin: 0; padding: 16px 34px; border-radius: 18px;
  color: #29121c; background: linear-gradient(145deg, #ffa2bd, #f36592);
  border: 1px solid #ffbad0; box-shadow: 7px 7px 17px #121318, -4px -4px 12px #383039;
  animation: vidi-start-attention 2.4s ease-in-out 3;
}
#composeView #startMakingVideo:hover { transform: translateY(-3px); }
#composeView #startMakingVideo:active { transform: translateY(1px); }
#composeView #firstVideoTerms { max-width: 300px; color: var(--neu-muted); font-size: 12px; line-height: 1.6; }
#composeView .hero-pricing-link, #composeView .hero-study-link {
  display: inline-block; margin: 8px 10px; padding: 8px 0;
  color: var(--neu-ink); font-size: 14px; text-underline-offset: 4px;
}
#composeView :is(a,button):focus-visible, .pricing-page :is(a,button):focus-visible {
  outline: 3px solid var(--neu-pink); outline-offset: 5px;
}
.pricing-page .pricing-card, .pricing-page .pricing-credit-guide, .pricing-page .pricing-state {
  border-radius: 22px; background: var(--neu-bg); color: var(--neu-ink);
  box-shadow: var(--neu-raised); border-color: #a3879740;
}
.pricing-page .pricing-card.featured { border-color: #f477a0; }
.pricing-page .pricing-action { border-radius: 12px; box-shadow: var(--neu-raised); }
.pricing-page .pricing-action.primary { background: #ff83a8; color: #29121c; border-color: #ffa7c2; }
.pricing-page .pricing-action:disabled { box-shadow: var(--neu-inset); }
.pricing-shortcuts { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 28px; }
.pricing-page #plans-title, .pricing-page #packs-title { scroll-margin-top: 100px; }
.pricing-page .pricing-lede, .pricing-page .pricing-audience, .pricing-page .pricing-fineprint,
.pricing-page .pricing-features, .pricing-page .pricing-amount span { color: var(--neu-muted); }
/* Landing keeps its content and real signup form, with the same tactile language. */
body[data-page-version="education-v4"] {
  --ink: #22242b; --ink-2: #292b34; --ink-3: #363842;
  --paper: #f7f4f7; --paper-2: #e2dbe4; --hi: #ff83a8; --pen: #a52651;
  --red: #ff83a8; --teal: #e6a7c0; --muted-dark: #c4bec9;
  background: #22242b;
}
body[data-page-version="education-v4"] .site-header { background: #22242bf5; }
body[data-page-version="education-v4"] main { overflow-x: clip; }
body[data-page-version="education-v4"] .monitor {
  border-radius: 22px !important; box-shadow: var(--neu-raised);
}
body[data-page-version="education-v4"] :is(.btn, .auth-dialog, .screen, .tile, .products-panel) {
  border-radius: 18px !important;
  box-shadow: 8px 8px 22px #121318aa, -4px -4px 14px #3b3e4855;
}
body[data-page-version="education-v4"] .auth-dialog {
  background: #22242b; color: #f7f4f7; border: 1px solid #64606a;
}
body[data-page-version="education-v4"] .auth-dialog :is(input, .auth-tabs) {
  border-radius: 10px !important; background: #22242b; color: #f7f4f7;
  box-shadow: inset 4px 4px 10px #131419, inset -3px -3px 8px #373943;
}
body[data-page-version="education-v4"] .auth-dialog :is(label, .auth-description, .form-note, .legal-note, .verify-note) { color: #c4bec9; }
body[data-page-version="education-v4"] .auth-dialog button.primary,
body[data-page-version="education-v4"] .auth-dialog a.primary { border-radius: 12px !important; background: #ff83a8; color: #29121c; }
body[data-page-version="education-v4"] .auth-dialog :focus-visible { outline-color: #ff83a8; }
body[data-page-version="education-v4"] .signup-gift-banner { color: #29121c; }
body[data-page-version="education-v4"] .auth-tab[aria-selected="true"] { background: #ff83a8; color: #29121c; border-radius: 8px !important; }
body[data-page-version="education-v4"] .field input:focus { border-color: #ff83a8; }
body[data-page-version="education-v4"] .pricing-link { color: #f7f4f7; text-underline-offset: 4px; font-weight: 600; }
@keyframes vidi-start-attention {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); box-shadow: 0 0 0 7px #ff83a81c, 8px 12px 24px #121318; }
}
@media(max-width:900px) {
  #composeView .welcome-hero { min-height: 780px; }
  #composeView .hero-copy { padding: 40px 12px 270px; }
}
@media(max-width:600px) {
  #composeView .welcome-hero { border-radius: 22px; }
  #composeView .hero-copy { width: 100%; }
  .pricing-page .nav { gap: 12px; flex-wrap: wrap; }
  body[data-page-version="education-v4"] .header-inner { flex-wrap: wrap; gap: 12px; }
  body[data-page-version="education-v4"] .header-account { gap: 12px; margin-left: auto; }
  body[data-page-version="education-v4"] .pricing-link { font-size: 14px; }
  body[data-page-version="education-v4"] .login-link { display: inline; }
}
@media(prefers-reduced-motion:reduce) {
  #composeView #startMakingVideo, #composeView .way { animation: none; transition: none; }
}