/* Individual membership page (membership.html), below the first screen.
   Owner review 2026-10-10: compact blocks, three dark zones only (first screen, grades, application),
   white and pale blocks between them. Surfaces are matte: no gradient, sheen or blur.
   Loaded after courses-style.css; that shared file is not edited for this page. */
.mp-main { --mp-purple:#361163; --mp-gold:#C0A582; --mp-deep:#130526; --mp-ink:#1c0938; --mp-text:#505050; --mp-line:#e6e1ee;
  --mp-on-dark:#e9e3f1; --mp-dim:#cfc6dc; --mp-hair:rgba(192,165,130,.32); --mp-out:cubic-bezier(.16,1,.3,1); }

/* ── Rhythm ───────────────────────────────────────────────────────────── */
.mp-main > section { padding:72px 0; border-bottom:0; }
.mp-main h2.section-title { letter-spacing:-.02em; }
/* Section head: title on the left, lead on the right, both on one baseline. */
.mp-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 56px; align-items:end; margin-bottom:32px; }
.mp-main .mp-head h2.section-title { margin:0; text-wrap:balance; }
.mp-main .mp-head .section-subtitle { max-width:none; margin:0; }

/* ── Figures: a light band, heading on the left, three cards on the right ─ */
.ms-band { background:#ffffff; }
.ms-row { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2.3fr); gap:48px; align-items:center; }
.mp-main .ms-head h2.section-title { margin:0; font-size:28px; line-height:1.2; }
.member-stats-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.member-stat-card { position:relative; display:flex; align-items:flex-start; gap:18px; min-width:0; padding:20px 22px; border:1px solid var(--mp-line); border-top:3px solid var(--mp-gold); border-radius:14px; background:#ffffff; color:inherit; text-decoration:none;
  transition:background-color .35s,border-color .35s,box-shadow .35s,transform .35s var(--mp-out); }
.member-stat-card:hover, .member-stat-card:focus-visible { border-color:var(--mp-gold); box-shadow:0 14px 28px rgba(54,17,99,.1); transform:translateY(-4px); }
.member-stat-card:focus-visible { outline:3px solid var(--mp-purple); outline-offset:4px; }
/* Tabular figures and a fixed width: the count-up never shifts the text next to it. */
.member-stat-value { flex:none; min-width:2ch; color:var(--mp-purple); font-size:44px; font-weight:700; line-height:1; letter-spacing:-.03em; font-feature-settings:'tnum'; }
.member-stat-text { min-width:0; padding-left:18px; border-left:1px solid var(--mp-line); }
.member-stat-label { color:var(--mp-purple); font-size:16px; font-weight:700; line-height:1.3; letter-spacing:.04em; }
.member-stat-desc { color:var(--mp-text); font-size:15px; line-height:1.4; }
.member-stat-go { position:absolute; top:14px; right:14px; width:16px; height:16px; color:var(--mp-gold); transition:translate .3s var(--mp-out); }
.member-stat-card:hover .member-stat-go { translate:3px -3px; }
/* The top grade is marked by colour, not by size. */
.member-stat-card.is-flagship { border-color:var(--mp-purple); border-top-color:var(--mp-gold); background:var(--mp-purple); }
.member-stat-card.is-flagship:hover, .member-stat-card.is-flagship:focus-visible { border-color:var(--mp-gold); box-shadow:0 14px 28px rgba(54,17,99,.24); }
.is-flagship .member-stat-value { color:#ffffff; }
.is-flagship .member-stat-text { border-left-color:var(--mp-hair); }
.is-flagship .member-stat-label { color:var(--mp-gold); }
.is-flagship .member-stat-desc { color:var(--mp-on-dark); }

/* ── Benefits: three cards in the language of the homepage stat cards ─── */
.mb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
/* Title row and text row are shared by the three cards: a wrapped title never shifts a neighbour's text. */
.mb-card { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:0; padding:24px; border:1px solid var(--mp-line); border-top:3px solid var(--mp-gold); border-radius:14px; background:#ffffff;
  transition:border-color .35s,box-shadow .35s,transform .35s var(--mp-out); }
.mb-card:hover { border-color:var(--mp-gold); box-shadow:0 14px 28px rgba(54,17,99,.1); transform:translateY(-4px); }
.mb-card-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:12px; }
.mb-card-icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--mp-purple); color:var(--mp-gold); transition:background-color .35s,color .35s; }
.mb-card-icon svg { width:20px; height:20px; stroke-width:2.5; }
.mb-card:hover .mb-card-icon { background:var(--mp-gold); color:var(--mp-purple); }
.mp-main .mb-card h3 { margin:0; padding-top:6px; color:var(--mp-purple); font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.mp-main .mb-card p { margin:0; color:var(--mp-text); font-size:15px; line-height:1.55; }

/* ── Grades: dark block, a ladder of four grades and the chosen grade ─── */
.mg-section { background:var(--mp-deep); }
.mg-section .section-eyebrow { color:var(--mp-gold); }
.mp-main .mg-section h2.section-title { color:#ffffff; }
.mp-main .mg-section .section-subtitle { color:var(--mp-on-dark); }
.mg-layout { display:grid; grid-template-columns:264px minmax(0,1fr); gap:28px; align-items:stretch; }
/* The track runs through the centres of the round marks; its gold part reaches the chosen grade. */
.mg-ladder { --mg-progress:0; position:relative; display:grid; align-content:space-between; gap:8px; }
.mg-ladder::before, .mg-ladder::after { content:""; position:absolute; top:28px; left:33px; width:2px; }
.mg-ladder::before { bottom:28px; background:var(--mp-hair); }
.mg-ladder::after { height:calc((100% - 56px) * var(--mg-progress)); background:var(--mp-gold); transition:height .5s var(--mp-out); }
.mg-step { position:relative; z-index:1; display:flex; align-items:center; gap:14px; width:100%; min-height:56px; padding:8px 14px; border:1px solid transparent; border-radius:12px; background:transparent; color:var(--mp-dim);
  font-size:15px; font-weight:700; line-height:1.3; letter-spacing:.02em; cursor:pointer; transition:background-color .3s,border-color .3s,color .3s; }
.mg-step-icon { flex:none; display:grid; place-items:center; width:38px; height:38px; border:2px solid #5d4a63; border-radius:50%; background:var(--mp-deep); color:var(--mp-gold); transition:background-color .3s,border-color .3s,color .3s; }
.mg-step-icon svg { width:18px; height:18px; stroke-width:2.5; }
.mg-step-arrow { flex:none; width:16px; height:16px; margin-left:auto; color:var(--mp-gold); opacity:0; stroke-width:2.5; transition:opacity .3s; }
.mg-step:hover { border-color:var(--mp-hair); color:#ffffff; }
.mg-step:focus-visible { outline:2px solid var(--mp-gold); outline-offset:3px; }
.mg-step.is-passed .mg-step-icon { border-color:var(--mp-gold); }
.mg-step.is-active { border-color:var(--mp-gold); background:var(--mp-ink); color:#ffffff; }
.mg-step.is-active .mg-step-icon { border-color:var(--mp-gold); background:var(--mp-gold); color:var(--mp-purple); }
.mg-step.is-active .mg-step-arrow { opacity:1; }
.mg-step.is-flagship .mg-step-label { color:var(--mp-gold); }

.mg-panel { position:relative; display:flex; flex-direction:column; min-height:544px; overflow:hidden; padding:32px 34px; border:1px solid var(--mp-hair); border-top:3px solid var(--mp-gold); border-radius:14px; background:var(--mp-ink); color:var(--mp-on-dark); }
.mg-panel:focus-visible { outline:2px solid var(--mp-gold); outline-offset:3px; }
/* Short name of the grade as an outlined watermark in the free corner next to the button. */
.mg-panel-mark { position:absolute; right:28px; bottom:14px; color:transparent; font-size:88px; font-weight:700; line-height:1; letter-spacing:-.03em; -webkit-text-stroke:1px rgba(192,165,130,.34); pointer-events:none; user-select:none; }
.mg-panel-head { position:relative; margin-bottom:24px; padding-bottom:22px; border-bottom:1px solid var(--mp-hair); }
.mp-main .mg-panel-title { margin:0 0 14px; color:#ffffff; font-size:26px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.mg-postnom { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px; }
.mg-label { color:var(--mp-gold); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.12em; text-transform:uppercase; }
.mp-main h4.mg-label { margin:0 0 8px; }
.mg-chip { color:#ffffff; font-size:15px; font-weight:600; line-height:1.5; }
.mg-panel-grid { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px 40px; }
.mp-main .mg-panel-grid p { margin:0 0 20px; color:var(--mp-on-dark); font-size:15px; line-height:1.55; }
.mp-main .mg-panel-grid p:last-child { margin-bottom:0; }
.mg-panel-grid strong { color:#ffffff; font-weight:700; }
.mg-benefits { display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.mg-benefits li { display:flex; align-items:flex-start; gap:10px; color:var(--mp-on-dark); font-size:15px; line-height:1.5; }
.mg-benefits svg { flex:none; width:18px; height:18px; margin-top:2px; color:var(--mp-gold); stroke-width:2.5; }
.mg-panel-foot { position:relative; margin-top:auto; padding-top:28px; }
.mg-apply { display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:14px 24px; border:1px solid var(--mp-gold); border-radius:3px; background:var(--mp-gold); color:var(--mp-purple); font-size:15px; font-weight:700; line-height:1.1; text-transform:uppercase; cursor:pointer;
  transition:background-color .25s,border-color .25s,transform .25s; }
.mg-apply svg { width:18px; height:18px; transition:translate .25s; }
.mg-apply:hover { border-color:#ffffff; background:#ffffff; transform:translateY(-2px); }
.mg-apply:hover svg { translate:3px 0; }
.mg-apply:focus-visible { outline:2px solid #ffffff; outline-offset:3px; }

/* ── Entry to the community: Student and Graduate, apart from the ladder ─
   Deliberately plain: two equal cards and one note, no tabs, no script. */
.me-section { background:#ebebeb; }
/* Gold is too faint on the pale grey; the label takes the brand purple here. */
.me-section .section-eyebrow { color:var(--mp-purple); }
.me-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
/* Name, text, documents and button rows are shared by the two cards: a longer text never shifts the neighbour's button. */
.me-card { display:grid; grid-template-rows:subgrid; grid-row:span 4; row-gap:0; padding:24px; border:1px solid var(--mp-line); border-top:3px solid var(--mp-gold); border-radius:14px; background:#ffffff; }
.me-card-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.me-card-icon { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--mp-purple); color:var(--mp-gold); }
.me-card-icon svg { width:20px; height:20px; stroke-width:2.5; }
.mp-main .me-card h3 { margin:0; color:var(--mp-purple); font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.mp-main .me-card p { margin:0; color:var(--mp-text); font-size:15px; line-height:1.55; }
.me-need { display:grid; gap:4px; margin-top:16px; padding-top:16px; border-top:1px solid var(--mp-line); color:var(--mp-text); font-size:15px; line-height:1.5; }
.me-label { color:var(--mp-purple); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.me-apply { justify-self:start; align-self:end; display:inline-flex; align-items:center; min-height:48px; margin-top:20px; padding:12px 22px; border:1px solid var(--mp-purple); border-radius:3px; background:var(--mp-purple); color:#ffffff; font-size:15px; font-weight:700; line-height:1.1; text-decoration:none; text-transform:uppercase;
  transition:background-color .25s,color .25s; }
.me-apply:hover { background:#ffffff; color:var(--mp-purple); }
.me-apply:focus-visible { outline:3px solid var(--mp-purple); outline-offset:3px; }
.mp-main .me-note { display:flex; align-items:flex-start; gap:10px; margin:20px 0 0; color:var(--mp-text); font-size:15px; line-height:1.5; }
.me-note svg { flex:none; width:18px; height:18px; margin-top:2px; color:var(--mp-purple); stroke-width:2.5; }

/* ── Status calculator: light, intro on the left, question on the right ── */
.mc-section { background:#ffffff; }
.mc-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:56px; align-items:start; }
.mp-main .mc-intro .section-subtitle { max-width:none; margin:0 0 28px; }
.mc-progress { display:grid; gap:14px; padding-top:22px; border-top:1px solid var(--mp-line); }
.mc-progress-row { display:flex; align-items:center; gap:14px; }
.mc-step { color:var(--mp-purple); font-size:13px; font-weight:700; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; }
.mc-bar { flex:1; max-width:220px; height:6px; overflow:hidden; border-radius:3px; background:var(--mp-line); }
.mc-bar > div { height:100%; background:var(--mp-gold); transition:width .3s; }
.mc-crumbs { display:flex; flex-wrap:wrap; gap:8px; }
/* An answered step: a click returns to it. */
.mc-crumb { min-height:36px; padding:8px 12px; border:1px solid var(--mp-line); border-radius:6px; background:#ffffff; color:var(--mp-text); font-size:13px; font-weight:600; line-height:1.3; cursor:pointer; transition:border-color .25s,color .25s; }
.mc-crumb:hover { border-color:var(--mp-gold); color:var(--mp-purple); }
.mc-crumb:focus-visible, .mc-choice:focus-visible { outline:3px solid var(--mp-purple); outline-offset:3px; }
/* The card keeps one height through the steps, so the block does not jump between questions. */
.mc-card { min-height:400px; padding:28px; border:1px solid var(--mp-line); border-top:3px solid var(--mp-gold); border-radius:14px; background:#ffffff; box-shadow:0 14px 28px rgba(54,17,99,.07); }
.mp-main .mc-question { margin:0 0 20px; color:var(--mp-purple); font-size:20px; font-weight:700; line-height:1.3; letter-spacing:-.01em; }
.mc-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:1fr; gap:12px; }
.mc-choice { display:grid; align-content:start; gap:4px; min-height:72px; padding:14px 16px; border:1px solid var(--mp-line); border-radius:10px; background:#ffffff; cursor:pointer;
  transition:background-color .25s,border-color .25s,box-shadow .25s,transform .25s var(--mp-out); }
.mc-choice:hover { border-color:var(--mp-gold); background:#faf8f5; box-shadow:0 8px 18px rgba(54,17,99,.08); transform:translateY(-2px); }
.mc-choice-text { color:var(--mp-purple); font-size:15px; font-weight:700; line-height:1.35; }
.mc-choice-desc { color:var(--mp-text); font-size:13px; line-height:1.45; }

.mc-result-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:16px 32px; margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--mp-line); }
.mc-badge { display:inline-block; margin-bottom:12px; padding:5px 10px; border-radius:4px; background:var(--mp-gold); color:var(--mp-purple); font-size:11px; font-weight:700; line-height:1.3; letter-spacing:.1em; text-transform:uppercase; }
.mc-badge.is-flagship { background:var(--mp-purple); color:var(--mp-gold); }
.mp-main .mc-result-title { margin:0; color:var(--mp-purple); font-size:24px; font-weight:700; line-height:1.25; letter-spacing:-.01em; }
.mc-postnom { display:grid; gap:6px; max-width:300px; }
.mc-label { color:var(--mp-purple); font-size:12px; font-weight:700; line-height:1.4; letter-spacing:.1em; text-transform:uppercase; }
.mp-main h4.mc-label { margin:0 0 8px; }
.mc-chip { padding:8px 12px; border:1px solid var(--mp-line); border-radius:6px; background:#f7f5f1; color:var(--mp-purple); font-size:14px; font-weight:700; line-height:1.4; }
.mc-result-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px 28px; }
.mp-main .mc-result-grid p { margin:0; color:var(--mp-text); font-size:15px; line-height:1.55; }
.mp-main .mc-note { display:flex; align-items:flex-start; gap:10px; margin:20px 0 0; padding:12px 14px; border-radius:8px; background:#f7f5f1; color:var(--mp-text); font-size:13px; line-height:1.5; }
.mc-note svg { flex:none; width:16px; height:16px; margin-top:2px; color:var(--mp-purple); stroke-width:2.5; }
.mc-result-actions { display:flex; gap:12px; margin-top:20px; }
.mc-result-actions .btn { flex:1; justify-content:center; }
.mc-result-actions .btn-primary { flex:2; }

@media (max-width:1199px) {
  /* Narrower than this the three cards need the full row to keep each name on one line. */
  .ms-row { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:1023px) {
  .mp-head, .mc-layout { grid-template-columns:1fr; }
  .mc-layout { gap:32px; }
  .mc-card { min-height:0; }
  /* The ladder becomes a row of four buttons above the panel; the track is for the vertical ladder only. */
  .mg-layout { grid-template-columns:1fr; gap:20px; }
  .mg-ladder { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .mg-ladder::before, .mg-ladder::after { content:none; }
  .mg-step { border-color:var(--mp-hair); }
  .mg-step-arrow { display:none; }
  .mg-panel { min-height:0; }
}
@media (max-width:767px) {
  .mp-main > section { padding:48px 0; }
  .mp-head { margin-bottom:24px; }
  .member-stats-grid { gap:8px; }
  /* Phone: three narrow cards in a row, figure above the name. */
  .member-stat-card { flex-direction:column; align-items:flex-start; gap:10px; padding:14px 12px; }
  .member-stat-value { font-size:32px; }
  .member-stat-text { padding-left:0; border-left:0; }
  .member-stat-label { font-size:15px; }
  .member-stat-desc { font-size:13px; }
  .member-stat-go { top:12px; right:10px; }
  .mb-grid { grid-template-columns:1fr; gap:12px; }
  .mb-card { display:block; padding:20px; }
  .me-grid { grid-template-columns:1fr; gap:12px; }
  .me-card { display:block; padding:20px; }
  /* Narrow side padding keeps «ПОДАТЬ ЗАЯВКУ НА GRADUATE» on one line at 360–375px. */
  .me-apply { display:flex; justify-content:center; padding:12px 10px; text-align:center; }
  .mg-ladder { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mg-step { min-height:52px; padding:6px 10px; gap:10px; font-size:14px; }
  .mg-step-icon { width:34px; height:34px; }
  .mg-panel { padding:22px 20px; }
  .mg-panel-mark { right:16px; bottom:10px; font-size:52px; }
  .mp-main .mg-panel-title { font-size:22px; }
  .mg-panel-grid, .mc-result-grid, .mc-choices { grid-template-columns:1fr; }
  .mg-apply { width:100%; justify-content:center; }
  .mc-card { padding:20px; }
  .mc-result-actions { flex-direction:column; }
}