/* Marketing-site UI kit · component styles */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font-sans); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.cm-page { overflow-x: hidden; }

/* ---------- Utility text ----------- */
.cm-eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-tertiary);
  margin-bottom: 8px;
}
.cm-h1 { font-family: var(--font-display); font-weight: 800; font-size: 56px; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--ink-950); }
.cm-h2 { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 14px; color: var(--ink-900); }
.cm-lead { font-size: 17px; line-height: 1.6; color: var(--fg-secondary); margin: 0 0 18px; max-width: 56ch; }
.cm-body { font-size: 16px; line-height: 1.6; color: var(--fg); margin: 0 0 18px; max-width: 60ch; }
.cm-small { font-size: 14px; color: var(--fg-tertiary); margin: 0; }

/* ---------- Buttons ----------- */
.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 13px 26px; border-radius: 999px;
  white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: none; cursor: pointer; user-select: none;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1), background 160ms, box-shadow 160ms, color 160ms;
}
.cm-btn--primary { background: var(--saffron-400); color: var(--ink-950); }
.cm-btn--primary:hover { background: var(--saffron-500); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(217,154,11,.35); }
.cm-btn--accent { background: var(--coral-500); color: #fff; }
.cm-btn--accent:hover { background: var(--coral-600); transform: translateY(-1px); }
.cm-btn--dark { background: var(--ink-950); color: #fff; }
.cm-btn--dark:hover { background: var(--ink-800); }
.cm-btn--ghost { background: transparent; color: var(--ink-950); border: 1.5px solid var(--ink-950); }
.cm-btn--ghost:hover { background: var(--ink-950); color: #fff; }
.cm-btn--sm { padding: 9px 16px; font-size: 11px; }

/* ---------- Logo ----------- */
.cm-logo { display: inline-flex; align-items: center; gap: 10px; }
.cm-logo__mark {
  width: 38px; height: 38px; border-radius: 10px; background: var(--saffron-400);
  font-family: var(--font-display); font-weight: 900; font-size: 24px; color: var(--ink-950);
  display: grid; place-items: center; position: relative; overflow: hidden;
  box-shadow: 0 6px 14px rgba(217,154,11,.32);
}
.cm-logo__mark::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--coral-500); }
.cm-logo__word { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--ink-950); }
.cm-logo--footer .cm-logo__word { color: #fff; }

/* ---------- Nav ----------- */
.cm-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms, box-shadow 200ms;
}
.cm-nav--scrolled { border-color: var(--divider); box-shadow: 0 6px 18px rgba(20,18,10,.05); }
.cm-nav__inner {
  max-width: 1180px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.cm-nav__links { display: flex; gap: 26px; margin-left: 24px; flex: 1; }
.cm-nav__links a {
  font-weight: 600; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-700); transition: color 150ms;
}
.cm-nav__links a:hover { color: var(--coral-500); }

/* ---------- Hero ----------- */
.cm-hero {
  max-width: 1180px; margin: 0 auto;
  padding: 56px 24px 80px;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  grid-template-areas: 'tiles art' 'copy art';
  gap: 36px 56px; align-items: center;
}
.cm-hero__tiles { grid-area: tiles; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cm-hero__copy  { grid-area: copy; }
.cm-hero__art   { grid-area: art; display: flex; justify-content: center; }
.cm-hero__art img { max-height: 540px; width: auto; filter: drop-shadow(0 30px 60px rgba(40,18,2,.28)); }
.cm-hero__title { font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-950); margin: 0 0 14px; text-wrap: balance; }

.cm-pack-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px 10px; border-radius: 14px;
  background: var(--saffron-50); border: 2px solid transparent;
  cursor: pointer; transition: transform 160ms cubic-bezier(.2,.7,.2,1), border-color 160ms, box-shadow 160ms;
  font: inherit;
}
.cm-pack-tile img { height: 92px; width: auto; filter: drop-shadow(0 8px 14px rgba(40,18,2,.20)); }
.cm-pack-tile__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-900); }
.cm-pack-tile--saffron { background: var(--saffron-50); }
.cm-pack-tile--navy { background: var(--navy-50); }
.cm-pack-tile--teal { background: var(--teal-50); }
.cm-pack-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(40,18,2,.14); }
.cm-pack-tile.is-active { border-color: var(--coral-500); box-shadow: 0 14px 30px rgba(209,75,26,.20); }

.cm-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.cm-trust { margin-top: 18px; font-size: 13px; color: var(--fg-tertiary); display: flex; gap: 10px; flex-wrap: wrap; }
.cm-trust span:first-child { color: var(--saffron-600); font-weight: 600; }

/* ---------- Feature row ----------- */
.cm-feature {
  max-width: 1180px; margin: 0 auto; padding: 60px 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.cm-feature--right .cm-feature__media { order: 2; }
.cm-feature__media img { width: 100%; height: auto; border-radius: 18px; }
.cm-bullets { list-style: none; padding: 0; margin: 12px 0 18px; display: flex; flex-direction: column; gap: 8px; }
.cm-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; }
.cm-bullets svg { color: var(--success); flex: 0 0 18px; margin-top: 2px; }

/* ---------- Device showcase ----------- */
.cm-device { max-width: 1180px; margin: 0 auto; padding: 60px 24px; text-align: center; }
.cm-device__head { margin-bottom: 28px; }
.cm-device__pills { display: flex; gap: 16px; justify-content: center; margin: 28px 0 36px; flex-wrap: wrap; }
.cm-pill-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-warm); border: 1px solid var(--saffron-100);
  padding: 14px 22px; border-radius: 999px;
}
.cm-pill-card__n { font-family: var(--font-display); font-weight: 800; font-size: 24px; color: var(--coral-500); line-height: 1; }
.cm-pill-card__t { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.cm-device__art img { max-width: 100%; height: auto; }

/* ---------- Pack block (full bleed) ----------- */
.cm-packblock {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
  padding: 80px 6vw; color: #fff;
}
.cm-packblock.is-reverse .cm-packblock__art { order: -1; }
.cm-packblock--navy { background: linear-gradient(120deg, var(--navy-800), var(--navy-600)); }
.cm-packblock--teal { background: linear-gradient(120deg, var(--teal-800), var(--teal-600)); }
.cm-packblock__art { display: flex; justify-content: center; }
.cm-packblock__art img { max-height: 440px; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.cm-packblock .cm-btn--primary { margin-top: 8px; }

/* ---------- Pricing ----------- */
.cm-pricing { max-width: 1180px; margin: 0 auto; padding: 80px 24px; }
.cm-pricing__grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 18px; align-items: stretch; }
.cm-plan {
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 28px 24px; display: flex; flex-direction: column; gap: 12px;
  position: relative; transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  cursor: pointer;
}
.cm-plan:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cm-plan.is-featured {
  border: 2px solid var(--saffron-400);
  box-shadow: 0 24px 60px rgba(217,154,11,.18);
  transform: translateY(-6px);
}
.cm-plan.is-selected { border-color: var(--coral-500); box-shadow: 0 24px 60px rgba(209,75,26,.18); }
.cm-plan__tag {
  position: absolute; top: -12px; right: 22px;
  background: var(--coral-500); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.cm-plan__name { font-weight: 700; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-700); }
.cm-plan__price {
  font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: 1; color: var(--ink-950); letter-spacing: -0.01em;
}
.cm-plan__unit { font-size: 14px; font-weight: 600; color: var(--fg-tertiary); margin-left: 4px; letter-spacing: 0; }
.cm-plan__strike { font-size: 14px; color: var(--fg-tertiary); text-decoration: line-through; font-weight: 600; }
.cm-plan__copy { font-size: 14px; line-height: 1.55; color: var(--fg-secondary); flex: 1; }
.cm-plan__cta { margin-top: auto; }

/* ---------- FAQ ----------- */
.cm-faq { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
.cm-faq__list { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.cm-faq__row { border-bottom: 1px solid var(--divider); }
.cm-faq__row:last-child { border-bottom: none; }
.cm-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: none; border: none; cursor: pointer;
  padding: 18px 22px;
  font-family: var(--font-sans); font-weight: 700; font-size: 15.5px;
  color: var(--ink-900); text-align: left;
}
.cm-faq__chev { width: 18px; height: 18px; color: var(--saffron-500); transition: transform 200ms; }
.cm-faq__row.is-open .cm-faq__chev { transform: rotate(45deg); }
.cm-faq__a { padding: 0 22px 18px; font-size: 14.5px; line-height: 1.6; color: var(--fg-secondary); }

/* ---------- Contact ----------- */
.cm-contact { max-width: 920px; margin: 0 auto; padding: 60px 24px 100px; }
.cm-contact__head { text-align: center; margin-bottom: 32px; }
.cm-form { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.cm-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-field { display: flex; flex-direction: column; gap: 6px; }
.cm-field label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-700); }
.cm-field input, .cm-field textarea {
  font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-900);
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; outline: none; transition: border-color 150ms, box-shadow 150ms;
  resize: vertical;
}
.cm-field input:focus, .cm-field textarea:focus { border-color: var(--saffron-400); box-shadow: 0 0 0 3px var(--ring); }
.cm-form__ok { background: var(--teal-50); color: var(--teal-800); padding: 10px 14px; border-radius: 10px; font-size: 14px; }

/* ---------- Footer ----------- */
.cm-footer { background: var(--ink-950); color: rgba(255,255,255,0.8); padding: 56px 24px 24px; }
.cm-footer__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 48px; }
.cm-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cm-footer__cols h5 { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin: 0 0 12px; }
.cm-footer__cols a { display: block; font-size: 14px; color: rgba(255,255,255,0.85); padding: 5px 0; transition: color 150ms; }
.cm-footer__cols a:hover { color: var(--saffron-400); }
.cm-footer__bottom { max-width: 1180px; margin: 32px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 12.5px; color: rgba(255,255,255,0.5); }

/* ---------- Responsive ----------- */
@media (max-width: 880px) {
  .cm-hero { grid-template-columns: 1fr; grid-template-areas: 'tiles' 'art' 'copy'; }
  .cm-feature, .cm-feature--right .cm-feature__media { grid-template-columns: 1fr; }
  .cm-feature__media { order: 0; }
  .cm-packblock { grid-template-columns: 1fr; padding: 60px 24px; }
  .cm-pricing__grid { grid-template-columns: 1fr; }
  .cm-plan.is-featured { transform: none; }
  .cm-footer__inner { grid-template-columns: 1fr; }
  .cm-nav__links { display: none; }
  .cm-form__row { grid-template-columns: 1fr; }
}


/* ============== Menu styles ============== */

/* Member-menu UI kit */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg-warm); color: var(--fg); font-family: var(--font-sans); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.mm-page { min-height: 100vh; }

/* ---------- Nav ---------- */
.mm-nav { background: #fff; border-bottom: 1px solid var(--divider); position: sticky; top: 0; z-index: 30; }
.mm-nav__inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 16px; }
.mm-nav__right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.mm-nav__link { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-700); }
.mm-nav__link:hover { color: var(--coral-500); }

/* ---------- Chips ---------- */
.mm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.mm-chip--sm { padding: 4px 8px; font-size: 10px; gap: 4px; letter-spacing: 0.04em; }
.mm-chip--free { background: var(--saffron-100); color: var(--saffron-700); }
.mm-chip--paid { background: rgba(11,11,12,.88); color: #fff; }
.mm-chip--locked { background: var(--coral-50); color: var(--coral-600); }

/* ---------- Unlock banner ---------- */
.mm-unlock {
  max-width: 1100px; margin: 36px auto 0;
  padding: 36px 40px;
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--saffron-100);
  box-shadow: 0 22px 50px rgba(20,18,10,.06), 0 1px 0 var(--saffron-200) inset;
  position: relative;
  overflow: hidden;
}
.mm-unlock::before {
  content: ""; position: absolute; right: -100px; top: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240,180,25,.35), transparent 70%);
  pointer-events: none;
}
.mm-unlock::after {
  content: ""; position: absolute; right: -60px; bottom: -120px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(209,75,26,.18), transparent 70%);
  pointer-events: none;
}
.mm-unlock__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; position: relative; }
.mm-unlock__title { font-family: var(--font-display); font-weight: 800; font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; color: var(--ink-950); margin: 0 0 12px; position: relative; }
.mm-unlock__body { font-size: 17px; line-height: 1.55; color: var(--fg-secondary); max-width: 60ch; margin: 0 0 22px; position: relative; }
.mm-unlock__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; position: relative; }
.mm-unlock__link { font-size: 13.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-700); padding: 6px 4px; }
.mm-unlock__link:hover { color: var(--coral-500); }

/* ---------- Sections ---------- */
.mm-sections { max-width: 1100px; margin: 40px auto 80px; padding: 0 24px; display: flex; flex-direction: column; gap: 28px; }

.mm-section {
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--border);
  padding: 28px;
  position: relative;
}
.mm-section--medecine { border-top: 6px solid var(--saffron-400); }
.mm-section--encg     { border-top: 6px solid var(--teal-600); }
.mm-section--ensa     { border-top: 6px solid var(--navy-600); }

.mm-section__head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--divider); }
.mm-section__kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-tertiary); }
.mm-section__title { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.01em; color: var(--ink-950); margin: 0; }
.mm-section--medecine .mm-section__title { color: var(--ink-950); }
.mm-section--encg     .mm-section__title { color: var(--teal-800); }
.mm-section--ensa     .mm-section__title { color: var(--navy-800); }

.mm-section__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }

/* ---------- Subject tile ---------- */
.mm-tile {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 14px;
  background: var(--ink-50);
  border: 1px solid transparent;
  border-radius: 14px;
  transition: transform 160ms cubic-bezier(.2,.7,.2,1), background 160ms, border-color 160ms, box-shadow 160ms;
  position: relative;
  overflow: hidden;
}
.mm-tile:hover { transform: translateY(-2px); background: #fff; border-color: var(--border); box-shadow: var(--shadow-sm); }
.mm-tile__icon {
  flex: 0 0 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  background: #fff; color: var(--ink-950);
  border: 1px solid var(--divider);
}
.mm-tile--saffron .mm-tile__icon { background: var(--saffron-100); color: var(--saffron-700); border-color: var(--saffron-200); }
.mm-tile--teal    .mm-tile__icon { background: var(--teal-50); color: var(--teal-800); border-color: rgba(30,135,117,.2); }
.mm-tile--navy    .mm-tile__icon { background: var(--navy-50); color: var(--navy-800); border-color: rgba(30,58,138,.2); }
.mm-tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mm-tile__name { font-size: 15.5px; font-weight: 700; color: var(--ink-950); letter-spacing: -0.005em; }
.mm-tile__count { font-size: 12px; color: var(--fg-tertiary); font-weight: 500; }
.mm-tile__chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.mm-tile__chev { color: var(--fg-tertiary); flex: 0 0 18px; }
.mm-tile:hover .mm-tile__chev { color: var(--coral-500); }

/* ---------- Revision card ---------- */
.mm-revision {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center;
  padding: 18px 22px;
  background: linear-gradient(120deg, var(--saffron-50), #fff 60%);
  border: 1px solid var(--saffron-200);
  border-radius: 16px;
  transition: transform 160ms, box-shadow 160ms;
}
.mm-revision:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mm-revision__art { position: relative; height: 110px; }
.mm-revision__sheet { position: absolute; left: 50%; top: 50%; width: 150px; height: 92px; border-radius: 10px; background: #fff; border: 1px solid var(--border); box-shadow: 0 8px 18px rgba(20,18,10,.10); }
.mm-revision__sheet--1 { transform: translate(-50%,-50%) rotate(-4deg); z-index: 3; padding: 10px 12px; }
.mm-revision__sheet--2 { transform: translate(calc(-50% + 12px), calc(-50% + 4px)) rotate(3deg); z-index: 2; background: var(--saffron-50); }
.mm-revision__sheet--3 { transform: translate(calc(-50% - 14px), calc(-50% + 8px)) rotate(-9deg); z-index: 1; background: var(--coral-50); }
.mm-revision__top { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral-500); margin-bottom: 6px; }
.mm-revision__txt { font-size: 10px; line-height: 1.4; color: var(--ink-800); font-family: var(--font-mono); }
.mm-revision__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; color: var(--ink-950); margin: 4px 0 6px; }
.mm-revision__body { font-size: 14px; color: var(--fg-secondary); margin: 0 0 8px; line-height: 1.5; }
.mm-revision__cta { font-size: 13px; font-weight: 700; color: var(--coral-500); letter-spacing: 0.02em; }

/* ---------- WhatsApp float ---------- */
.mm-whatsapp {
  position: fixed; right: 22px; bottom: 22px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 14px 32px rgba(37,211,102,.45);
  transition: transform 160ms;
  z-index: 40;
}
.mm-whatsapp:hover { transform: scale(1.06); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .mm-unlock { padding: 24px 20px; border-radius: 16px; margin: 20px 12px 0; }
  .mm-unlock__title { font-size: 28px; }
  .mm-sections { padding: 0 12px; gap: 16px; }
  .mm-section { padding: 18px; border-radius: 16px; }
  .mm-section__title { font-size: 22px; }
  .mm-section__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mm-revision { grid-template-columns: 1fr; }
  .mm-revision__art { display: none; }
}
@media (max-width: 440px) {
  .mm-section__grid { grid-template-columns: 1fr; }
}


/* ============== Checkout (auth) styles ============== */

/* Auth checkout · in-system saffron palette (matches menu / index) */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg-warm); color: var(--ink-900); font-family: var(--font-sans); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.auth-page { min-height: 100vh; padding-bottom: 100px; }

/* ---------- Page width ---------- */
.auth-wrap { max-width: 880px; margin: 24px auto 0; padding: 0 24px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- Total banner — saffron card with coral strip (echoes box covers) ---------- */
.auth-total {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(120deg, #F5C548 0%, var(--saffron-400) 60%, #F5C548 100%);
  color: var(--ink-950);
  padding: 28px 32px 36px;
  overflow: hidden;
  box-shadow: 0 26px 50px rgba(217,154,11,.28);
}
.auth-total::after {
  /* Coral bottom strip — direct nod to the Médecine box cover */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px;
  background: var(--coral-500);
}
.auth-total__bg { position: absolute; inset: 0; pointer-events: none; }
.auth-total__circle { position: absolute; border-radius: 50%; }
.auth-total__circle--a { right: -80px; top: -100px; width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(255,255,255,.30), transparent 70%); }
.auth-total__circle--b { left: -60px; bottom: -100px; width: 240px; height: 240px;
  background: radial-gradient(closest-side, rgba(209,75,26,.20), transparent 70%); }
.auth-total__inner { position: relative; text-align: center; }
.auth-total__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.30em;
  color: rgba(11,11,12,.72);
  margin-bottom: 10px;
}
.auth-total__amount {
  font-family: var(--font-display); font-weight: 800; font-size: 56px;
  letter-spacing: -0.02em; line-height: 1;
}
.auth-total__amount > span:first-child { color: var(--ink-950); }
.auth-total__strike {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  color: rgba(11,11,12,.55); text-decoration: line-through;
  margin-top: 12px;
}

/* ---------- Generic card ---------- */
.auth-card {
  background: #fff;
  border: 1px solid var(--saffron-100);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 1px 0 rgba(20,18,10,.04);
}
.auth-card__eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--fg-tertiary); margin-bottom: 14px;
}

/* ---------- Format toggle ---------- */
.auth-format { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-format__opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 22px 16px;
  background: var(--saffron-50);
  border: 1.5px solid var(--saffron-100);
  border-radius: 14px;
  cursor: pointer;
  transition: all 160ms cubic-bezier(.2,.7,.2,1);
  color: var(--ink-800);
}
.auth-format__opt input { position: absolute; opacity: 0; pointer-events: none; }
.auth-format__opt:hover { border-color: var(--saffron-300); transform: translateY(-1px); }
.auth-format__opt.is-active {
  background: #fff;
  border-color: var(--coral-500);
  box-shadow: 0 0 0 4px var(--coral-50);
  color: var(--ink-950);
}
.auth-format__icon { color: var(--saffron-600); }
.auth-format__opt.is-active .auth-format__icon { color: var(--coral-500); }
.auth-format__label { font-size: 14px; font-weight: 700; }

/* ---------- Included grid — decorative subjects ---------- */
.auth-included {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.auth-included__cell {
  display: flex; align-items: center; gap: 10px;
  background: var(--saffron-50);
  border: 1.5px solid var(--saffron-100);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink-900);
}
.auth-included__icon {
  width: 28px; height: 28px; flex: 0 0 28px;
  color: var(--saffron-600);
  display: grid; place-items: center;
}
.auth-included__icon svg { width: 22px; height: 22px; }
.auth-included__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-900);
}
.auth-included__sep { color: var(--saffron-300); margin: 0 4px; font-weight: 400; }

/* ---------- Print matrix ---------- */
.auth-print__head {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em;
  color: var(--ink-950);
  margin-bottom: 6px;
}
.auth-print__head svg { color: var(--coral-500); }
.auth-print__sub {
  text-align: center;
  font-size: 12.5px; color: var(--fg-tertiary);
  margin: 0 0 18px;
}
.auth-print__bulk { display: flex; gap: 8px; margin-bottom: 14px; }
.auth-pill {
  background: var(--saffron-50);
  border: 1px solid var(--saffron-200);
  color: var(--saffron-700);
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer; transition: all 150ms;
}
.auth-pill:hover { background: var(--saffron-100); border-color: var(--saffron-300); }
.auth-pill--ghost { background: transparent; color: var(--fg-tertiary); border-color: var(--border); }

.auth-matrix {
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--saffron-100);
}
.auth-matrix table { width: 100%; border-collapse: collapse; min-width: 480px; }
.auth-matrix thead th,
.auth-matrix tbody th,
.auth-matrix tbody td { padding: 10px 8px; text-align: center; vertical-align: middle; }
.auth-matrix thead th { background: var(--saffron-50); border-bottom: 1px solid var(--saffron-100); }
.auth-matrix__col-icon { color: var(--coral-500); display: flex; justify-content: center; margin-bottom: 4px; }
.auth-matrix__col-icon svg { width: 20px; height: 20px; }
.auth-matrix__col-label { font-size: 11px; font-weight: 800; color: var(--ink-950); letter-spacing: 0.08em; text-transform: uppercase; }
.auth-matrix tbody tr { border-top: 1px solid #F4ECD4; }
.auth-matrix tbody tr:nth-child(odd) td,
.auth-matrix tbody tr:nth-child(odd) th { background: #FFFCEF; }

.auth-matrix tbody th { text-align: left; }
.auth-matrix tbody th > * { display: block; }
.auth-matrix tbody th .auth-matrix__mini { display: inline-block; margin-top: 6px; }
.auth-matrix__year {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-weight: 700; font-size: 13px; color: var(--ink-950);
  text-align: left; min-height: 32px;
}
.auth-matrix__year.is-archive { font-style: italic; color: var(--coral-600); }
.auth-matrix__sub { font-size: 10.5px; font-weight: 500; color: var(--fg-tertiary); font-style: normal; white-space: nowrap; }
.auth-matrix__mini {
  background: transparent;
  color: var(--fg-tertiary);
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 8px; cursor: pointer; transition: all 150ms;
}
.auth-matrix__mini:hover { color: var(--coral-500); border-color: var(--coral-500); }

.auth-matrix__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: transparent; border: none; padding: 4px 8px; cursor: pointer;
  width: 100%;
}
.auth-matrix__check {
  width: 24px; height: 24px; border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  color: #fff;
  transition: all 140ms;
}
.auth-matrix__check.is-on { background: var(--coral-500); border-color: var(--coral-500); }
.auth-matrix__cell:hover .auth-matrix__check:not(.is-on) { border-color: var(--saffron-400); }
.auth-matrix__pages { font-size: 10.5px; font-weight: 600; color: var(--fg-tertiary); }
.auth-matrix td.is-on .auth-matrix__pages { color: var(--ink-950); font-weight: 700; }

.auth-print__foot {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 64px;
  background: var(--saffron-50);
  border: 1px solid var(--saffron-100);
  border-radius: 14px;
  padding: 14px 22px;
}
.auth-print__foot > div { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.auth-print__total-n {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--ink-950); line-height: 1; text-align: center; white-space: nowrap;
}
.auth-print__total-n--accent { color: var(--coral-500); }
.auth-print__unit { font-size: 12px; font-weight: 600; color: var(--coral-500); margin-left: 2px; }
.auth-print__total-l { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; color: var(--fg-tertiary); text-align: center; }
.auth-print__total-l--accent { color: var(--coral-500); }

/* ---------- Print details ---------- */
.auth-print__details {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: center;
}
.auth-print__detail-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; color: var(--fg-secondary);
}
.auth-print__detail-item svg { flex-shrink: 0; color: var(--saffron-500); }

/* ---------- Address form ---------- */
.auth-address { display: flex; flex-direction: column; gap: 14px; }
.auth-address__head { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--divider); margin-bottom: 4px; }
.auth-address__check {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--saffron-400); color: var(--ink-950);
  display: grid; place-items: center;
}
.auth-address__title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-950); }
.auth-address__sub { font-size: 12px; color: var(--fg-tertiary); }
.auth-address__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--fg-tertiary); }
.auth-field input {
  background: #FFFDF6;
  border: 1.5px solid var(--saffron-100);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px; color: var(--ink-900);
  outline: none; transition: all 150ms;
  font-family: inherit;
}
.auth-field input:focus { border-color: var(--saffron-400); background: #fff; box-shadow: 0 0 0 3px var(--ring); }

/* ---------- Promo code ---------- */
.auth-promo {
  text-align: center;
  margin: 2px 0 4px;
}
.auth-promo__toggle {
  background: none; border: none; cursor: pointer;
  color: #b0b0b0;
  font-size: 12px;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.auth-promo input {
  flex: 1;
  background: #FFFDF6; border: 1.5px solid var(--saffron-100);
  border-radius: 10px; padding: 11px 14px;
  font-family: inherit; font-size: 14px;
  outline: none;
}
.auth-promo input:focus { border-color: var(--saffron-400); background: #fff; }
.auth-promo__btn {
  background: var(--coral-500); color: #fff;
  border: none; border-radius: 10px;
  padding: 0 18px; font-weight: 700; font-size: 13px;
  cursor: pointer; height: 42px;
}
.auth-promo__btn:hover { background: var(--coral-600); }
.auth-promo__err { color: var(--coral-500); font-size: 12px; margin-top: 2px; }
.auth-promo__applied {
  display: flex; align-items: center; gap: 10px;
  background: #E8F4EC; border: 1px solid #B7DFC0; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: #1D6533;
}
.auth-promo__applied svg { color: #1D6533; }
.auth-promo__clear { margin-left: auto; background: transparent; border: none; color: #1D6533; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; }

/* ---------- CTA ---------- */
.auth-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 18px;
  border-radius: 999px;
  background: var(--saffron-400);
  color: var(--ink-950);
  font-family: var(--font-sans); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  border: none; cursor: pointer;
  transition: all 160ms;
  box-shadow: 0 14px 32px rgba(217,154,11,.30);
  white-space: nowrap;
}
.auth-cta:hover { background: var(--saffron-500); transform: translateY(-1px); box-shadow: 0 20px 40px rgba(217,154,11,.36); }
.auth-cta:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.auth-cta__lock { display: grid; place-items: center; }

.auth-cta--pay {
  background: var(--success);
  color: #fff;
  box-shadow: 0 14px 32px rgba(63,163,77,.32);
}
.auth-cta--pay:hover { background: #348C40; box-shadow: 0 20px 40px rgba(63,163,77,.4); }

/* ---------- Back row (top of payer page) ---------- */
.auth-backrow {
  max-width: 880px; margin: 18px auto 0; padding: 0 24px;
  display: flex; align-items: center; gap: 10px;
}
.auth-backbtn {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral-50);
  color: var(--coral-600);
  border: 1px solid var(--coral-100);
  cursor: pointer; transition: all 150ms;
}
.auth-backbtn:hover { background: var(--coral-100); color: var(--coral-600); }
.auth-backrow__email {
  margin-left: auto;
  font-size: 13px; font-weight: 600; color: var(--fg-tertiary);
  display: flex; align-items: center; gap: 6px;
}
.auth-backrow__email svg { color: var(--saffron-600); }

/* ---------- Card form (YouCan Pay style) ---------- */
.auth-cardform {
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  padding-bottom: 14px;
}
.auth-cardform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-cardform__help { font-size: 12.5px; color: var(--fg-tertiary); text-align: center; margin-top: 4px; }
.auth-cardform__help a { color: var(--coral-500); font-weight: 600; }
.auth-cardform__brand {
  position: absolute; right: 8px; bottom: -6px;
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--fg-tertiary);
}
.auth-cardform__by { font-style: italic; }
.auth-cardform__youcan { font-weight: 800; color: var(--ink-950); font-size: 13px; }
.auth-cardform__youcantag {
  display: inline-block;
  margin-left: 4px;
  background: #003087; color: #fff;
  font-size: 8px; font-weight: 700;
  padding: 1px 4px; border-radius: 2px; vertical-align: 2px;
}

.auth-field--icon { position: relative; }
.auth-field--icon input {
  background: #FFFDF6;
  border: 1.5px solid var(--saffron-100);
  border-radius: 12px;
  padding: 13px 14px 13px 44px;
  font-size: 14px; color: var(--ink-900);
  outline: none; transition: all 150ms;
  font-family: inherit;
  width: 100%;
}
.auth-field--icon input:focus { border-color: var(--saffron-400); background: #fff; box-shadow: 0 0 0 3px var(--ring); }
.auth-field--icon input::placeholder { color: var(--fg-muted); }
.auth-field__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--fg-tertiary);
  font-weight: 800; font-size: 14px;
}
.auth-field__brand {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
}

/* ---------- Secured caption ---------- */
.auth-secured {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 13px; color: var(--fg-tertiary);
  margin: -4px 0 4px;
}
.auth-secured > span { white-space: nowrap; }
.auth-secured svg { color: var(--success); flex: 0 0 14px; }
.auth-secured b { color: var(--ink-900); font-weight: 700; }

/* ---------- Bank transfer guide ---------- */
.auth-bank { display: flex; flex-direction: column; gap: 16px; }
.auth-bank__h {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  color: var(--ink-950); letter-spacing: -0.01em;
  margin: 0;
}
.auth-bank__h > span:first-child {
  font-family: var(--font-sans); font-weight: 800; font-size: 11px;
  letter-spacing: 0.18em;
  background: var(--coral-500); color: #fff;
  padding: 4px 10px; border-radius: 999px;
}
.auth-bank__lead { font-size: 14.5px; line-height: 1.55; color: var(--fg-secondary); margin: 0; }

.auth-bank__steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.auth-bank__steps > li { display: flex; gap: 14px; }
.auth-bank__num {
  flex: 0 0 30px; height: 30px; border-radius: 50%;
  background: var(--ink-950); color: var(--saffron-400);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.auth-bank__step-title { font-weight: 700; font-size: 15px; color: var(--ink-950); margin-bottom: 4px; }
.auth-bank__step-body { font-size: 13.5px; color: var(--fg-secondary); line-height: 1.5; }

.auth-bank__rib {
  margin-top: 10px;
  background: var(--saffron-50);
  border: 1.5px dashed var(--saffron-300);
  border-radius: 12px;
  padding: 12px 14px;
}
.auth-bank__rib-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; color: var(--saffron-700); text-transform: uppercase; }
.auth-bank__rib-value { font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--ink-950); margin-top: 4px; letter-spacing: 0.04em; }

.auth-bank__amount {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px; padding: 8px 14px;
  background: #fff; border: 1px solid var(--divider); border-radius: 10px;
  font-size: 13px; color: var(--fg-secondary);
}
.auth-bank__amount-n {
  font-family: var(--font-display); font-weight: 800; color: var(--ink-950); font-size: 18px;
}

.auth-bank__wa {
  margin-top: 10px;
  display: flex; align-items: center; gap: 12px;
  background: #25D366; color: #fff;
  padding: 12px 16px; border-radius: 14px;
  transition: all 160ms;
}
.auth-bank__wa:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(37,211,102,.35); }
.auth-bank__wa-label { font-weight: 700; font-size: 14px; }
.auth-bank__wa-num { font-family: var(--font-mono); font-size: 12.5px; opacity: 0.9; margin-top: 2px; }

.auth-bank__note {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--success);
  background: #ECF7EE; border: 1px solid #C9E6CF; border-radius: 10px;
  padding: 10px 14px;
}
.auth-bank__thanks {
  text-align: center; font-style: italic; color: var(--saffron-700); font-weight: 600;
  margin: 4px 0 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .auth-wrap { padding: 0 14px; gap: 14px; margin-top: 16px; }
  .auth-total { padding: 22px 18px 30px; border-radius: 16px; }
  .auth-total__amount { font-size: 42px; }
  .auth-format { grid-template-columns: 1fr; }
  .auth-included { grid-template-columns: 1fr 1fr; }
  .auth-print__foot { flex-direction: column; gap: 12px; }
  .auth-address__row--2 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .auth-included { grid-template-columns: 1fr; }
}