/* ---------- easier on the eyes ----------
   1) small text a bit darker, 2) the white is a softer pearl, 3) a dark theme when the device is in dark mode */

/* 1 + 2: light theme */
:root { --soft-ink: #4B4D54; --pearl: #E8E6E2; --mist: #DADADD;
  --serif: "Tenor Sans", "Manrope", system-ui, sans-serif;   /* headings */
  --sans: "Manrope", system-ui, -apple-system, sans-serif;     /* text */ }
/* Tenor Sans has one weight: keep headings regular, never fake-bold */
:root { font-synthesis: none; }
h1, h2, h3, .buy-title, .brand span, .about-body h2, .pp-head h1, .acc h1, .ac h1, .acc-about h2 { font-weight: 400; letter-spacing: -.01em; }
body { background: radial-gradient(120% 70% at 50% 0%, #F1F0ED 0%, var(--pearl) 55%, var(--mist) 100%) fixed; }
.satin i:nth-child(1), .satin i:nth-child(4) { background: #f4f3f0; opacity: .75; }
.pp-head p, .about-lead, .about-brands p, .acc-lead, .acc-about p, .acc-about ul { color: #33323b; }

/* 3: dark theme — chosen with the sun/moon button, or by the device setting when nothing was chosen */
:root[data-theme="dark"] {
    color-scheme: dark;
    --graphite: #ECEBF1; --soft-ink: #AEADB9; --pearl: #19181E; --mist: #0F0F13; --white: #1E1D24; --silver: #4a4b55;
  }
:root[data-theme="dark"] body { background: radial-gradient(120% 70% at 50% 0%, #26252D 0%, var(--pearl) 55%, var(--mist) 100%) fixed; color: var(--graphite); }
:root[data-theme="dark"] .satin i:nth-child(1) { background: #3a3550; opacity: .55; }
:root[data-theme="dark"] .satin i:nth-child(2) { background: #23262f; opacity: .7; }
:root[data-theme="dark"] .satin i:nth-child(3) { background: #2a2838; opacity: .6; }
:root[data-theme="dark"] .satin i:nth-child(4) { background: #2c2a3c; opacity: .5; }
/* glass: smoked instead of milky */
:root[data-theme="dark"] .glass-el {
    background:
      radial-gradient(150px circle at var(--mx) var(--my), rgb(255 255 255 / calc(var(--near) * .14)), rgb(255 255 255 / 0) 72%),
      linear-gradient(180deg, rgb(255 255 255 / .085) 0%, rgb(255 255 255 / .035) 55%, rgb(255 255 255 / .06) 100%);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / .1),
      inset 0 1px 0 rgb(255 255 255 / .2),
      inset 0 -10px 18px -12px rgb(0 0 0 / .45),
      0 2px 0 -1px rgb(255 255 255 / .06),
      0 12px 18px -8px rgb(0 0 0 / .45),
      0 30px 44px -20px rgb(0 0 0 / .6);
  }
:root[data-theme="dark"] .glass-el::before { opacity: .12; }
:root[data-theme="dark"] .glass-el::after { filter: none; opacity: calc(var(--near) * .35); }
:root[data-theme="dark"] .glass-el.is-pressed { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 8px 14px -6px rgb(0 0 0 / .5); }
/* text that was set to a fixed dark color */
:root[data-theme="dark"] .pp-head p, :root[data-theme="dark"] .about-lead, :root[data-theme="dark"] .about-brands p, :root[data-theme="dark"] .acc-lead, :root[data-theme="dark"] .acc-about p, :root[data-theme="dark"] .acc-about ul, :root[data-theme="dark"] .buy-sub, :root[data-theme="dark"] .buy-list li { color: #D2D1DA; }
:root[data-theme="dark"] .badge, :root[data-theme="dark"] .tag { background: #ECEBF1; color: #19181E; }
:root[data-theme="dark"] .hero-card li::before, :root[data-theme="dark"] .cart-lang button.on { color: #b9acff; }
:root[data-theme="dark"] .prod-steps li::before { color: #d6ceff; background: rgb(140 120 230 / .3); }
:root[data-theme="dark"] .buy-fail { color: #ffb3c7; background: rgb(255 80 130 / .12); }
:root[data-theme="dark"] .buy-err { color: #ff9cb7; }
:root[data-theme="dark"] .pm { background: rgb(255 255 255 / .1); color: var(--graphite); }
:root[data-theme="dark"] .pm-apple, :root[data-theme="dark"] .pm-mono { background: #000; }
/* fields, chips and little white surfaces */
:root[data-theme="dark"] input[type="email"], :root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] .cart-promo-row input, :root[data-theme="dark"] .buy-field input {
    background: rgb(255 255 255 / .06) !important; color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14) !important;
  }
:root[data-theme="dark"] input::placeholder { color: #85848f; }
:root[data-theme="dark"] .buy-lang b, :root[data-theme="dark"] .cart-lang button, :root[data-theme="dark"] .about-tools span, :root[data-theme="dark"] .acc-file, :root[data-theme="dark"] .cart-list li, :root[data-theme="dark"] .ac-prompt { background: rgb(255 255 255 / .06); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
:root[data-theme="dark"] .buy-lang input:checked + b { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px #a898ff; }
:root[data-theme="dark"] .cart-lang button.on, :root[data-theme="dark"] .cart-n, :root[data-theme="dark"] .pd-add.in, :root[data-theme="dark"] .cart-add.in, :root[data-theme="dark"] .pc.on .pc-pick { background: #7b68e0; color: #fff; }
:root[data-theme="dark"] .pc { background: #24232b; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 18px 30px -22px rgb(0 0 0 / .7); }
:root[data-theme="dark"] .pc-info span, :root[data-theme="dark"] .pc-pick, :root[data-theme="dark"] .pc-play, :root[data-theme="dark"] .gal-nav { background: rgb(30 29 36 / .85); color: var(--graphite); }
:root[data-theme="dark"] .pc-pick svg, :root[data-theme="dark"] .gal-nav svg { stroke: var(--graphite); }
:root[data-theme="dark"] .pc-play svg { fill: var(--graphite); }
:root[data-theme="dark"] .pp-knob { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
:root[data-theme="dark"] .lang-knob, :root[data-theme="dark"] .nav-pill { filter: brightness(.35); }
:root[data-theme="dark"] .buy-backdrop { background: rgb(10 10 14 / .6); }
:root[data-theme="dark"] .prod-gallery img, :root[data-theme="dark"] .prod-media video, :root[data-theme="dark"] .about-video video { box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
:root[data-theme="dark"] .freeb { background: #2f7a50; }
:root[data-theme="dark"] a { color: inherit; }
:root[data-theme="dark"] .buy-check a, :root[data-theme="dark"] .acc-steps a, :root[data-theme="dark"] .ac-sub a { color: #c9c0ff; }
:root[data-theme="dark"] .acc-box .vid-frame { background: #000; }
:root[data-theme="dark"] hr, :root[data-theme="dark"] .about { border-color: rgb(255 255 255 / .08); }
/* robot bubble, small chips, icons, the free card */
:root[data-theme="dark"] .robot-say { background: linear-gradient(180deg, rgb(44 43 52 / .92), rgb(34 33 41 / .86)); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 12px 24px -12px rgb(0 0 0 / .6); }
:root[data-theme="dark"] .tagx { background: rgb(255 255 255 / .08); color: var(--soft-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
:root[data-theme="dark"] .free { background: linear-gradient(90deg, rgb(40 90 62 / .55), rgb(255 255 255 / .04) 60%) !important; }
:root[data-theme="dark"] .ic { background: linear-gradient(180deg, #3a3943, #2a2931); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 6px 12px -6px rgb(0 0 0 / .5); }
:root[data-theme="dark"] .ic svg { stroke: var(--graphite); }
:root[data-theme="dark"] .buy-x { background: rgb(255 255 255 / .1); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
/* windows: more solid so the text is easy to read */
:root[data-theme="dark"] .buy-card, :root[data-theme="dark"] .prod-card, :root[data-theme="dark"] .cart-panel, :root[data-theme="dark"] .pd-card, :root[data-theme="dark"] .login-card, :root[data-theme="dark"] .cart-bar { background: linear-gradient(180deg, rgb(38 37 45 / .96), rgb(28 27 34 / .96)) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --graphite: #ECEBF1; --soft-ink: #AEADB9; --pearl: #19181E; --mist: #0F0F13; --white: #1E1D24; --silver: #4a4b55;
  }
  :root:not([data-theme="light"]) body { background: radial-gradient(120% 70% at 50% 0%, #26252D 0%, var(--pearl) 55%, var(--mist) 100%) fixed; color: var(--graphite); }
  :root:not([data-theme="light"]) .satin i:nth-child(1) { background: #3a3550; opacity: .55; }
  :root:not([data-theme="light"]) .satin i:nth-child(2) { background: #23262f; opacity: .7; }
  :root:not([data-theme="light"]) .satin i:nth-child(3) { background: #2a2838; opacity: .6; }
  :root:not([data-theme="light"]) .satin i:nth-child(4) { background: #2c2a3c; opacity: .5; }
  /* glass: smoked instead of milky */
:root:not([data-theme="light"]) .glass-el {
    background:
      radial-gradient(150px circle at var(--mx) var(--my), rgb(255 255 255 / calc(var(--near) * .14)), rgb(255 255 255 / 0) 72%),
      linear-gradient(180deg, rgb(255 255 255 / .085) 0%, rgb(255 255 255 / .035) 55%, rgb(255 255 255 / .06) 100%);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / .1),
      inset 0 1px 0 rgb(255 255 255 / .2),
      inset 0 -10px 18px -12px rgb(0 0 0 / .45),
      0 2px 0 -1px rgb(255 255 255 / .06),
      0 12px 18px -8px rgb(0 0 0 / .45),
      0 30px 44px -20px rgb(0 0 0 / .6);
  }
  :root:not([data-theme="light"]) .glass-el::before { opacity: .12; }
  :root:not([data-theme="light"]) .glass-el::after { filter: none; opacity: calc(var(--near) * .35); }
  :root:not([data-theme="light"]) .glass-el.is-pressed { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), inset 0 8px 14px -6px rgb(0 0 0 / .5); }
  /* text that was set to a fixed dark color */
:root:not([data-theme="light"]) .pp-head p, :root:not([data-theme="light"]) .about-lead, :root:not([data-theme="light"]) .about-brands p, :root:not([data-theme="light"]) .acc-lead, :root:not([data-theme="light"]) .acc-about p, :root:not([data-theme="light"]) .acc-about ul, :root:not([data-theme="light"]) .buy-sub, :root:not([data-theme="light"]) .buy-list li { color: #D2D1DA; }
  :root:not([data-theme="light"]) .badge, :root:not([data-theme="light"]) .tag { background: #ECEBF1; color: #19181E; }
  :root:not([data-theme="light"]) .hero-card li::before, :root:not([data-theme="light"]) .cart-lang button.on { color: #b9acff; }
  :root:not([data-theme="light"]) .prod-steps li::before { color: #d6ceff; background: rgb(140 120 230 / .3); }
  :root:not([data-theme="light"]) .buy-fail { color: #ffb3c7; background: rgb(255 80 130 / .12); }
  :root:not([data-theme="light"]) .buy-err { color: #ff9cb7; }
  :root:not([data-theme="light"]) .pm { background: rgb(255 255 255 / .1); color: var(--graphite); }
  :root:not([data-theme="light"]) .pm-apple, :root:not([data-theme="light"]) .pm-mono { background: #000; }
  /* fields, chips and little white surfaces */
:root:not([data-theme="light"]) input[type="email"], :root:not([data-theme="light"]) input[type="text"], :root:not([data-theme="light"]) .cart-promo-row input, :root:not([data-theme="light"]) .buy-field input {
    background: rgb(255 255 255 / .06) !important; color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14) !important;
  }
  :root:not([data-theme="light"]) input::placeholder { color: #85848f; }
  :root:not([data-theme="light"]) .buy-lang b, :root:not([data-theme="light"]) .cart-lang button, :root:not([data-theme="light"]) .about-tools span, :root:not([data-theme="light"]) .acc-file, :root:not([data-theme="light"]) .cart-list li, :root:not([data-theme="light"]) .ac-prompt { background: rgb(255 255 255 / .06); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
  :root:not([data-theme="light"]) .buy-lang input:checked + b { background: rgb(255 255 255 / .16); box-shadow: inset 0 0 0 1.5px #a898ff; }
  :root:not([data-theme="light"]) .cart-lang button.on, :root:not([data-theme="light"]) .cart-n, :root:not([data-theme="light"]) .pd-add.in, :root:not([data-theme="light"]) .cart-add.in, :root:not([data-theme="light"]) .pc.on .pc-pick { background: #7b68e0; color: #fff; }
  :root:not([data-theme="light"]) .pc { background: #24232b; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 18px 30px -22px rgb(0 0 0 / .7); }
  :root:not([data-theme="light"]) .pc-info span, :root:not([data-theme="light"]) .pc-pick, :root:not([data-theme="light"]) .pc-play, :root:not([data-theme="light"]) .gal-nav { background: rgb(30 29 36 / .85); color: var(--graphite); }
  :root:not([data-theme="light"]) .pc-pick svg, :root:not([data-theme="light"]) .gal-nav svg { stroke: var(--graphite); }
  :root:not([data-theme="light"]) .pc-play svg { fill: var(--graphite); }
  :root:not([data-theme="light"]) .pp-knob { background: rgb(255 255 255 / .14); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
  :root:not([data-theme="light"]) .lang-knob, :root:not([data-theme="light"]) .nav-pill { filter: brightness(.35); }
  :root:not([data-theme="light"]) .buy-backdrop { background: rgb(10 10 14 / .6); }
  :root:not([data-theme="light"]) .prod-gallery img, :root:not([data-theme="light"]) .prod-media video, :root:not([data-theme="light"]) .about-video video { box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
  :root:not([data-theme="light"]) .freeb { background: #2f7a50; }
  :root:not([data-theme="light"]) a { color: inherit; }
  :root:not([data-theme="light"]) .buy-check a, :root:not([data-theme="light"]) .acc-steps a, :root:not([data-theme="light"]) .ac-sub a { color: #c9c0ff; }
  :root:not([data-theme="light"]) .acc-box .vid-frame { background: #000; }
  :root:not([data-theme="light"]) hr, :root:not([data-theme="light"]) .about { border-color: rgb(255 255 255 / .08); }
  /* robot bubble, small chips, icons, the free card */
:root:not([data-theme="light"]) .robot-say { background: linear-gradient(180deg, rgb(44 43 52 / .92), rgb(34 33 41 / .86)); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), 0 12px 24px -12px rgb(0 0 0 / .6); }
  :root:not([data-theme="light"]) .tagx { background: rgb(255 255 255 / .08); color: var(--soft-ink); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
  :root:not([data-theme="light"]) .free { background: linear-gradient(90deg, rgb(40 90 62 / .55), rgb(255 255 255 / .04) 60%) !important; }
  :root:not([data-theme="light"]) .ic { background: linear-gradient(180deg, #3a3943, #2a2931); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1), 0 6px 12px -6px rgb(0 0 0 / .5); }
  :root:not([data-theme="light"]) .ic svg { stroke: var(--graphite); }
  :root:not([data-theme="light"]) .buy-x { background: rgb(255 255 255 / .1); color: var(--graphite); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
  /* windows: more solid so the text is easy to read */
:root:not([data-theme="light"]) .buy-card, :root:not([data-theme="light"]) .prod-card, :root:not([data-theme="light"]) .cart-panel, :root:not([data-theme="light"]) .pd-card, :root:not([data-theme="light"]) .login-card, :root:not([data-theme="light"]) .cart-bar { background: linear-gradient(180deg, rgb(38 37 45 / .96), rgb(28 27 34 / .96)) !important; }
}

/* the light/dark button */
.theme-btn { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; color: var(--graphite); flex: none; }
.theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--spring), opacity .3s; }
.theme-btn .moon { position: absolute; }
.theme-btn .sun { opacity: 0; transform: rotate(-90deg) scale(.6); }
:root[data-theme="dark"] .theme-btn .moon { opacity: 0; transform: rotate(90deg) scale(.6); }
:root[data-theme="dark"] .theme-btn .sun { opacity: 1; transform: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .moon { opacity: 0; transform: rotate(90deg) scale(.6); }
  :root:not([data-theme="light"]) .theme-btn .sun { opacity: 1; transform: none; }
}

/* Tenor Sans is wider than the old serif: keep the About heading on one line */
.about-body h2 { font-size: clamp(36px, 5vw, 62px); }
@media (min-width: 901px) { .about-body h2 { white-space: nowrap; } }

/* first screen: a clear headline — what this site is and who it is for */
.hero-head { position: absolute; z-index: 3; left: 0; right: 0; top: 104px; padding: 0 var(--pad); text-align: center; pointer-events: none; }
.hero-head h1 { margin: 0 auto; max-width: 18ch; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -.015em; color: var(--graphite); }
.hero-head p { margin: 14px auto 0; max-width: 58ch; font-size: clamp(14.5px, 1.25vw, 17px); line-height: 1.55; color: var(--soft-ink); }
.hero { --stage-top: 250px; }
.hero-stage:not(.docked) { inset: var(--stage-top) 0 200px; }
@media (max-width: 900px) {
  .hero-head { top: 150px; }
  .hero-head h1 { max-width: 14ch; }
  .hero { --stage-top: 310px; }
  .hero-stage:not(.docked) { inset: var(--stage-top) 0 210px; }
}
@media (max-height: 760px) and (min-width: 901px) {
  .hero-head { top: 96px; } .hero-head p { margin-top: 8px; }
  .hero { --stage-top: 215px; }
  .hero-stage:not(.docked) { inset: var(--stage-top) 0 190px; }
}
/* the robot's speech bubble sits beside its head, not over the headline */
.robot-say:not(.at-dock) { top: calc(var(--stage-top) + 70px); left: calc(50% + 100px); translate: 0 8px; max-width: min(300px, calc(50vw - 120px)); text-align: left; }
.robot-say:not(.at-dock).show { translate: 0 0; }
@media (max-width: 900px) {
  .robot-say:not(.at-dock) { top: calc(var(--stage-top) + 40px); left: calc(50% + 62px); max-width: calc(50vw - 74px); font-size: 13px; padding: 8px 12px; }
}

/* the left pill is the "Home" button */
.brand .brand-home { font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: 0; }
.brand { min-width: 0; padding-left: 26px; padding-right: 26px; }
.topbar .brand { justify-content: center; }

/* glowing "Generate" button in the top bar → Studio */
.gen-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 18px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  font: 700 14.5px/1 var(--sans); color: #fff; background: linear-gradient(120deg, #6d5bd0 0%, #9a76e0 55%, #c592e2 100%);
  box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 10px 26px -8px rgb(124 98 226 / .6), 0 0 0 1px rgb(109 91 208 / .3); transition: transform .3s var(--spring), box-shadow .3s; }
.gen-btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .35) inset, 0 14px 34px -8px rgb(124 98 226 / .8), 0 0 0 1px rgb(109 91 208 / .3); }
.gen-btn:focus-visible { outline: 2px solid #6d5bd0; outline-offset: 3px; }
.gen-btn svg { width: 17px; height: 17px; fill: currentColor; }
@media (max-width: 900px) { .gen-btn { width: 44px; padding: 0; justify-content: center; } .gen-btn span { display: none; } }
@media (prefers-reduced-motion: reduce) { .gen-btn { transition: none; } }