/* Design review: the proposed AML Active membership page (src/pages/design-review/membership.astro; owner,
   1 October 2026). Built from the design tokens only (assets-tokens.css): colours, the type scale, spacing, the two
   radii (controls 8, panels 12) and the motion token. Inter in 400 and 600. Hover movement only where a pointer can
   hover; nothing moves under reduced motion. The learner review and the team section bring their own approved styles. */
.mp-page{--mp-ease:cubic-bezier(.23,1,.32,1);background:var(--ds-surface-soft);color:var(--ds-text)}
.mp-page :is(h1,h2,h3,h4,strong,b,summary){font-weight:600}
.mp-page p{margin:0}
.mp-wrap{max-width:calc(var(--ds-content) + 2 * var(--ds-gutter));margin:0 auto;padding:0 var(--ds-gutter)}
.mp-review{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 16px;padding:4px var(--ds-gutter);background:var(--ds-surface-tint);font-size:var(--ds-font-label);color:var(--ds-text-muted)}

/* Links and buttons */
.mp-link{display:inline-flex;align-items:center;gap:10px;font-size:var(--ds-font-action);font-weight:600;line-height:1.4;color:var(--ds-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.mp-link--on-dark{color:var(--ds-on-dark)}
.mp-link--on-dark:hover{color:var(--amlcc-lime)}
.mp-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:var(--ds-button-min);padding:0 26px;border-radius:var(--amlcc-radius-control);font-size:var(--ds-font-action);font-weight:600;line-height:1.2;text-decoration:none;transition:background-color var(--ds-motion) ease,transform 120ms var(--mp-ease)}
.mp-button:active{transform:scale(.98)}
.mp-button--lime{background:var(--amlcc-lime);color:var(--amlcc-forest)}
.mp-button--forest{background:var(--amlcc-forest);color:var(--ds-on-dark)}
@media(hover:hover) and (pointer:fine){
 .mp-button--lime:hover{background:color-mix(in srgb,var(--amlcc-lime),var(--ds-surface) 30%);color:var(--amlcc-forest)}
 .mp-button--forest:hover{background:color-mix(in srgb,var(--amlcc-forest),var(--ds-surface) 10%);color:var(--ds-on-dark)}
}
.mp-page :is(.mp-button,.mp-link,.mp-folio-tabs button,.mp-course-list a):focus-visible{outline:2px solid currentColor;outline-offset:4px}
.mp-slant{flex:none;width:9px;height:12px;fill:var(--amlcc-teal)}

/* Hero: the name, the promise in one line, the price beside the one action and its three reassurances; the folio shows
   three things membership includes */
.mp-hero{background:var(--amlcc-forest);color:var(--ds-on-dark);padding:22px 0 64px}
.mp-hero .page-navigation a{color:var(--ds-on-dark-muted)}
.mp-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,80px);align-items:center;margin-top:30px}
.mp-hero h1{margin:0}
.mp-lockup{display:flex;align-items:center;gap:12px;margin-bottom:26px;font-size:var(--ds-font-title);letter-spacing:-.02em;line-height:1.2;color:var(--ds-on-dark)}
.mp-lockup img{width:44px;height:44px}
.mp-title-line{display:block;max-width:11em;font-size:var(--ds-font-page);line-height:1.06;letter-spacing:var(--ds-tracking-heading);color:var(--ds-on-dark);text-wrap:balance}
.mp-title-line .mp-accent{color:inherit}
.mp-lead{margin-top:22px!important;max-width:29em;font-size:var(--ds-font-lead);line-height:1.55;color:var(--ds-on-dark-muted)}
.mp-offer{display:flex;flex-wrap:wrap;align-items:center;gap:18px 26px;margin-top:34px}
.mp-price{display:flex;align-items:center;gap:12px}
.mp-price strong{font-size:var(--ds-font-figure);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.mp-price span{font-size:var(--ds-font-label);line-height:1.45;color:var(--ds-on-dark-muted)}
.mp-assure{display:grid;gap:8px;max-width:34em;margin:24px 0 0;padding:0;list-style:none;font-size:var(--ds-font-support);line-height:1.5;color:var(--ds-on-dark-muted)}
.mp-assure li{display:flex;align-items:flex-start;gap:10px}
.mp-assure .mp-slant{margin-top:5px;fill:var(--amlcc-lime)}
.mp-assure strong{color:var(--ds-on-dark)}
.mp-hero-copy>.mp-link{margin-top:20px}
.mp-folio-stack{position:relative}
.mp-folio-stack::before{content:"";position:absolute;inset:0;border-radius:var(--amlcc-radius-panel);background:color-mix(in srgb,var(--amlcc-lime) 60%,var(--amlcc-forest));transform:translate(9px,7px) rotate(1.4deg)}
.mp-folio-panel{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 26px;border-radius:var(--amlcc-radius-panel);background:var(--amlcc-paper);color:var(--ds-text)}
/* The three panels share one cell: the folio keeps the tallest panel's height, so the hero does not move from tab to
   tab, and the page arrives in this state (src/content/membership-folio.mjs). Without script the folio's noscript
   style lists every panel, one after another. */
.mp-folio-stack{display:grid}
.mp-folio-panel{grid-area:1/1}
.mp-folio-panel[hidden]{display:flex!important;visibility:hidden}
.mp-folio-top{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:var(--ds-font-label);color:var(--ds-text-muted)}
.mp-folio-top img{width:30px;height:30px}
.mp-folio-panel h2{max-width:12em;font-size:var(--ds-font-headline);line-height:1.15;letter-spacing:-.03em}
.mp-folio-art{width:150px;height:auto;margin:6px 0}
.mp-folio-list{display:grid;gap:9px;margin:6px 0;padding:0;list-style:none;font-size:var(--ds-font-card);font-weight:600}
.mp-folio-list li{display:flex;align-items:center;gap:10px}
.mp-folio-copy{max-width:32em;font-size:var(--ds-font-card);line-height:1.55;color:var(--ds-text-muted)}
.mp-folio-panel .mp-link{margin-top:auto;font-size:var(--ds-font-support)}
.mp-folio-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.mp-folio-tabs button{padding:12px 0 4px;border:0;border-top:2px solid color-mix(in srgb,var(--ds-on-dark) 25%,transparent);background:none;color:var(--ds-on-dark-muted);font:inherit;font-size:var(--ds-font-label);text-align:left;cursor:pointer;transition:color var(--ds-motion) ease,border-color var(--ds-motion) ease}
.mp-folio-tabs button[aria-selected=true]{border-top-color:var(--amlcc-lime);color:var(--amlcc-lime)}
@media(hover:hover) and (pointer:fine){.mp-folio-tabs button[aria-selected=false]:hover{color:var(--ds-on-dark)}}

/* Sections */
.mp-section{padding:var(--ds-section-space) 0}
.mp-section h2,.mp-final h2{font-size:var(--ds-font-section);line-height:var(--ds-leading-heading);letter-spacing:var(--ds-tracking-heading);text-wrap:balance}
.mp-intro{margin-top:16px!important;max-width:36em;font-size:var(--ds-font-lead);line-height:1.55;color:var(--ds-text-muted)}

/* What's included: one grid, strongest first. Sessions with the certificate as proof, then the short course, then the
   record, the toolkit and member prices */
.mp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:40px}
.mp-card{display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--amlcc-radius-panel);background:var(--ds-surface)}
.mp-card h3,.mp-courses h3{font-size:var(--ds-font-title);line-height:1.2;letter-spacing:-.025em;text-wrap:balance}
.mp-card p,.mp-courses-head p{font-size:var(--ds-font-card);line-height:1.6;color:var(--ds-text-muted)}
.mp-card>.mp-link{margin-top:auto;padding-top:6px}
.mp-card--sessions{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
.mp-card--sessions>div{display:flex;flex-direction:column;gap:12px;align-self:center}
.mp-card--sessions>div>.mp-link{padding-top:6px}
.mp-card--sessions h3{max-width:16em}
.mp-certificate{display:flex;flex-direction:column;justify-self:end;width:100%;max-width:440px;margin:0}
.mp-facts{display:grid;gap:9px;margin:4px 0 8px;padding:0;list-style:none;font-size:var(--ds-font-card)}
.mp-facts li{display:flex;align-items:flex-start;gap:10px}
.mp-facts .mp-slant{margin-top:6px}
.mp-certificate img{display:block;width:100%;height:auto;border-radius:var(--amlcc-radius-control);box-shadow:0 18px 32px -22px color-mix(in srgb,var(--amlcc-forest) 55%,transparent)}
.mp-certificate figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;padding-top:16px;font-size:var(--ds-font-label);line-height:1.5;color:var(--ds-text-muted)}
.mp-certificate figcaption .mp-link{font-size:var(--ds-font-support)}
.mp-map{width:100%;height:auto;margin-top:6px}
.mp-card--pricing{background:var(--ds-surface-tint)}
/* main.mp-page: a site-wide phone rule sets dt to 12px through an :is() list whose strongest entry weighs two classes */
.mp-rates{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:12px 16px;align-items:baseline;margin:6px 0 0}
main.mp-page .mp-rates dt{font-size:var(--ds-font-figure);font-weight:600;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--ds-text)}
main.mp-page .mp-rates dd{margin:0;font-size:var(--ds-font-card);line-height:1.45;color:var(--ds-text-muted)}
.mp-courses{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:32px;align-items:start;padding:28px;border-radius:var(--amlcc-radius-panel);background:var(--ds-surface);scroll-margin-top:110px}
.mp-courses-head{display:flex;flex-direction:column;gap:12px}
.mp-course-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.mp-course-list a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px 20px;border-radius:var(--amlcc-radius-control);background:var(--ds-surface-soft);color:var(--ds-text);text-decoration:none;transition:background-color var(--ds-motion) ease}
@media(hover:hover) and (pointer:fine){.mp-course-list a:hover{background:var(--ds-surface-tint)}}
.mp-course-topic{font-size:var(--ds-font-label);color:var(--ds-text-muted)}
.mp-course-list h4{display:flex;align-items:center;gap:10px;margin:0;font-size:var(--ds-font-body);line-height:1.3;letter-spacing:-.01em;color:var(--ds-text)}
.mp-course-meta{font-size:var(--ds-font-label);color:var(--ds-text-muted)}

/* The five-step cycle, as on the current page */
.mp-cycle{background:var(--ds-surface)}
.mp-cycle-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.mp-cycle-head p{max-width:30em;font-size:var(--ds-font-body);line-height:1.6;color:var(--ds-text-muted)}
.mp-cycle-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;margin:0;padding:0;list-style:none}
.mp-cycle-mark{display:flex;align-items:center;gap:9px;margin-bottom:16px!important;font-size:var(--ds-font-label);font-weight:600;color:var(--ds-action)}
.mp-cycle-list h3{margin:0 0 10px;font-size:var(--ds-font-subtitle);line-height:1.25;letter-spacing:-.02em}
.mp-cycle-list p:not(.mp-cycle-mark){font-size:var(--ds-font-support);line-height:1.6;color:var(--ds-text-muted)}

/* The price again, to close */
.mp-final{padding:56px 0;background:var(--amlcc-lime)}
.mp-final-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.mp-final-grid>div:first-child>p{max-width:30em;margin-top:14px;font-size:var(--ds-font-lead);line-height:1.55;color:var(--ds-text)}
.mp-final-offer{display:grid;justify-items:start;gap:14px}
.mp-final .mp-price span{color:var(--ds-text)}
.mp-price--large strong{font-size:var(--ds-font-stat)}
.mp-terms{max-width:28em;font-size:var(--ds-font-label);line-height:1.5;color:var(--ds-text)}

@media(max-width:1100px){
 /* Two columns: the record and member prices side by side, then the toolkit across with its map beside the text */
 .mp-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}
 .mp-card--toolkit{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr auto;gap:12px 32px;align-items:start}
 .mp-card--toolkit>*{grid-column:1}
 .mp-card--toolkit .mp-map{grid-column:2;grid-row:1/-1;align-self:center;margin:0}
 .mp-cycle-list{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:32px}
}
@media(max-width:900px){
 .mp-hero-grid,.mp-final-grid,.mp-grid,.mp-card--sessions,.mp-courses,.mp-cycle-head{grid-template-columns:minmax(0,1fr)}
 .mp-certificate{justify-self:start}
 .mp-card--toolkit{display:flex}
 .mp-cycle-head{gap:16px}
 .mp-hero{padding-bottom:48px}
}
@media(max-width:560px){
 .mp-course-list,.mp-cycle-list{grid-template-columns:minmax(0,1fr)}
 .mp-cycle-list{row-gap:24px}
 .mp-card,.mp-courses{padding:24px 22px}
 .mp-offer{gap:16px 20px}
 .mp-final-grid{gap:32px}
}
@media(prefers-reduced-motion:reduce){.mp-page *{transition:none!important}.mp-button:active{transform:none}}