/*
 * Site styles (homepage + the inner pages built on the same header, contact
 * band and footer). Desktop (>= 1000px) reproduces the Wix pages at
 * https://www.moral-marty.com/: every section is a fixed-height band with a
 * 980px content grid (.c) whose children are absolutely positioned at the
 * offsets measured from the live page at 1280px. Below 1000px the bands
 * collapse into a stacked layout modelled on Wix's mobile view.
 */

:root {
  --blue: #2e69ff;
  --navy: #1f46aa;
  --nav-blue: #0d63d1;
  --cta-blue: #0069ff;
  --submit: #1a2df3;
  --lime: #bada55;
  --affil-grey: #e3e1e1;
  --apply: #ff5f2e;
  --futura: "Jost", "Futura", "Century Gothic", sans-serif;
  --poppins: "Poppins", sans-serif;
  --raleway: "Raleway", sans-serif;
  --black: "Arial Black", "Archivo Black", sans-serif;

  /* Animation */
  --anim-fast: 0.3s;
  --anim-med: 0.5s;
  --anim-slow: 0.8s;
  --anim-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }

body {
  margin: 0;
  background: var(--blue);
  color: #000;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img { display: block; }

h1, h2, h3, p, ul, figure, blockquote { margin: 0; }

.skip {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 100;
  padding: 8px 14px;
  background: #fff;
  color: var(--nav-blue);
  font: 600 14px var(--raleway);
}
.skip:focus { top: 8px; }

/* ---------- grid ---------- */

.s { position: relative; }

.c {
  position: relative;
  width: 980px;
  height: 100%;
  margin: 0 auto;
}

.c > *,
.char > *,
.quote,
.quote > *,
.contact-art > *,
.contact-form > *,
.contact-form .f,
.contact-form .f > * {
  position: absolute;
}

.char,
.contact-art,
.contact-form,
.contact-form form { position: static; }

.box {
  width: 1120px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
}

.cover { object-fit: cover; }

/* ---------- header ---------- */

.s-head {
  height: 293px;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--blue);
  transition: transform 0.25s ease;
}
/* Hide-on-scroll-down: the header slides up out of view while scrolling down
   and slides back when scrolling up (mirrors Wix's sticky header). JS toggles
   .head-hidden; reduced-motion users keep it pinned. */
.s-head.head-hidden { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .s-head { transition: none; }
  .s-head.head-hidden { transform: none; }
}
/* The header stretches to the viewport: the CCS logo group is pinned to the
   left edge and the nav/CTA/social/login group is pinned to the right edge
   (both offsets measured from the live Wix page and constant across widths),
   so the layout no longer drifts or overlaps away from 1280px. */
.s-head .c { width: 100%; max-width: none; margin: 0; padding: 0; }

/* Logo group on the left. Wix pins the acorns at the very top-left of the
   page and the CCS mark/wordmark just right of them, at a fixed offset from
   the left edge (constant 1280-1920). The wordmark is a two-line lockup
   ("CREATIVE CUSTOM" / "STUDIOS UNLIMITED") that deliberately sits below and
   to the right of the mark, matching Wix; fixed `left` offsets keep it clear
   of both the mark and the right-pinned nav instead of riding through it (the
   old fixed 299px nav offset let the 352px wordmark collide at 1280px). */
.head-acorns { left: 28px; top: 15px; width: 200px; height: 152px; object-fit: cover; }
/* The icon + wordmark are wrapped in a home link. `display: contents` keeps
   the wrapper out of layout so the two imgs stay positioned (desktop) and
   ordered (mobile) exactly as before, while making both clickable. */
.head-logo { display: contents; }
.head-icon { position: absolute; left: 234px; top: 59px; width: 78px; height: 50px; object-fit: cover; }
.head-wordmark { position: absolute; left: 257px; top: 72px; width: 352px; height: 40px; object-fit: cover; }

/* Between the mobile breakpoint (999px) and full desktop (1366px+) there is
   not enough room for the 352px wordmark lockup plus the nav/CTA/social/login
   group (they collided from 1000-1365px). Hide the wordmark in that band and
   keep the icon (still the home link); below 1180px also tighten the nav and
   drop the social icons so the group cannot reach the icon. */
@media (min-width: 1000px) and (max-width: 1365px) {
  .head-wordmark { display: none; }
}
@media (min-width: 1000px) and (max-width: 1180px) {
  .head-right { gap: 10px; }
  .head-nav a { padding: 0 9px; font-size: 13px; letter-spacing: 0.3px; }
  .head-social { display: none; }
}

/* Right-hand control group: nav + CTA + social + login in one right-pinned
   flex row. Offsets and gaps are fluid (clamp/vw) so the group shrinks with
   the viewport and never reaches the left-pinned logo; the old per-element
   fixed `right` values collided with the 352px wordmark below ~1500px. */
.head-right {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  top: 50px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 22px);
}

.head-nav {
  display: flex;
  gap: 8px;
}

.head-nav a {
  display: block;
  height: 38px;
  padding: 0 14px;
  border: 1px solid #fff;
  background: var(--nav-blue);
  color: #fff;
  font: 400 14px/36px var(--raleway);
  letter-spacing: 0.7px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.head-nav a[aria-current="page"],
.head-nav a:hover,
.head-nav a:focus-visible {
  background: #fff;
  border-color: var(--nav-blue);
  color: var(--nav-blue);
}

.head-cta {
  width: 128px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 3px solid;
  border-image: linear-gradient(90deg, var(--cta-blue), #c7d2ea) 1;
  color: var(--cta-blue);
  font: 800 16px "Nunito Sans", "Avenir", sans-serif;
  text-decoration: none;
}
.head-cta:hover { background: #f1f5ff; }

.head-social { width: 40px; height: 40px; }
.head-social img { width: 40px; height: 40px; }

.head-login {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  font: 400 17px/24px var(--raleway);
  text-decoration: none;
}
.head-login:hover span { text-decoration: underline; }

.head-burger { display: none; }

/* ---------- animations + scroll-reveal ---------- */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity var(--anim-slow) var(--anim-ease), transform var(--anim-slow) var(--anim-ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.35s; }
.reveal-delay-4 { transition-delay: 0.5s; }

/* Hover micro-interactions */
a, button, .plan-cta, .gallery-arrow, .char-ring, .char-img {
  transition: transform var(--anim-fast) var(--anim-ease), box-shadow var(--anim-fast) var(--anim-ease);
}
a:hover, button:hover { opacity: 1; }
.plan-cta:hover, .auth-submit:hover, .mm-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.gallery-arrow:hover { transform: scale(1.1); }
.char:hover .char-ring { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(46, 105, 255, 0.15); }

/* Smooth anchor scrolling */
[id] { scroll-margin-top: 90px; }

/* Section entrance hint */

/* Hero elements grow in place — uses scale property so positioning
   transforms (translateX centering + content-offset nudges) stay intact */
.hero-reveal {
  opacity: 0;
  scale: 0.85;
  transition: opacity 0.7s var(--anim-ease), scale 0.7s var(--anim-ease);
  will-change: opacity, scale;
}
.hero-reveal.is-visible {
  opacity: 1;
  scale: 1;
}
.hero-corner.hero-reveal { transition-delay: 0s; }
.hero-circle.hero-reveal { transition-delay: 0.12s; }
.hero-title.hero-reveal { transition-delay: 0.25s; }

/* ---------- hero ---------- */

.s-hero { height: 735px; }
/* Wix lays the hero out across the full viewport: the city is centered and
   the circle/title are anchored to the right edge (measured offsets are
   constant at 1280-1920). Using the full width keeps the composition from
   drifting off-centre on wide screens. */
.s-hero .c { width: 100%; max-width: none; margin: 0; padding: 0; z-index: 1; }

.hero-bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 814px;
  overflow: hidden;
}

.hero-bg img {
  position: absolute;
  top: 5px;
  left: 50%;
  width: max(1358px, 106.1%);
  height: 864px;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  object-fit: cover;
}

.hero-corner {
  right: 0;
  left: auto;
  top: -1px;
  width: max(418px, 34vw);
  height: 56px;
  fill: var(--blue);
  transform: scaleX(-1);
}

/* The hero is centred as a composition: Marty's circle, the title lockup and
   the bottom curve all share the same horizontal axis (the centre of `.c`,
   which is full-width in the hero). Each layer is centred on its *visible*
   content, not its frame, because the source art carries asymmetric padding:
   the title lockup's visible text centre sits at 45.8% of its frame (so the
   frame is nudged +44px) and the circle art's visible centre is at 51.1%
   (frame nudged -7px). The curve fills its frame edge-to-edge, so it needs no
   correction. */
.hero-circle {
  left: 50%;
  right: auto;
  top: -19px;
  width: 657px;
  height: 643px;
  transform: translateX(-50%) translateX(-7px);
  z-index: 2;
}

.hero-title {
  left: 50%;
  right: auto;
  top: 248px;
  transform: translateX(-50%) translateX(44px);
  z-index: 3;
}
.hero-title img { width: 1047px; height: 572px; object-fit: cover; }

.hero-curve {
  left: 50%;
  right: auto;
  top: 632px;
  width: 1120px;
  height: 103px;
  object-fit: cover;
  object-position: top;
  transform: translateX(-50%);
}

/* ---------- about ---------- */

.s-about { height: 1217px; }

.about-poster { left: 0; top: 163px; width: 461px; height: 600px; object-fit: cover; }

.about-intro { left: 486px; top: 232px; width: 480px; }

.about-intro h2 {
  color: var(--navy);
  font: 500 25px/35px var(--futura);
  white-space: nowrap;
}

.about-intro p {
  margin-top: 4px;
  font: 400 25px/35px var(--futura);
}

.about-title {
  left: 0;
  right: 0;
  top: 819px;
  color: var(--navy);
  font: 700 50px/71px var(--poppins);
  letter-spacing: 0.5px;
  text-align: center;
}

.about-text {
  left: 3px;
  top: 918px;
  width: 956px;
  font: 500 20px/28px var(--futura);
  letter-spacing: -0.15px;
}

/* ---------- gallery ---------- */

.s-gallery { height: 617px; }

.gallery {
  left: -1px;
  top: 60px;
  width: 981px;
  height: 617px;
  z-index: 2;
  overflow: hidden;
  background: #2f2e2e;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.slide.is-active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide figcaption { display: none; }

.gallery-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  padding: 10px 100px 10px 10px;
  background: rgba(46, 105, 255, 0.7);
  opacity: 0;
  transition: opacity 0.3s;
}

.gallery-caption { font: 400 16px/22.4px var(--futura); }

.gallery-count {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font: 12px Arial, sans-serif;
}

.gallery-arrow {
  position: absolute;
  top: 274px;
  width: 45px;
  height: 70px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}
.gallery-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.gallery-arrow.prev { left: 20px; }
.gallery-arrow.next { right: 20px; }

.gallery:hover .gallery-panel,
.gallery:hover .gallery-arrow,
.gallery:focus-within .gallery-panel,
.gallery:focus-within .gallery-arrow { opacity: 1; }

@media (hover: none) {
  .gallery-arrow { opacity: 1; }
}

/* ---------- testimonials ---------- */

.s-testi { height: 466px; }

.testi-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: 106px;
  height: 360px;
  background: #000;
}

.testi-bg { position: absolute; inset: 0; overflow: hidden; }
.testi-bg img { width: 100%; height: 100%; object-fit: cover; }

.quote {
  background: #fff;
  border-radius: 27px / 23px;
}

.quote blockquote {
  color: #000;
  font: 700 20px "Montserrat", Arial, sans-serif;
  text-shadow: rgba(0, 0, 0, 0.4) 0 4px 5px;
}

.quote figcaption {
  color: var(--lime);
  font: 700 22px/30.8px var(--poppins);
  white-space: nowrap;
}

.q1 { left: -53px; top: 99px; width: 322px; height: 104px; }
.q1 blockquote { left: 16px; top: 29px; width: 300px; line-height: 28px; }
.q1 figcaption { left: 84px; top: 105px; text-shadow: rgba(0, 0, 0, 0.3) 0 5px 0; }

.q2 { left: 375px; top: 94px; width: 299px; height: 104px; }
.q2 blockquote { left: 28px; top: 31px; width: 265px; line-height: 29.4px; }
.q2 figcaption { left: 106px; top: 104px; text-shadow: rgba(0, 0, 0, 0.4) 0 4px 5px; }

.q3 { left: 793px; top: 94px; width: 316px; height: 111px; }
.q3 blockquote { left: 12px; top: 19px; width: 304px; line-height: 23.8px; }
.q3 blockquote span { font-size: 21px; }
.q3 figcaption { left: 43px; top: 111px; }

/* ---------- scholarships ---------- */

.s-schol { height: 567px; }

.schol-title {
  left: 28px;
  top: 76px;
  color: #fff;
  font: 700 60px/84px var(--poppins);
  white-space: nowrap;
}

.schol-text {
  left: 68px;
  top: 196px;
  width: 900px;
  color: #fff;
  font: 700 17px/23.8px var(--raleway);
}
.schol-text ul { padding-left: 31px; }

.schol-logo img { width: 100%; height: 100%; object-fit: cover; }
.l-fl { left: -33px; top: 394px; width: 128px; height: 128px; }
.l-ut { left: 123px; top: 416px; width: 302px; height: 68px; }
.l-la { left: 470px; top: 422px; width: 303px; height: 56px; }
.l-wy { left: 793px; top: 394px; width: 187px; height: 106px; }

/* ---------- pricing ---------- */

.s-pricing { height: 700px; }
/* The checkout form is absolutely placed at top:606 and is ~210px tall, so
   when it opens it used to spill past the 700px band and get covered by the
   characters section. Grow the band only while the form is open. */
.s-pricing:has(#mm-pricing.is-open) { height: 900px; }

.pricing-title {
  left: 0;
  right: 0;
  top: 62px;
  color: #fff;
  font: 700 50px/70px var(--poppins);
  text-align: center;
}

.pricing-sub {
  left: 0;
  right: 0;
  top: 142px;
  color: #fff;
  font: 600 17px/24px var(--raleway);
  text-align: center;
}

.pricing-grid {
  position: absolute;
  left: 0;
  top: 200px;
  width: 980px;
  display: flex;
  gap: 20px;
  align-items: stretch;
}

.plan {
  position: relative;
  flex: 1 1 0;
  min-height: 380px;
  padding: 32px 24px;
  background: #fff;
  border-radius: 14px;
  text-align: center;
  box-shadow: rgba(0, 0, 0, 0.18) 0 10px 24px;
}

.plan.is-featured {
  transform: translateY(-14px);
  border: 4px solid var(--lime);
}

.plan-badge {
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--lime);
  color: var(--navy);
  font: 700 12px/1 var(--raleway);
  white-space: nowrap;
}

.plan h3 {
  color: var(--navy);
  font: 700 26px/34px var(--poppins);
}

.plan-price { margin-top: 10px; color: var(--blue); }
.plan-price .amount { font: 700 44px/1 var(--poppins); }
.plan-price .per { font: 600 16px/1 var(--raleway); color: #666; }

.plan-blurb {
  margin: 16px 0 24px;
  min-height: 66px;
  color: #333;
  font: 600 15px/22px var(--raleway);
}

.plan-cta {
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--cta-blue);
  color: #fff;
  font: 700 16px/1 var(--raleway);
  cursor: pointer;
}
.plan-cta:hover { background: var(--submit); }
.plan-cta:disabled { opacity: 0.6; cursor: default; }

.pricing-checkout { position: absolute; left: 0; top: 606px; width: 980px; }
.pricing-checkout.mm-hidden,
#mm-pricing-form.mm-hidden { display: none; }

#mm-pricing-form {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.18) 0 10px 24px;
}
.pricing-checkout-title { font: 700 16px/22px var(--poppins); color: var(--navy); margin-bottom: 10px; }
#mm-pricing-form label { display: block; font: 600 14px/20px var(--raleway); color: #333; }
#mm-pricing-form input {
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font: 500 15px var(--raleway);
}
.pricing-checkout-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.pricing-cancel {
  border: 0;
  background: none;
  color: #555;
  font: 600 14px var(--raleway);
  cursor: pointer;
}
#mm-pricing-msg { margin-top: 12px; text-align: center; font: 600 14px/20px var(--raleway); color: #fff; }
#mm-pricing-msg.error { color: #ffd0d0; }
#mm-pricing-msg.ok { color: var(--lime); }

/* ---------- characters ---------- */

.s-chars { height: 785px; }

.chars-wave { position: absolute; inset: 0; overflow: hidden; }
.chars-wave img {
  position: absolute;
  left: -220px;
  top: 0;
  width: 1344px;
  height: 785px;
  object-fit: cover;
}

.chars-title {
  left: 0;
  right: 0;
  top: 43px;
  color: var(--navy);
  font: 700 50px/70px var(--poppins);
  text-align: center;
}

.char-ring {
  width: 250px;
  height: 250px;
  border: 9px solid var(--blue);
  border-radius: 50%;
}

.char h3 {
  top: 457px;
  width: 300px;
  color: var(--navy);
  font: 500 25px/33px var(--futura);
  text-align: center;
}

.char p { font: 500 17px/27.2px var(--futura); letter-spacing: -0.2px; }

.ch-marty .char-ring { left: 16px; top: 167px; background: #ffc8b8; }
.ch-marty .char-img { left: 39px; top: 143px; width: 182px; height: 274px; }
.ch-marty h3 { left: -5px; }
.ch-marty p { left: 16px; top: 496px; width: 254px; }

.ch-al .char-ring { left: 366px; top: 121px; background: #b9cdff; }
.ch-al .char-img { left: 208px; top: -80px; width: 386px; height: 564px; }
.ch-al h3 { left: 335px; }
.ch-al p { left: 356px; top: 529px; width: 262px; }

.ch-rw .char-ring { left: 703px; top: 187px; background: #e8a6f7; }
/* Right (angel) and Wrong (demon) are two separate figures. Wix overlaps them
   into one pair, but on this build they read as a collision, so they are
   scaled down and flanked around the ring with a clear gap (both keep their
   ~0.667 aspect ratio, so no distortion). */
.ch-rw .img-right { left: 564px; top: 249px; width: 260px; height: 390px; }
.ch-rw .img-wrong { left: 831px; top: 220px; width: 260px; height: 390px; }
.ch-rw h3 { left: 690px; }
.ch-rw p { left: 710px; top: 496px; width: 254px; }

/* ---------- quote + videos ---------- */

/* The 98px gap above is where the white curve fades the characters box out. */
.s-quote { height: 1050px; margin-top: 98px; }

.quote-curve {
  position: absolute;
  left: 0;
  top: -101px;
  width: 100%;
  height: 111px;
  object-fit: cover;
  object-position: bottom;
}

.quote-title {
  left: 0;
  right: 0;
  top: 85px;
  color: #fff;
  font: 700 50px/71px var(--poppins);
  text-align: center;
  white-space: nowrap;
}

.video { left: 0; width: 980px; height: 382px; border: 0; }
.v1 { top: 209px; }
.v2 { top: 631px; }

/* ---------- unique ---------- */

.s-unique { height: 482px; background: var(--navy); }

.unique-bg { position: absolute; inset: 0; overflow: hidden; }
.unique-bg img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 900px;
  object-fit: cover;
  will-change: transform;
}

.unique-title {
  left: 0;
  top: 93px;
  color: var(--navy);
  font: 700 40px/56px var(--poppins);
  white-space: nowrap;
}

.unique-box {
  left: 0;
  top: 194px;
  width: 1037px;
  height: 196px;
  padding: 25px 50px 0 29px;
  background: #fff;
}
.unique-box p { font: 600 17px/23.8px var(--poppins); }

/* ---------- privacy ---------- */

.s-privacy { height: 870px; }

.privacy-title {
  left: 0;
  right: 0;
  top: 113px;
  color: var(--navy);
  font: 700 50px/71px var(--poppins);
  text-align: center;
}

.privacy-box {
  left: 0;
  top: 231px;
  width: 980px;
  height: 476px;
  padding: 30px 6px 0 11px;
  background: var(--blue);
  color: #fff;
  font: 400 17px/23.8px var(--raleway);
}
.privacy-box .privacy-date { font: 700 20px/28px var(--raleway); }
.privacy-box h3 { font: 700 20px/28px var(--poppins); }

.privacy-curve {
  left: -70px;
  top: 763px;
  width: 1120px;
  height: 108px;
  object-fit: cover;
  object-position: top;
}

/* ---------- inner pages: white text card (privacy policy, log in) ---------- */

.s-doc .c { height: auto; }

.s-doc .doc-box {
  position: relative;
  min-height: 954px;
  padding: 85px 152px 150px 145px;
  border-radius: 60px 60px 0 0;
  background: #fff;
  color: #000;
  font: 400 17px/23.8px var(--raleway);
}

.doc-title {
  margin-bottom: 47px;
  color: var(--blue);
  font: 700 60px/72px var(--poppins);
}

.doc-body .doc-date { font: 700 20px/28px var(--raleway); }
.doc-body h2 { font: 700 20px/28px var(--poppins); }

.doc-acorns {
  position: absolute;
  right: 37px;
  bottom: -4px;
  width: 212px;
  height: 199px;
  pointer-events: none;
}

/* log in / create account */

.s-auth .auth-box { min-height: 700px; }
#mm-auth { max-width: 420px; }

.auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}
.auth-tabs button {
  flex: 1;
  height: 40px;
  border: 1px solid var(--nav-blue);
  background: #fff;
  color: var(--nav-blue);
  font: 400 15px/38px var(--raleway);
  letter-spacing: 0.7px;
  cursor: pointer;
}
.auth-tabs button.active { background: var(--nav-blue); color: #fff; }

#mm-form label { display: block; margin-bottom: 18px; }
#mm-form label span {
  display: block;
  margin-bottom: 6px;
  font: italic 700 14px/14px Georgia, serif;
}
#mm-form input {
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 1px solid var(--submit);
  border-radius: 0;
  background: #e8eeff;
  color: #000;
  font: 16px var(--raleway);
}
#mm-form input:focus { outline: 2px solid var(--blue); }

.auth-submit {
  width: 160px;
  height: 46px;
  margin-top: 6px;
  border: 0;
  background: var(--submit);
  color: #fff;
  font: italic 700 15px/21px Georgia, serif;
  cursor: pointer;
}
.auth-submit:hover { background: #3346ff; }

#mm-msg { min-height: 24px; margin-top: 16px; font-weight: 600; }
#mm-msg.error { color: #c62828; }
#mm-msg.ok { color: #1b7a3a; }
.mm-forgot {
  display: inline-block;
  margin: 8px 0 4px;
  font-size: 13px;
  color: #12266b;
  text-decoration: underline;
  cursor: pointer;
}
.mm-forgot:hover { color: #3346ff; }
.mm-hidden { display: none !important; }

/* ---------- affiliates ---------- */

.s-affil { padding: 40px; background: var(--affil-grey); }
.affil-box { background: var(--blue); }

.affil-grid {
  position: relative;
  width: 1200px;
  max-width: 100%;
  height: 830px;
  margin: 0 auto;
}

.affil-copy {
  position: absolute;
  left: 61px;
  top: 128px;
  width: 488px;
  z-index: 1;
  color: #000;
  font: 400 17px/23.8px var(--raleway);
}
.affil-copy h1 {
  margin-bottom: 25px;
  color: #fffffe;
  font: 400 44px/57px var(--black);
}
.affil-copy h2 {
  margin-top: 15px;
  color: #fff;
  font: 400 35px/39px var(--black);
}
.affil-copy p,
.affil-copy ul,
.affil-copy ol { margin: 0; }
.affil-copy ul,
.affil-copy ol { padding-left: 31px; }

.affil-copy .affil-apply { margin-top: 24px; font: 400 26px/36.4px var(--black); }
.affil-apply a { color: var(--apply); text-decoration: none; }
.affil-apply a:hover,
.affil-apply a:focus-visible { text-decoration: underline; }

.affil-chars,
.affil-acorns { position: absolute; pointer-events: none; }
.affil-chars { left: 480px; top: 17px; width: 645px; height: 624px; }
.affil-acorns { left: 903px; top: 636px; width: 241px; height: 180px; }

/* ---------- contact ---------- */

.s-contact { height: 646px; }

.contact-art img { object-fit: cover; pointer-events: none; }
.ca-al { left: 601px; top: -62px; width: 455px; height: 687px; }
.ca-marty { left: 674px; top: 77px; width: 285px; height: 428px; }
.ca-logo { left: 522px; top: 252px; width: 655px; height: 450px; }
.ca-wrong { left: 745px; top: 88px; width: 270px; height: 406px; }
.ca-right { left: 608px; top: 119px; width: 336px; height: 450px; }

.contact-form h2 {
  left: 10px;
  top: 72px;
  color: #fff;
  font: italic 500 30px/35px var(--futura);
  letter-spacing: 2.5px;
}

.contact-form .f { position: absolute; }
.contact-form label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-left: 6px;
  color: #fff;
  font: italic 700 14px/14px Georgia, serif;
}
.contact-form .req { color: var(--submit); }

.contact-form input,
.contact-form textarea {
  position: absolute;
  left: 0;
  top: 23px;
  width: 150px;
  height: 26px;
  padding: 3px 6px;
  border: 0;
  border-bottom: 1px solid var(--submit);
  border-radius: 0;
  background: rgba(255, 218, 228, 0.5);
  color: #000;
  font: 14px Georgia, serif;
  outline-offset: 0;
}
.contact-form textarea { width: 330px; height: 79px; resize: none; }

.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid #fff; }

.f-first { left: 10px; top: 155px; width: 150px; }
.f-first input { height: 29px; }
.f-last { left: 196px; top: 155px; width: 150px; }
.f-email { left: 10px; top: 243px; width: 150px; }
.f-subject { left: 196px; top: 243px; width: 150px; }
.f-message { left: 16px; top: 328px; width: 330px; }
.f-message label { padding-left: 10px; }

.f-submit {
  position: absolute;
  left: 16px;
  top: 460px;
  width: 120px;
  height: 46px;
  border: 0;
  background: var(--submit);
  color: #fff;
  font: italic 700 15px/21px Georgia, serif;
  cursor: pointer;
}
.f-submit:hover { background: #3346ff; }

#mm-contact-msg {
  left: 16px;
  top: 520px;
  width: 400px;
  color: #fff;
  font: italic 700 14px/20px Georgia, serif;
}
#mm-contact-msg.error { color: #ffe066; }

/* ---------- footer ---------- */

.s-foot { height: 82px; background: #000; }

.foot-logo { left: 136px; top: 9px; width: 52px; height: 52px; object-fit: cover; }

.foot-text {
  left: 199px;
  top: 24px;
  color: #dbdbdb;
  font: 700 17px/22px "Sarabun", sans-serif;
  white-space: nowrap;
}

/* =================================================================
   Narrow screens: stacked layout, modelled on Wix's mobile view.
   ================================================================= */

@media (max-width: 999px) {
  /* The hero title lockup intentionally overscales past the viewport to match
     Wix; clip the horizontal overflow at the root so it does not create a
     scrollbar (which was stealing ~15px and narrowing every section). */
  .mm { overflow-x: hidden; }

  .s,
  .box { height: auto; }

  .c {
    width: auto;
    max-width: 640px;
    padding: 0 16px;
  }

  .c > *,
  .char > *,
  .quote,
  .quote > *,
  .contact-art > *,
  .contact-form > *,
  .contact-form .f,
  .contact-form .f > *,
  .f-submit {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
  }

  /* header — Wix mobile is a 111px band: logo mark + wordmark on row 1
     (mark at left:20 top:20, 58x37; wordmark 263x30 overlapping it), social
     icons on row 2, and the burger pinned to the right of row 1. Match those
     metrics so the band does not balloon to twice its Wix height. */
  .s-head { height: auto; }
  .s-head .c {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    padding: 20px;
  }
  .s-head .c::before { content: ""; order: 4; flex-basis: 100%; }
  .head-acorns { display: none; }
  /* Collapse the desktop right-group so its children (nav, CTA, social,
     login) become direct flex items of .c again and keep their orders. */
  .head-right { display: contents; }
  /* Mark + wordmark overlap on Wix (mark 58x37 at x=20,y=20; wordmark 263x30
     at x=37,y=27, layered over the mark). Position the wordmark absolutely so
     it does not consume the flex row (leaving room for the burger beside the
     mark) and pin it to the mark's row with a fixed top, not 50% of the whole
     two-row header. */
  .head-icon { order: 1; position: static; width: 58px; height: 37px; transform: none; }
  .head-wordmark {
    position: absolute;
    left: 37px;
    top: 27px;
    transform: none;
    order: 2;
    width: 263px;
    height: 30px;
    margin: 0;
    object-fit: contain;
    object-position: left center;
  }
  .head-burger {
    order: 3;
    display: block;
    margin-left: auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .head-burger span,
  .head-burger span::before,
  .head-burger span::after {
    display: block;
    width: 24px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
    position: relative;
  }
  .head-burger span::before,
  .head-burger span::after { content: ""; position: absolute; left: 0; }
  .head-burger span::before { top: -8px; }
  .head-burger span::after { top: 8px; }
  /* Wix mobile keeps only the logo + burger on the top row and the two social
     icons on a second row (111px total). The nav, CTA and login live behind
     the burger instead of stacking into extra rows, which was doubling the
     header height. */
  .head-nav {
    display: none;
    order: 6;
    flex-basis: 100%;
    flex-direction: column;
  }
  .nav-open .head-nav { display: flex; }
  /* Keep the header pinned while the mobile menu is open so the nav cannot
     scroll out of view (JS's hide-on-scroll-down would otherwise slide it up). */
  .s-head.nav-open { transform: none; }
  .head-social,
  .head-social img { width: 40px; height: 40px; }
  .head-fb { order: 5; margin-left: 0; }
  .head-ig { order: 5; }
  /* Wix keeps "Get Started" on the second row, pinned right of the social
     icons. */
  .head-cta { order: 6; margin-left: auto; width: 156px; height: 42px; }
  .head-login { display: none; }

  /* hero — Wix mobile band is 320x388 (ratio 0.825, not 3/4) with a dedicated
     composed hero image, the Marty circle at ~98% width overlapping the top,
     and the title lockup deliberately overscaled past the viewport (440px wide
     on a 320px screen, centred) near 41% down the band. Reproduce those
     metrics instead of re-framing the desktop city/circle/title layers. */
  .s-hero { position: relative; aspect-ratio: 320 / 388; height: auto; overflow: hidden; background: var(--blue); }
  .s-hero .c { position: absolute; inset: 0; max-width: none; width: auto; padding: 0; z-index: 1; }
  .hero-bg { position: absolute; inset: 0; height: 100%; overflow: hidden; }
  .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transform: none; transform-origin: 50% 0; }
  .hero-corner,
  .hero-curve { display: none; }
  /* Wix renders its circle asset (Untitled.png) at 313px on a 320 screen
     (98% wide, left 1.5%, top 7.5% of the 388px band). Both Wix's asset and
     the repo's hero-marty-circle.webp are ~84-86% visible circle inside their
     frame, so matching the rendered image width reproduces the Wix framing. */
  .hero-circle {
    position: absolute;
    left: 1.5%;
    top: 7.5%;
    width: 98%;
    height: auto;
    z-index: 2;
    transform: none;
  }
  /* The lockup is deliberately overscaled to 137.5% (440px on a 320 screen) so
     it bleeds off both sides like Wix. The visible wordmark is not centred in
     its frame (its centre is ~45.7% in, same as Wix's asset), so centring the
     frame would push the text left and over-clip the left edge. Centre the
     visible text instead: the frame sits ~19px right of centre, which lands it
     at x=-41 (Wix measures -40). The mobile block clips the horizontal
     overflow at the root so no scrollbar appears. */
  .hero-title { position: absolute; left: 50%; top: 45%; bottom: auto; width: 137.5%; transform: translateX(-50%) translateX(19px); }
  .hero-title img { width: 100%; height: auto; object-fit: contain; }

  /* about */
  .s-about .c { padding-top: 24px; padding-bottom: 32px; }
  .about-poster { display: none; }
  .about-intro h2 { font-size: 20px; line-height: 30px; }
  .about-intro p { font-size: 16px; line-height: 22px; margin-top: 12px; }
  .about-title { font-size: 32px; line-height: 44px; margin: 40px 0 16px; }
  .about-text { font-size: 16px; line-height: 23px; }

  /* gallery */
  .s-gallery { background: var(--blue); }
  .s-gallery .c { padding-top: 24px; padding-bottom: 24px; }
  .gallery { position: relative; width: 100%; height: auto; aspect-ratio: 981 / 617; }
  .gallery-panel { position: absolute; }
  .gallery-arrow { position: absolute; top: calc(50% - 35px); }

  /* testimonials */
  .testi-strip { position: relative; top: 0; height: auto; }
  .s-testi .c { display: grid; gap: 34px; padding-top: 24px; padding-bottom: 48px; }
  .quote { position: relative; padding: 14px 18px; }
  .s-testi .quote blockquote { width: auto; font-size: 16px; line-height: 22px; }
  .quote blockquote span { font-size: inherit; }
  .s-testi .quote figcaption {
    position: absolute;
    left: auto;
    top: auto;
    right: 8px;
    bottom: -30px;
    font-size: 18px;
  }

  /* scholarships */
  .s-schol .c { padding-top: 24px; padding-bottom: 32px; text-align: center; }
  .schol-title { white-space: normal; font-size: 30px; line-height: 38px; }
  .schol-text { margin: 24px 0; font-size: 14px; line-height: 19.6px; text-align: left; }
  .schol-text ul { padding-left: 24px; }
  .schol-logo { display: block; margin: 0 auto 16px; }
  .l-fl { width: 88px; height: 88px; }
  .l-ut { width: 210px; height: 47px; }
  .l-la { width: 210px; height: 39px; }
  .l-wy { width: 130px; height: 74px; }

  /* pricing */
  .s-pricing { background: var(--blue); }
  .s-pricing .c { padding-top: 32px; padding-bottom: 40px; }
  .pricing-title { font-size: 30px; line-height: 40px; }
  .pricing-sub { font-size: 15px; line-height: 21px; margin-top: 10px; }
  .pricing-grid { display: grid; gap: 20px; margin-top: 28px; }
  .plan { min-height: 0; padding: 28px 20px; }
  .plan.is-featured { transform: none; }
  .plan-blurb { min-height: 0; }
  .pricing-checkout { margin-top: 24px; }
  #mm-pricing-form { max-width: none; padding: 16px; }

  /* characters */
  .s-chars .c { padding-top: 24px; padding-bottom: 32px; }
  .chars-wave { display: none; }
  .chars-title { font-size: 30px; line-height: 40px; margin-bottom: 16px; }
  .char {
    position: relative;
    display: block;
    max-width: 280px;
    margin: 0 auto 32px;
    padding-top: 180px;
  }
  .s-chars .char-ring,
  .s-chars .char-img { position: absolute; top: 0; pointer-events: none; }
  .s-chars .char-ring { left: calc(50% - 90px); width: 180px; height: 180px; border-width: 7px; }
  .s-chars .ch-marty .char-img { left: calc(50% - 73px); top: -17px; width: 131px; height: 197px; }
  .s-chars .ch-al .char-img { left: calc(50% - 204px); top: -145px; width: 278px; height: 406px; }
  /* Right (angel) and Wrong (demon) use Wix's own source artwork at Wix's
     exact rendered frame sizes (angel 189x283, demon 208x312). The frames are
     mostly transparent with the character in a corner, so the frame is offset
     by the content's position within it to centre each character in the ring.
     The art is drawn at its final angle; no rotation is applied (Wix applies
     none either). Offsets are computed from each asset's content bbox. */
  .s-chars .ch-rw { padding-top: 230px; }
  .s-chars .ch-rw .img-right { left: calc(50% - 198px); top: 36px; width: 189px; height: 283px; }
  .s-chars .ch-rw .img-wrong { left: calc(50% - 2px); top: 35px; width: 208px; height: 312px; }
  .s-chars .char h3 { position: relative; left: auto; top: auto; width: auto; margin: 16px 0 8px; font-size: 18px; line-height: 24px; text-align: center; }
  .s-chars .char p { position: relative; left: auto; top: auto; width: auto; font-size: 15px; line-height: 25px; letter-spacing: 0; }

  /* quote + videos */
  .s-quote { margin-top: 0; background: var(--blue); }
  .quote-curve { display: none; }
  .s-quote .c { display: grid; gap: 24px; padding-top: 40px; padding-bottom: 40px; }
  .quote-title { white-space: normal; font-size: 28px; line-height: 38px; }
  .video { width: 100%; height: auto; aspect-ratio: 16 / 9; }

  /* unique */
  .unique-bg img { height: 100%; transform: none !important; }
  .s-unique .c { padding-top: 40px; padding-bottom: 40px; }
  .unique-title { white-space: normal; font-size: 24px; line-height: 34px; margin-bottom: 16px; }
  .unique-box { padding: 16px; }
  .unique-box p { font-size: 14px; line-height: 20px; }

  /* privacy */
  .s-privacy .c { padding-top: 32px; padding-bottom: 32px; }
  .privacy-title { font-size: 28px; line-height: 40px; margin-bottom: 20px; }
  .privacy-box { padding: 20px 10px; }
  .privacy-curve { display: none; }

  /* inner pages */
  .s-doc .c { padding: 0 12px; max-width: none; }
  .s-doc .doc-box {
    min-height: 0;
    padding: 40px 20px 150px;
    border-radius: 32px 32px 0 0;
  }
  .doc-title { font-size: 36px; line-height: 44px; margin-bottom: 24px; }
  .doc-acorns { right: 12px; width: 132px; height: auto; }
  .s-auth .auth-box { min-height: 0; }
  #mm-auth { max-width: none; }

  .s-affil { padding: 16px; }
  .affil-grid { height: auto; padding: 36px 20px 24px; }
  .affil-copy { position: static; width: auto; }
  .affil-copy h1 { font-size: 32px; line-height: 40px; margin-bottom: 18px; }
  .affil-copy h2 { font-size: 26px; line-height: 32px; margin-top: 18px; }
  .affil-copy .affil-apply { font-size: 20px; line-height: 28px; }
  .affil-chars { position: static; width: 100%; max-width: 420px; height: auto; margin: 24px auto 0; }
  .affil-acorns { position: static; width: 150px; height: auto; margin: -8px 0 0 auto; }

  /* contact */
  .s-contact { background: var(--blue); }
  .s-contact .c { display: flex; flex-direction: column; padding-top: 48px; }
  .contact-form { order: 1; max-width: 360px; margin: 0 auto; width: 100%; }
  .contact-form h2 { text-align: center; margin-bottom: 16px; }
  .contact-form .f { margin-bottom: 14px; }
  .contact-form label { display: block; margin-bottom: 8px; padding-left: 6px; }
  .contact-form .f input,
  .contact-form .f textarea { width: 100%; height: 36px; }
  .contact-form .f textarea { height: 90px; }
  .f-submit { display: block; width: 144px; height: 42px; margin: 8px auto 0; }
  #mm-contact-msg { margin-top: 12px; text-align: center; width: auto; }
  .contact-art { order: 2; position: relative; display: block; height: 0; padding-bottom: 72%; margin-top: 24px; }
  .contact-art img { position: absolute; }
  .ca-al { left: 13%; top: -9%; width: 70%; height: auto; }
  .ca-marty { left: 24%; top: 12%; width: 43%; height: auto; }
  .ca-logo { left: 0; top: 38%; width: 100%; height: auto; }
  .ca-wrong { left: 34%; top: 13%; width: 41%; height: auto; }
  .ca-right { left: 13%; top: 18%; width: 51%; height: auto; }

  /* footer */
  .s-foot { background: #98a1f0; }
  .s-foot .c { display: grid; justify-items: center; gap: 8px; padding-top: 14px; padding-bottom: 14px; }
  .foot-logo { width: 44px; height: 44px; }
  .foot-text { white-space: normal; text-align: center; font-size: 15px; color: #fff; }
}

/* Mid-range: 1000-1279px — scale the 1280px layout proportionally so
   absolutely-positioned children don't clip or overlap when the window is
   narrower than the Wix reference. Uses a CSS scale transform on the .c
   container so all absolute positions scale together. */
@media (min-width: 1000px) and (max-width: 1279px) {
  .c {
    width: auto;
    max-width: 980px;
    margin: 0 auto;
    padding: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .gallery-panel,
  .gallery-arrow { transition: none; }
}

/* ---------- floating chat bubble ---------- */
.chat-bubble {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
  transition: transform .2s, box-shadow .2s;
  border: none;
  outline: none;
}
.chat-bubble:hover,
.chat-bubble:focus-visible {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.chat-bubble .chat-icon,
.chat-bubble .chat-close-icon {
  width: 28px;
  height: 28px;
  position: absolute;
  transition: opacity .2s;
}
.chat-bubble .chat-close-icon { opacity: 0; }
.chat-bubble.is-open .chat-icon { opacity: 0; }
.chat-bubble.is-open .chat-close-icon { opacity: 1; }

/* chat panel */
.chat-panel {
  position: fixed;
  bottom: 92px;
  right: 24px;
  z-index: 998;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-panel[hidden] { display: none; }
.chat-panel-header {
  background: var(--blue);
  color: #fff;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font: 600 16px var(--poppins);
}
.chat-panel-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.chat-panel-body {
  padding: 16px;
}
.chat-panel-body .f { margin-bottom: 12px; }
.chat-panel-body label {
  display: block;
  font: 500 13px var(--raleway);
  color: #333;
  margin-bottom: 4px;
}
.chat-panel-body .f input,
.chat-panel-body .f textarea {
  width: 100%;
  height: 36px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 10px;
  font: 14px var(--raleway);
  outline: none;
}
.chat-panel-body .f textarea {
  height: 72px;
  padding: 8px 10px;
  resize: vertical;
}
.chat-panel-body .f input:focus,
.chat-panel-body .f textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(46,105,255,.15);
}
.chat-panel-body .f-submit {
  display: block;
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font: 600 15px var(--poppins);
  cursor: pointer;
  transition: background .2s;
}
.chat-panel-body .f-submit:hover { background: var(--navy); }
#mm-chat-msg {
  margin-top: 10px;
  font: 13px var(--raleway);
  text-align: center;
}
#mm-chat-msg.ok { color: #1a8a1a; }
#mm-chat-msg.error { color: #d32f2f; }

/* mobile: smaller bubble */
@media (max-width: 480px) {
  .chat-bubble { bottom: 16px; right: 16px; width: 48px; height: 48px; }
  .chat-bubble .chat-icon,
  .chat-bubble .chat-close-icon { width: 24px; height: 24px; }
  .chat-panel { bottom: 76px; right: 12px; width: calc(100vw - 24px); }
}

/* Account settings + wallet */
.account-section { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #e6e9f5; }
.account-h { font-size: 16px; margin: 0 0 10px; color: #12266b; }
.account-notice { margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: #eef1ff; color: #12266b; font-size: 14px; }
.account-notice.is-ok { background: #e7f6ec; color: #1a6b2f; }
.account-dl { margin: 0; }
.account-dl > div { display: flex; gap: 10px; padding: 4px 0; font-size: 14px; }
.account-dl dt { width: 84px; color: #5a6b9e; }
.account-dl dd { margin: 0; color: #12266b; }
#mm-wallet-cards { font-size: 14px; color: #12266b; margin: 0 0 10px; }
.wallet-hint { font-size: 13px; color: #5a6b9e; margin: 4px 0; }
#mm-payment-element { margin: 8px 0 12px; }
.wallet-msg { font-size: 13px; min-height: 18px; }
#mm-wallet-save { margin-top: 4px; }
.account-plans { display: grid; gap: 8px; }
.account-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid #e6e9f5; border-radius: 10px; }
.account-plan.is-current { border-color: #3346ff; background: #f2f4ff; }
.account-plan-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 15px; color: #12266b; }
.account-plan-seats { font-size: 13px; color: #5a6b9e; }
.account-plan-price { font-size: 13px; color: #3346ff; font-weight: 600; }
.account-plan .mm-pay { border: 1px solid #3346ff; background: #3346ff; color: #fff; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 14px; }
.account-plan .mm-pay:hover { background: #202fd0; }
#mm-go-game { display: inline-block; margin-top: 18px; text-align: center; background: #3346ff; color: #fff; border-radius: 28px; padding: 12px 28px; text-decoration: none; font-weight: 600; }
#mm-go-game.mm-hidden { display: none; }
.verify-status { font-size: 15px; color: #12266b; }
.verify-status.error { color: #c62828; }
.verify-status.ok { color: #1a6b2f; }
.verify-hint { font-size: 13px; color: #5a6b9e; }