.landing-body {
  color: #2b2435;
  background: #fbfaf8;
  background-image: radial-gradient(#7754c80b 0.7px, transparent 0.7px);
  background-size: 18px 18px;
}
.landing-body .topbar {
  height: 76px;
  padding-inline: max(28px, calc((100% - 1160px) / 2));
  background: rgb(251 250 248 / 92%);
  border-bottom-color: #ece8e2;
  backdrop-filter: blur(14px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; letter-spacing: -.045em; }
.brand .brand-logo { width: 35px; height: 35px; object-fit: contain; }
.brand span { color: #2b2435; }
.brand span b { color: #7754c8; font-weight: 800; }
.topbar nav .nav-signin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 17px;
  border: 1px solid #ddd4ee;
  border-radius: 999px;
  color: #6746b3;
  background: #fff;
  font-size: 13px;
  font-weight: 750;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.topbar nav .nav-signin:hover { background: #f5f0fc; border-color: #c8b8e8; transform: translateY(-1px); }
.landing-main { width: min(1160px, calc(100% - 56px)); margin: 0 auto 70px; }
.landing-body footer { padding-top: 20px; color: #8a8293; }
.landing-body footer span { color: #7754c8; }
.landing-page { padding-top: 26px; }
.landing-hero {
  min-height: 540px;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: 54px;
  padding: 32px 8px 46px;
}
.hero-copy { position: relative; z-index: 1; padding: 30px 0 40px; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; color: #6c54a4; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: #8e70d0; box-shadow: 0 0 0 5px #8e70d01c; }
.hero-copy h1 { margin: 23px 0 20px; max-width: 650px; color: #282234; font-family: Georgia, "Times New Roman", serif; font-size: clamp(48px, 5.8vw, 74px); font-weight: 500; letter-spacing: -.065em; line-height: .99; }
.hero-copy h1 em { color: #7754c8; font-weight: 500; }
.hero-lede { max-width: 490px; margin: 0; color: #716a79; font-size: 16px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 30px; }
.hero-primary { gap: 22px; padding: 14px 20px; border-radius: 999px; color: #fff; background: #7754c8; box-shadow: 0 9px 22px #7754c833; font-size: 14px; font-weight: 750; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.hero-primary:hover { color: #fff; background: #6844ba; box-shadow: 0 12px 26px #7754c844; transform: translateY(-2px); }
.hero-primary span { font-size: 17px; }
.hero-secondary { display: inline-flex; align-items: center; gap: 9px; color: #615a6b; font-size: 13px; font-weight: 700; text-decoration: none; }
.hero-secondary:hover { color: #7754c8; }
.hero-assurance { display: flex; align-items: center; gap: 8px; margin-top: 27px; color: #8a8292; font-size: 11px; }
.hero-assurance span { color: #8d6acb; font-size: 15px; }
.hero-art { min-height: 430px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { position: absolute; z-index: -2; width: min(420px, 90%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #eae1f9 0, #f2ecfa 48%, #f7f2fb00 72%); content: ""; }
.art-orbit { position: absolute; z-index: -1; border: 1px solid #bba9dc65; border-radius: 50%; transform: rotate(-25deg); }
.orbit-one { width: 440px; height: 240px; }
.orbit-two { width: 460px; height: 310px; transform: rotate(42deg); }
.book-preview { width: min(340px, 78%); min-height: 385px; position: relative; display: flex; flex-direction: column; padding: 20px 24px 17px; border: 1px solid #eee8f4; border-radius: 8px; background: linear-gradient(145deg, #fff 0%, #fdfcff 100%); box-shadow: 0 28px 70px #39295a20, 0 4px 14px #39295a0d; transform: rotate(2deg); }
.preview-top,.preview-bottom { display: flex; align-items: center; justify-content: space-between; color: #978da2; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.preview-logo { width: 20px; height: 20px; object-fit: contain; }
.preview-menu { color: #7254b3; font-size: 18px; letter-spacing: 0; }
.preview-rule { height: 1px; margin-top: 14px; background: #eeeaf2; }
.preview-content { flex: 1; padding: 43px 8px 28px; }
.preview-eyebrow { color: #8367bb; font-size: 8px; font-weight: 800; letter-spacing: .18em; }
.preview-content h2 { margin: 15px 0 13px; color: #2d2638; font: 500 43px/.96 Georgia, "Times New Roman", serif; letter-spacing: -.055em; }
.preview-content h2 em { color: #7652c3; font-weight: 500; }
.preview-content p { max-width: 210px; color: #817a89; font: 11px/1.7 system-ui, sans-serif; }
.preview-link { display: flex; align-items: center; gap: 10px; margin-top: 26px; color: #6849ad; font-size: 9px; font-weight: 800; letter-spacing: .02em; }
.preview-bottom { border-top: 1px solid #eeeaf2; padding-top: 14px; color: #8c8397; font-size: 8px; letter-spacing: .03em; }
.preview-live { display: flex; align-items: center; gap: 5px; color: #577e68; font-size: 7px; letter-spacing: .12em; }
.preview-live i { width: 5px; height: 5px; border-radius: 50%; background: #6caa83; }
.live-card { position: absolute; right: 0; bottom: 33px; display: flex; align-items: center; gap: 11px; padding: 12px 16px 12px 12px; border: 1px solid #eee8f4; border-radius: 12px; background: #fff; box-shadow: 0 12px 36px #35254e18; }
.live-check { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #7754c8; font-size: 14px; }
.live-card b,.live-card small { display: block; }
.live-card b { color: #373044; font-size: 10px; }
.live-card small { margin-top: 3px; color: #8b8493; font-size: 9px; }
.hero-sparkle { position: absolute; color: #a58bd6; }
.sparkle-a { top: 30px; right: 17%; font-size: 22px; }
.sparkle-b { left: 6%; bottom: 70px; color: #c2a881; font-size: 16px; }
.benefit-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 24px 30px; border: 1px solid #ece7e0; border-radius: 16px; background: #fffdfb; box-shadow: 0 10px 32px #382c1c08; }
.benefit-strip article { display: flex; align-items: center; gap: 14px; }
.benefit-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #7754c8; background: #f2edfa; font: 700 10px Georgia, serif; }
.benefit-strip b,.benefit-strip small { display: block; }
.benefit-strip b { color: #3d3547; font-size: 12px; }
.benefit-strip small { margin-top: 4px; color: #8a8390; font-size: 10px; }
.plans-section { padding: 106px 0 88px; scroll-margin-top: 30px; }
.plans-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 28px; }
.plans-heading .eyebrow,.closing-cta .eyebrow { color: #7754c8; }
.plans-heading h2,.closing-cta h2 { margin: 10px 0 0; color: #2b2435; font: 500 clamp(30px, 4vw, 43px)/1.1 Georgia, "Times New Roman", serif; letter-spacing: -.045em; }
.plans-heading > p { max-width: 340px; margin: 0 0 3px; color: #7d7584; font-size: 12px; line-height: 1.7; }
.billing-controls { display: flex; justify-content: flex-end; margin: 0 0 18px; }
.billing-toggle { display: inline-flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid #e8e0f1; border-radius: 999px; background: #fffdfb; }
.billing-choice { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 0; border-radius: 999px; color: #6d6575; background: transparent; font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.billing-choice:hover { background: #f5f0fa; }
.billing-choice.is-selected { color: #fff; background: #7754c8; }
.billing-choice span { color: #7754c8; font-size: 9px; font-weight: 800; }
.billing-choice.is-selected span { color: #f0e8ff; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 17px; }
.plan-card { min-height: 310px; position: relative; display: flex; flex-direction: column; padding: 27px 25px 22px; overflow: hidden; border: 1px solid #ebe6df; border-radius: 15px; background: #fffdfb; }
.plan-featured { border-color: #cdbde8; background: linear-gradient(155deg, #fbf8ff, #fffdfb 72%); box-shadow: 0 12px 34px #5f448317; }
.plan-ribbon { position: absolute; top: 0; right: 0; padding: 8px 12px 8px 16px; border-bottom-left-radius: 12px; color: #fff; background: #7754c8; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.plan-name { display: flex; align-items: center; justify-content: space-between; color: #342c40; font: 500 25px Georgia, "Times New Roman", serif; }
.plan-spark { color: #9b80cd; font: 16px system-ui, sans-serif; }
.plan-note { min-height: 34px; margin: 8px 0 19px; color: #817989; font-size: 11px; }
.plan-price { display: flex; align-items: baseline; gap: 7px; margin: -5px 0 16px; color: #342c40; }
.plan-price strong { font: 500 34px/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; }
.plan-price span { color: #817989; font-size: 11px; }
.plan-price-free strong { font-size: 29px; }
.plan-capacity { padding-bottom: 15px; border-bottom: 1px solid #eee9f1; color: #4d405f; font-size: 13px; font-weight: 750; }
.plan-card ul { display: grid; gap: 12px; margin: 18px 0 23px; padding: 0; list-style: none; }
.plan-card li { display: flex; align-items: center; gap: 9px; color: #6d6575; font-size: 11px; }
.plan-card li span { color: #805fbd; font-size: 13px; }
.plan-cta { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 12px 14px; border: 1px solid #ddd3ed; border-radius: 8px; color: #6849ad; background: #fff; font-size: 11px; font-weight: 750; text-decoration: none; transition: border-color .18s ease, background .18s ease; }
.plan-cta:hover { border-color: #bda9df; background: #f8f4fe; }
.plan-featured .plan-cta { color: #fff; border-color: #7754c8; background: #7754c8; }

/* Keep the sign-in flow aligned with the landing page palette. */
.auth-card .eyebrow { color: #7754c8; }
.auth-card button { background: #7754c8; }
.auth-card button:hover { background: #6844ba; }
.auth-card input:focus { outline: 3px solid #7754c826; border-color: #7754c8; }
.auth-card .otp-destination { margin: 22px 0 0; color: #65748a; line-height: 1.55; overflow-wrap: anywhere; }
.auth-card .otp-destination strong { color: #26334a; }
.auth-card .status-error { color: #b42318; }
.auth-card .auth-step-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 18px; }
.auth-card .auth-step-actions form { margin: 0; }
.auth-card .auth-text-button { padding: 0; border: 0; background: transparent; color: #7754c8; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.auth-card .auth-text-button:hover { background: transparent; color: #6844ba; text-decoration: underline; }
.auth-card #auth-step > * { animation: auth-step-in .2s ease-out both; }
@keyframes auth-step-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.plan-featured .plan-cta:hover { background: #6844ba; }
.plans-footnote { margin: 17px 0 0; color: #8b8491; font-size: 10px; text-align: center; }
.closing-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 40px; border: 1px solid #e8e0f1; border-radius: 17px; background: linear-gradient(105deg, #f4effa, #fbf8f2); }
.closing-cta h2 { font-size: 32px; }
.closing-cta p { margin: 9px 0 0; color: #777080; font-size: 12px; }
@media (max-width: 800px) {
  .landing-hero { min-height: auto; grid-template-columns: 1fr; gap: 0; padding: 45px 4px 32px; }
  .hero-copy { padding: 8px 0 5px; }
  .hero-art { min-height: 430px; }
  .plans-heading { align-items: start; flex-direction: column; gap: 13px; }
  .plans-heading > p { max-width: 520px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 0; }
}
@media (max-width: 560px) {
  .landing-body .topbar { height: 67px; padding-inline: 18px; }
  .brand .brand-logo { width: 30px; height: 30px; }
  .landing-main { width: calc(100% - 36px); }
  .landing-page { padding-top: 12px; }
  .hero-copy h1 { font-size: clamp(43px, 12vw, 62px); }
  .hero-lede { font-size: 14px; }
  .hero-assurance { align-items: start; max-width: 300px; line-height: 1.6; }
  .hero-art { min-height: 370px; }
  .book-preview { min-height: 345px; }
  .preview-content { padding-top: 35px; }
  .preview-content h2 { font-size: 38px; }
  .live-card { right: -4px; bottom: 15px; }
  .orbit-one { width: 340px; }
  .orbit-two { width: 360px; }
  .benefit-strip { grid-template-columns: 1fr; gap: 18px; padding: 21px; }
  .plans-section { padding: 75px 0 62px; }
  .billing-controls { justify-content: center; }
  .closing-cta { align-items: start; flex-direction: column; padding: 27px 24px; }
  .closing-cta h2 { font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}