/* ==========================================================================
   MuseNest platform design system
   The shared look for musenest.net's public pages: landing, register/login,
   legal, about, contact.

   Single source of truth for the palette. Every public page loads this first;
   page-specific stylesheets (landing.css) then build on these tokens rather
   than redeclaring them.

   NOT loaded by: the Club brand (musenestclub.com — deliberately its own dark
   identity, see club.css), paysite fan pages, or model site themes.

   Namespacing: shared components are prefixed `mn-` because several pages load
   Bootstrap, which already owns .card, .btn, .h2 and friends. The Bootstrap
   bridges at the bottom of this file retarget its components onto these tokens
   so existing form markup keeps working and simply looks right.
   ========================================================================== */

:root {
  --ink: #1B1613;
  --ink2: #574E48;
  --ink3: #6E655D;

  --bg: #FCFAF7;
  --surface: #FFFFFF;
  --tint: #F5EFE8;
  --line: #E8E0D7;
  --line-soft: #EFE8DF;

  --accent: #9E3950;
  --accent-deep: #7A2A3C;
  --accent-soft: #F7EAEC;
  --accent-line: #EFD7DB;

  --verify: #2F6B4F;
  --verify-soft: #E6F0EA;
  --danger: #A32B2B;
  --danger-soft: #F8ECEC;

  --sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Cormorant Garamond', 'Iowan Old Style', Georgia, serif;

  --wrap: 1200px;
  --gut: 60px;
}

/* ── base ───────────────────────────────────────────────────────────────── */

.mn body, body.mn, body {
  font-family: var(--sans);
  color: var(--ink2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mn-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── type ───────────────────────────────────────────────────────────────── */

.mn-kicker {
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--accent);
}

.mn-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.mn-h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.mn-h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mn-lede  { font-size: 19px; line-height: 1.62; color: var(--ink2); text-wrap: pretty; }
.mn-body  { font-size: 16px; line-height: 1.65; color: var(--ink2); text-wrap: pretty; }
.mn-small { font-size: 14px; line-height: 1.6;  color: var(--ink3); }

/* ── buttons ────────────────────────────────────────────────────────────── */

.mn-btn, .mn-btn2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border-radius: 6px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.mn-btn  { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.mn-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.mn-btn2 { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.mn-btn2:hover { border-color: var(--ink3); color: var(--ink); }

.mn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }

/* ── shared nav ─────────────────────────────────────────────────────────── */

.mn-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: rgba(252, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.mn-nav-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.mn-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--serif);
  font-size: 29px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.025em;
}
.mn-logo:hover { color: var(--ink); }
.mn-logo img { width: 48px; height: 28px; object-fit: contain; flex: none; }
.mn-nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.mn-nav-links a { font-size: 15px; color: var(--ink2); font-weight: 500; }
.mn-nav-links a:hover { color: var(--ink); }
.mn-nav-actions { display: flex; align-items: center; gap: 20px; }
.mn-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 42px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
}
.mn-nav-cta:hover { background: var(--accent-deep); color: #fff; }

/* Compact back-link used by pages with no full nav (legal, auth) */
.mn-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--ink3);
  font-weight: 500;
}
.mn-back:hover { color: var(--accent); }

/* ── shared footer ──────────────────────────────────────────────────────── */

.mn-footer { background: var(--bg); border-top: 1px solid var(--line); padding: 56px 0 36px; margin-top: 80px; }
.mn-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 44px; }
.mn-footer-logo { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: 24px; color: var(--ink); margin-bottom: 14px; }
.mn-footer-logo span { font-size: 28px; font-weight: 500; letter-spacing: -.025em; }
.mn-footer-logo img { width: 51px; height: 30px; object-fit: contain; flex: none; }
.mn-footer-tagline { font-size: 14.5px; line-height: 1.6; color: var(--ink3); max-width: 40ch; }
.mn-footer-col h4 { font-size: 12px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 15px; }
.mn-footer-col ul { list-style: none; margin: 0; padding: 0; }
.mn-footer-col li { margin-bottom: 10px; }
.mn-footer-col a { font-size: 14.5px; color: var(--ink2); }
.mn-footer-col a:hover { color: var(--accent); }
.mn-footer-divider { border: 0; border-top: 1px solid var(--line); margin: 40px 0 20px; }
.mn-footer-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--ink3); }

/* ── centred content page (about, contact, legal) ───────────────────────── */

.mn-page { padding: 64px 0 0; }
.mn-page-inner { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.mn-page-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; }
.mn-page-meta { font-size: 13.5px; color: var(--ink3); }

/* ── long-form prose, incl. the legal documents ─────────────────────────── */

.mn-prose, .legal-shell { color: var(--ink2); }

.mn-prose h1, .legal-shell h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.mn-prose h2, .legal-shell h2 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 42px 0 12px;
}
.mn-prose h3, .legal-shell h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  margin: 28px 0 8px;
}
.mn-prose p, .mn-prose li,
.legal-shell p, .legal-shell li {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink2);
  text-wrap: pretty;
}
.mn-prose p, .legal-shell p { margin: 0 0 14px; }
.mn-prose ul, .mn-prose ol,
.legal-shell ul, .legal-shell ol { padding-left: 22px; margin: 0 0 16px; }
.mn-prose li, .legal-shell li { margin-bottom: 8px; list-style: disc; }
.mn-prose ol li, .legal-shell ol li { list-style: decimal; }
.mn-prose strong, .legal-shell strong { color: var(--ink); font-weight: 600; }

/* Section numbers in the legal docs — quiet, so the heading text leads */
.section-num { color: var(--accent); font-weight: 600; margin-right: .4em; font-variant-numeric: tabular-nums; }

/* Registered-address block */
.legal-address, .mn-address {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink2);
}

/* Policy tables — scroll rather than push the page sideways on narrow screens */
.policy-table {
  width: 100%;
  font-size: 15px;
  border-collapse: collapse;
  margin: 0 0 18px;
  display: block;
  overflow-x: auto;
}
.policy-table th {
  background: var(--tint);
  font-weight: 600;
  color: var(--ink);
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.policy-table td {
  padding: 11px 14px;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.6;
}

hr.legal-divider, .mn-rule { border: 0; border-top: 1px solid var(--line); margin: 44px 0 0; }

/* The legal pages carry Bootstrap's .container — keep our measure */
.legal-shell { max-width: 780px; }

/* ── forms ──────────────────────────────────────────────────────────────── */

.mn-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 20px; }
.mn-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.mn-req { color: var(--accent); }
.mn-input, .mn-textarea, .mn-select {
  width: 100%;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 12px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mn-textarea { min-height: 150px; resize: vertical; line-height: 1.6; }
.mn-input::placeholder, .mn-textarea::placeholder { color: #A79C92; }
.mn-input:focus, .mn-textarea:focus, .mn-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.mn-hint { font-size: 13px; color: var(--ink3); line-height: 1.5; }
.mn-error-text { font-size: 13.5px; color: var(--danger); }

.mn-alert {
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  margin-bottom: 20px;
  border: 1px solid;
}
.mn-alert-error { background: var(--danger-soft); border-color: #EBD2D2; color: #7C2020; }
.mn-alert-ok    { background: var(--verify-soft); border-color: #CFE3D7; color: #235340; }
.mn-alert-info  { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }

/* ── auth / register shell ──────────────────────────────────────────────── */

.mn-auth { display: flex; width: 100%; min-height: 100vh; }

/* Warm cream, the same ground as the landing page — someone arriving from it
   should not feel they've crossed into a different product. The hero portrait
   sits underneath at low opacity as texture, not as an image. */
.mn-auth-panel {
  width: 430px;
  flex-shrink: 0;
  background: var(--bg);
  border-right: 1px solid var(--line);
  color: var(--ink2);
  display: flex;
  flex-direction: column;
  padding: 42px 38px;
  position: relative;
  overflow: hidden;
}
.mn-auth-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/img/landing/hero.jpg') center 18% / cover no-repeat;
  opacity: .10;
}
.mn-auth-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(168deg, rgba(252,250,247,.86) 0%, rgba(245,239,232,.93) 55%, rgba(247,234,236,.95) 100%);
}
.mn-auth-panel > * { position: relative; z-index: 1; }

.mn-auth-logo { font-family: var(--serif); font-size: 27px; color: var(--ink); letter-spacing: -.015em; margin-bottom: 7px; }
.mn-auth-tagline { font-size: 14.5px; color: var(--ink2); line-height: 1.5; margin-bottom: 26px; max-width: 30ch; }

/* ── the site preview ───────────────────────────────────────────────────────
   Modelled on the real creator theme (white chrome, rose accent, serif
   headline) rather than drawn as a wireframe, and bound to the Display Name
   field so it becomes the visitor's own site as they type. */

.mn-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 26px 46px -26px rgba(27,22,19,.34), 0 2px 5px rgba(27,22,19,.05);
}
.mn-mock-chrome {
  background: #F4EEE7;
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mn-mock-dot { width: 7px; height: 7px; border-radius: 50%; background: #DCD1C6; }
.mn-mock-bar {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 3px 10px;
  margin-left: 7px;
  font-size: 10.5px;
  color: var(--ink3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* the creator site's own nav */
.mn-mock-sitenav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-bottom: 1px solid #FDF2F8;
  background: var(--surface);
}
.mn-mock-brand { font-family: var(--serif); font-size: 12.5px; color: #881337; margin-right: auto; }
.mn-mock-sitenav span { font-size: 9.5px; color: #BE185D; }
.mn-mock-sitenav span.on { color: #E11D48; font-weight: 700; }

/* hero band */
.mn-mock-hero { position: relative; height: 118px; overflow: hidden; background: #FEF7F7; }
.mn-mock-hero img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .55; }
.mn-mock-hero-in {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  padding: 0 14px;
}
.mn-mock-title {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.1;
  color: #881337;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mn-mock-tag { font-size: 9.5px; color: #BE185D; }
.mn-mock-btns { display: flex; gap: 6px; margin-top: 3px; }
.mn-mock-btn {
  font-size: 8.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 100px;
  background: #E11D48;
  color: #fff;
}
.mn-mock-btn.ghost { background: var(--surface); color: #E11D48; border: 1px solid #F9C9D6; }

.mn-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 11px 13px 13px; background: var(--surface); }
.mn-mock-img { border-radius: 5px; aspect-ratio: 3 / 4; background: linear-gradient(150deg, #FDF2F8, #F9DCE5); }

.mn-mock-note { font-size: 12.5px; color: var(--ink3); line-height: 1.5; margin-top: 12px; }

/* Step rail */
.mn-steps { margin-top: auto; padding-top: 26px; }
.mn-step { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.mn-step + .mn-step { border-top: 1px solid var(--line); }
.mn-step-dot {
  width: 23px; height: 23px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--ink3);
  background: var(--surface);
  font-variant-numeric: tabular-nums;
}
.mn-step-dot.done { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.mn-step-dot.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mn-step-lbl { font-size: 13.5px; color: var(--ink3); }
.mn-step-lbl.done { color: var(--ink2); }
.mn-step-lbl.active { color: var(--ink); font-weight: 600; }

.mn-auth-trust { margin-top: 20px; font-size: 12.5px; color: var(--ink3); line-height: 1.7; }

.mn-auth-body { flex: 1; background: var(--surface); display: flex; flex-direction: column; overflow-y: auto; }
.mn-auth-form { width: 100%; max-width: 520px; margin: 0 auto; padding: 46px 38px 64px; }
.mn-auth-title { font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.1; letter-spacing: -.018em; color: var(--ink); margin-bottom: 6px; }
.mn-auth-sub { font-size: 15.5px; color: var(--ink3); margin-bottom: 30px; line-height: 1.55; }

/* Standalone auth pages (login, password reset) — no side panel */
.mn-auth-solo { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 22px; }
.mn-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 38px 36px 34px;
  box-shadow: 0 30px 60px -34px rgba(27,22,19,.28);
}

.mn-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0;
  font-size: 13px;
  color: var(--ink3);
}
.mn-divider::before, .mn-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ==========================================================================
   BOOTSTRAP BRIDGES
   The legal and auth pages load Bootstrap and use its form/button/alert
   markup. Rather than rewrite that markup, retarget its components onto the
   tokens above so the existing pages simply look like MuseNest.
   ========================================================================== */

body { font-family: var(--sans) !important; }

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
  padding: 12px 22px;
  box-shadow: none;
  transition: background .16s ease, border-color .16s ease;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--accent-deep) !important;
  border-color: var(--accent-deep) !important;
  transform: none;
  box-shadow: none;
}
.btn-primary:disabled, .btn-primary.disabled { background: var(--accent) !important; border-color: var(--accent) !important; opacity: .5; }
.btn-primary.btn-lg { padding: 14px 24px; font-size: 16px; }

.btn-outline-primary { color: var(--accent) !important; border-color: var(--line) !important; border-radius: 6px; font-weight: 600; }
.btn-outline-primary:hover { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }

.btn-secondary, .btn-outline-secondary {
  border-radius: 6px;
  font-weight: 600;
}
.btn-outline-secondary { color: var(--ink2) !important; border-color: var(--line) !important; }
.btn-outline-secondary:hover { background: var(--tint) !important; color: var(--ink) !important; border-color: var(--ink3) !important; }

.form-control, .form-select {
  border-color: var(--line);
  border-radius: 7px;
  font-size: 15.5px;
  color: var(--ink);
  background-color: var(--surface);
  padding: 11px 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder { color: #A79C92; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}
.form-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.form-text { font-size: 13px; color: var(--ink3); }

.form-check-input:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; }
.form-check-input:focus { box-shadow: 0 0 0 3px var(--accent-soft) !important; border-color: var(--accent) !important; }
.form-check-label { font-size: 14.5px; color: var(--ink2); }

.alert { border-radius: 8px; font-size: 14.5px; line-height: 1.55; border: 1px solid; }
.alert-danger  { background: var(--danger-soft); border-color: #EBD2D2; color: #7C2020; }
.alert-success { background: var(--verify-soft); border-color: #CFE3D7; color: #235340; }
.alert-info    { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.alert-warning { background: #FBF0DF; border-color: #EBDCC0; color: #7A5417; }

.text-muted { color: var(--ink3) !important; }
.text-danger { color: var(--danger) !important; }

.card { border-color: var(--line); border-radius: 12px; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  :root { --gut: 40px; }
  .mn-h1 { font-size: 44px; }
  .mn-h2 { font-size: 33px; }
  .mn-prose h1, .legal-shell h1 { font-size: 38px; }
}

@media (max-width: 880px) {
  .mn-footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }

  .mn-auth { flex-direction: column; min-height: 0; }
  .mn-auth-panel {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 15px 22px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .mn-auth-tagline, .mn-mock, .mn-mock-note, .mn-steps, .mn-auth-trust { display: none; }
  .mn-auth-logo { margin-bottom: 0; font-size: 21px; }
  .mn-auth-form { padding: 32px 22px 56px; }
}

@media (max-width: 620px) {
  :root { --gut: 22px; }

  .mn-h1 { font-size: 34px; }
  .mn-h2 { font-size: 27px; }
  .mn-lede { font-size: 17px; }
  .mn-prose h1, .legal-shell h1 { font-size: 30px; }
  .mn-prose h2, .legal-shell h2 { font-size: 17px; margin-top: 34px; }
  .mn-auth-title { font-size: 30px; }

  .mn-nav-inner { height: 66px; gap: 14px; }
  .mn-nav-links { display: none; }
  .mn-logo { font-size: 22px; }
  .mn-nav-cta { height: 38px; padding: 0 15px; font-size: 14px; }

  .mn-page { padding: 40px 0 0; }
  .mn-footer { padding: 44px 0 30px; margin-top: 56px; }
  .mn-footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .mn-footer-base { flex-direction: column; align-items: flex-start; gap: 8px; }

  .mn-auth-card { padding: 30px 24px 28px; }
}

/* ==========================================================================
   ABOUT / CONTACT
   These pages keep their existing Bootstrap grid markup; what follows restyles
   their component classes onto the platform tokens.
   ========================================================================== */

.about-shell, .contact-shell { max-width: 880px; }

.hero-section { margin-bottom: 44px; }
.hero-section h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 46px;
  line-height: 1.06;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.hero-section p { font-size: 19px; line-height: 1.62; color: var(--ink2); margin: 0; text-wrap: pretty; max-width: 62ch; }

.section-heading {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 44px 0 14px;
}

.feature-card, .contact-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 26px 28px;
  height: 100%;
}
.feature-card .icon {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.feature-card h3, .contact-card h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.feature-card p, .contact-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink2);
  margin: 0 0 10px;
}
.contact-card a { font-size: 15px; font-weight: 500; }

.contact-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-left: 7px;
  vertical-align: middle;
}
.contact-badge.urgent { background: var(--accent-soft); color: var(--accent-deep); }

.compliance-strip {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
}
.compliance-strip p { font-size: 15.5px; color: var(--ink2); margin: 0; }
.compliance-strip ul { padding-left: 20px; }
.compliance-strip li { font-size: 15px; line-height: 1.7; color: var(--ink2); list-style: disc; margin-bottom: 7px; }
.compliance-strip strong { color: var(--ink); font-weight: 600; }

.form-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 32px 34px;
  margin-top: 8px;
}
.form-section h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 22px;
}

/* The contact form uses Bootstrap's -sm control sizes; bring them up to the
   platform's touch target so they don't read as an afterthought. */
.form-control-sm, .form-select-sm { font-size: 15px; padding: 10px 13px; border-radius: 7px; }
.btn-dark {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  border-radius: 6px;
  font-weight: 600;
}
.btn-dark:hover { background: var(--accent-deep) !important; border-color: var(--accent-deep) !important; }
.btn-sm { padding: 10px 20px !important; font-size: 15px !important; }

/* ── coming-soon (unclaimed / unpublished model slug) ───────────────────── */

.mn-soon { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 48px 22px; background: var(--bg); }
.mn-soon-card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 48px 40px 44px;
  box-shadow: 0 30px 60px -34px rgba(27,22,19,.26);
}
.mn-soon-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mn-soon-card h1 { font-family: var(--serif); font-weight: 400; font-size: 34px; line-height: 1.1; color: var(--ink); margin: 0 0 12px; }
.mn-soon-card p { font-size: 16px; line-height: 1.65; color: var(--ink2); margin: 0 0 26px; }

@media (max-width: 620px) {
  .hero-section h1 { font-size: 32px; }
  .hero-section p { font-size: 17px; }
  .section-heading { font-size: 18px; margin-top: 34px; }
  .feature-card, .contact-card { padding: 22px 20px 24px; }
  .form-section { padding: 24px 20px 26px; }
  .form-section h2 { font-size: 25px; }
  .mn-soon-card { padding: 36px 26px 32px; }
}

/* ==========================================================================
   STANDALONE AUTH PAGES
   login, forgot/reset password, and the blocked/invalid notices. These sit on
   their own — no side panel — and previously each carried its own copy of the
   centring rules. `mn-center` on the body element replaces all of them.
   ========================================================================== */

body.mn-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg);
}

.login-card, .auth-card, .blocked-card, .reg-card { width: 100%; max-width: 440px; }

.login-logo, .auth-logo {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.015em;
}
.login-logo span, .auth-logo span { color: var(--ink3); font-family: var(--sans); font-size: 16px; font-weight: 500; }

/* Bootstrap's .card is the panel on these pages */
.card.shadow-sm { box-shadow: 0 26px 52px -32px rgba(27,22,19,.26) !important; }
.card { background: var(--surface); }

/* The notice pages lead with a mark rather than an emoji */
.mn-notice-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 18px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Warning notice (e.g. an interrupted checkout the visitor can resume) */
.mn-alert-warn { background: #FBF0DF; border-color: #EBDCC0; color: #7A5417; }