/* ============ REFERENCE AUTO MASTERING, /auto-mastering ============
   Where every "Get Pro" in the mastering app lands, and where someone chooses
   between the app on its own and the Premium membership that includes it.

   Built from the same parts as the plugins hub (plugins.css), on purpose: the
   two pages sell things made by the same people, a visitor moves between them,
   and the app itself is gold on near-black. Where a rule here repeats one in
   plugins.css, that is why. It is a copy rather than a shared file for the
   reason DEPLOY.md gives for plugins.css and huge.css: the pages share a
   visual language, but editing one must not be able to break the other.

   Page-local palette, for the same two reasons plugins.css gives: less glare
   than pure white on a page read end to end, and the real gold accent the app
   already uses, rather than the site's monochrome token. */
:root {
  --ms-gold: #f0b429;
  --ms-gold-deep: #d99a2b;
  --ms-paper: #e3e0d6;
  --ms-card: #edeae1;
  --grey: #5c5a55;
  --ms-soft: #ece9e2;
  --ms-soft-dim: rgba(236, 233, 226, 0.76);
  --ms-soft-faint: rgba(236, 233, 226, 0.55);
  --ms-check: #3fb27a;
}

.light { background: var(--ms-paper); }
.nav__group { display: flex; align-items: center; gap: 2.2rem; }
.eyebrow.gold { color: var(--ms-gold); }

/* ===== Hero ===== */
.ms-hero { min-height: 88svh; display: flex; align-items: center; padding: 16vh 0 10vh; }
/* The flex item trap DEPLOY.md describes for the plugins hero: without this
   the container shrinks to its headline and the page appears to breathe. */
.ms-hero > .container { width: 100%; }
.ms-hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.9rem, 8.2vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ms-soft);
  max-width: 14ch;
}
.ms-hero__lede { margin-top: 1.8rem; max-width: 50ch; font-size: 1.12rem; line-height: 1.6; color: var(--ms-soft-dim); }

/* ===== Buttons ===== */
.ms-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.4rem;
  padding: 1.15rem 2.1rem;
  background: var(--ms-gold);
  color: #17140c;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.ms-cta:hover { transform: translateY(-2px); background: var(--ms-gold-deep); }
.ms-cta svg { flex: 0 0 auto; }
/* The second button in a pair: an outline, so the recommended choice is the
   only solid gold on the row. */
.ms-cta--ghost { background: transparent; color: var(--ms-soft); box-shadow: inset 0 0 0 1px rgba(236, 233, 226, 0.4); }
.ms-cta--ghost:hover { background: rgba(236, 233, 226, 0.08); }
/* A plan whose checkout is not live yet shows its button as a statement, not
   as a link to nowhere. See the script. */
.ms-cta[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
.ms-cta__note { display: block; margin-top: 0.9rem; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--ms-soft-faint); }

/* ===== Prose sections ===== */
.ms-section { padding: 14vh 0; }
.ms-section__head {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}
.ms-section__head--onblack { color: var(--ms-soft); }
.ms-copy { max-width: 62ch; }
.ms-copy p { margin-bottom: 1.2rem; font-size: 1.04rem; line-height: 1.7; }
.ms-copy p:last-child { margin-bottom: 0; }
.dark .ms-copy p { color: var(--ms-soft-dim); }

/* ===== The ticked list =====
   A green disc with an inline SVG check, as on the plugins hub: never the ✓
   glyph, which depends on the font shipping it. */
.ms-perks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.6rem; margin: 3rem 0 0; padding: 0; list-style: none; }
.ms-perks li, .ms-list li { position: relative; padding-left: 2.2rem; }
.ms-perks li::before, .ms-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--ms-check) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.3l2.3 2.3 4.6-5' fill='none' stroke='%23ffffff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
}
.ms-perks b { display: block; margin-bottom: 0.3rem; font-size: 1rem; }
.ms-perks span { font-size: 0.94rem; line-height: 1.6; color: var(--grey); }

/* ===== The two plans ===== */
.ms-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; margin-top: 3.4rem; align-items: stretch; }
.ms-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.8rem, 3.5vw, 2.6rem);
  border: 1px solid rgba(236, 233, 226, 0.14);
  border-radius: 14px;
  background: rgba(236, 233, 226, 0.03);
}
.ms-plan--best { border-color: rgba(240, 180, 41, 0.55); background: rgba(240, 180, 41, 0.05); }
.ms-plan__flag {
  position: absolute;
  top: -0.85rem;
  left: clamp(1.8rem, 3.5vw, 2.6rem);
  padding: 0.35rem 0.8rem;
  background: var(--ms-gold);
  color: #17140c;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 100px;
}
.ms-plan__no { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ms-gold); margin-bottom: 0.9rem; }
.ms-plan__name { font-family: var(--font-display); font-weight: 400; font-size: 2.2rem; line-height: 1; text-transform: uppercase; color: var(--ms-soft); }
.ms-plan__price { margin: 1.1rem 0 0.3rem; color: var(--ms-soft); }
.ms-plan__price b { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.01em; }
.ms-plan__price span { font-size: 1rem; color: var(--ms-soft-dim); }
.ms-plan__for { font-size: 0.98rem; line-height: 1.6; color: var(--ms-soft-dim); margin-bottom: 1.6rem; }
.ms-list { flex: 1; display: grid; gap: 0.9rem; margin: 0 0 0.4rem; padding: 0; list-style: none; }
.ms-list li { font-size: 0.96rem; line-height: 1.55; color: var(--ms-soft); }
.ms-list li.is-head { padding-left: 0; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ms-soft-faint); margin-top: 0.6rem; }
.ms-list li.is-head::before { display: none; }
.ms-plan .ms-cta { align-self: stretch; }

/* ===== Closing ===== */
.ms-final { padding: 16vh 0; text-align: center; }
.ms-final__head { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 7vw, 5rem); line-height: 0.98; text-transform: uppercase; color: var(--ms-soft); }
.ms-final__sub { margin: 1.4rem auto 0; max-width: 50ch; color: var(--ms-soft-dim); }

/* ===== Footer links: the legal pages and the contact address ===== */
.ms-legal-links { display: flex; flex-wrap: wrap; gap: 0.6rem 1.6rem; margin: 1.4rem 0 0; }
.ms-legal-links a { color: var(--grey); font-size: 0.84rem; text-decoration: underline; text-underline-offset: 3px; }
.ms-legal-links a:hover { color: var(--ink, #111); }

/* ===== The legal documents ===== */
.ms-doc { padding: 18vh 0 12vh; }
.ms-doc .container { max-width: 760px; }
.ms-doc h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); line-height: 1; text-transform: uppercase; margin-bottom: 0.8rem; }
.ms-doc__meta { color: var(--grey); font-size: 0.9rem; margin-bottom: 3rem; }
.ms-doc h2 { font-size: 1.15rem; font-weight: 700; margin: 2.6rem 0 0.8rem; }
.ms-doc p, .ms-doc li { font-size: 1rem; line-height: 1.75; color: #25231f; }
.ms-doc p { margin-bottom: 1rem; }
.ms-doc ul { margin: 0 0 1rem 1.2rem; padding: 0; }
.ms-doc li { margin-bottom: 0.4rem; }
.ms-doc a { color: inherit; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .ms-hero { min-height: auto; padding: 18vh 0 9vh; }
  .ms-perks, .ms-plans { grid-template-columns: 1fr; }
  .ms-plans { gap: 2.4rem; }
  .ms-section { padding: 10vh 0; }
  .ms-final { padding: 12vh 0; }
}
@media (max-width: 640px) {
  .ms-cta { width: 100%; text-align: center; padding: 1.1rem 1.4rem; }
}
/* As on the plugins hub: the shared sheet hides .nav__cta on phones because
   other pages move it into a menu; this page has no menu, so keep it. */
@media (max-width: 620px) {
  .nav { padding: 1.1rem 5vw; }
  .nav__brand { font-size: 0.7rem; letter-spacing: 0.18em; }
  .nav__cta { display: inline-block; font-size: 0.7rem; letter-spacing: 0.16em; }
}

/* ===== The line under the two plans: the price comparison and VIP ===== */
.ms-plans__aside { margin-top: 2rem; max-width: 70ch; font-size: 0.92rem; line-height: 1.65; color: var(--ms-soft-faint); }

/* ===== The Skool hand-off =====
   A native <dialog>, so focus, Escape and the backdrop come from the browser
   rather than from script that could get them wrong. */
.ms-modal {
  /* The site's global reset zeroes every margin, and a modal <dialog> is
     centred by margin: auto, so without this it sits in the top-left corner. */
  margin: auto;
  width: min(560px, calc(100vw - 2rem));
  padding: clamp(1.8rem, 4vw, 2.6rem);
  border: 1px solid rgba(240, 180, 41, 0.45);
  border-radius: 14px;
  background: #121210;
  color: var(--ms-soft);
}
.ms-modal::backdrop { background: rgba(0, 0, 0, 0.72); }
.ms-modal__close-form { position: absolute; top: 0.8rem; right: 0.8rem; margin: 0; }
.ms-modal__close {
  width: 2.2rem; height: 2.2rem;
  border: 0; border-radius: 50%;
  background: rgba(236, 233, 226, 0.08);
  color: var(--ms-soft);
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.ms-modal__close:hover { background: rgba(236, 233, 226, 0.16); }
.ms-modal__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.8rem, 5vw, 2.4rem);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0.4rem 0 1.4rem;
}
.ms-modal__steps { counter-reset: step; margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ms-modal__steps li { counter-increment: step; position: relative; padding-left: 2.6rem; line-height: 1.55; }
.ms-modal__steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--ms-gold); color: #17140c;
  font-weight: 700; font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
}
.ms-modal__steps b { display: block; }
.ms-modal__steps span { color: var(--ms-soft-dim); font-size: 0.94rem; }
.ms-modal .ms-cta { width: 100%; margin-top: 1.8rem; }
/* A <button> styled as the gold CTA needs the reset an <a> does not. */
button.ms-cta { border: 0; cursor: pointer; font-family: inherit; }

/* ===== Short copy, one idea per line ===== */
.ms-copy--short p { margin-bottom: 0.6rem; }

/* ===== The plan not on sale yet =====
   Shown, so people know it is coming and what it will cost, but stepped back
   so the eye goes to the plan they can buy today. */
.ms-plan--soon { opacity: 0.72; }
.ms-plan__flag--soon { background: rgba(236, 233, 226, 0.16); color: var(--ms-soft); }