/* Hallmark · macrostructure: original Motion X academy · tone: expressive editorial · anchor hue: brand indigo
 * User-directed restoration: keep original composition, handwriting, curved tracks and tactile controls.
 */

.mx-how-it-works[class] { background:var(--color-paper) !important; color:var(--color-ink); }
.mx-how-it-works [class~="bg-white"] { background:var(--color-surface) !important; }
.mx-how-it-works .mx-card-tilt { border:1px solid var(--color-rule); box-shadow:0 6px 0 var(--color-surface-raised); }
.mx-how-it-works [class*="bg-sky-"] { background:var(--color-process-sky) !important; color:var(--color-paper) !important; }
.mx-how-it-works [class*="bg-lime-"] { background:var(--color-process-lime) !important; color:var(--color-paper) !important; }
.mx-how-it-works [class*="bg-pink-"] { background:var(--color-process-pink) !important; color:var(--color-paper) !important; }
.mx-how-it-works [class*="bg-orange-"] { background:var(--color-process-orange) !important; color:var(--color-paper) !important; }
.mx-how-it-works .mx-benefits-strip > li { color:var(--color-ink) !important; }
.mx-how-it-works .mx-benefits-strip > li > span { background:var(--color-accent) !important; color:var(--color-accent-ink) !important; }
.mx-how-it-works .mx-benefits-strip { grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--color-accent-soft) !important; border:1px solid var(--color-rule); --tw-ring-color:transparent; }
@media(max-width:639px) { .mx-how-it-works .mx-benefits-strip { grid-template-columns:minmax(0,1fr); gap:20px; } }
.mx-free-start[class] { background:linear-gradient(115deg,var(--color-accent-soft),var(--color-surface) 78%) !important; border:1px solid var(--color-rule); }
.mx-free-start > p { color:var(--color-ink-2) !important; }
.mx-free-start > a[class] { background:var(--color-accent) !important; color:var(--color-accent-ink) !important; box-shadow:0 4px 0 var(--color-button-edge); }
.mx-free-start > a:hover { background:var(--color-accent-hover) !important; }
/* Dot textures are transparent decoration, not solid masked dark overlays.
   Applies to the exported About, course, community and resource pages. */
[class*="bg-[radial-gradient("] { background-color:transparent !important; background-image:radial-gradient(circle,var(--color-rule) .7px,transparent 1px) !important; pointer-events:none; }
.mx-client-testimonials-heading {margin:56px 0 -16px;font:500 22px var(--font-display);letter-spacing:-.02em;color:var(--color-ink);}
.mx-flow-lines { opacity:1; }
.mx-flow-lines path { stroke:var(--color-line); }
.mx-flow-lines circle { display:block; fill:var(--color-photo-border); }
.mx-header-gradient .mx-flow-lines path { stroke-opacity:.35; }
.mx-solid-line path { stroke:var(--color-accent-text); }
[data-script] { overflow:visible; }
[data-script] > span { padding-right:.08em; }
.mx-float,.mx-float-slow,.mx-drift,.mx-drift-slow,.mx-breathe { animation:none !important; }
.mx-hero-portraits { width:100%; max-width:none; margin-inline:auto; }
.mx-ribbon { width:max(100%,1100px); max-width:none; }
.mx-portrait { display:block !important; }
.mx-portrait-center { z-index:12; }
.mx-portrait img { --tw-ring-color:var(--color-photo-border); box-shadow:0 18px 44px #0008; }
.mx-portrait-left .mx-float { rotate:-1deg; }
.mx-portrait-right .mx-float { rotate:1deg; }
@media(min-width:1600px) {
 .mx-portrait-left { left:calc(50% - 475px); }
 .mx-portrait-right { right:calc(50% - 475px); }
}
.mx-live-learning[class] { background-color:var(--color-paper) !important; background-image:none !important; border-block:1px solid var(--color-rule-soft); }
.mx-live-learning .mx-flow-lines path { stroke:var(--color-accent-text); stroke-opacity:.5; }
.mx-live-learning img { --tw-ring-color:var(--color-photo-border); }
.mx-live-learning .accent-script { font-size:1.25em; }
.mx-brand-card { pointer-events:auto; border:1px solid var(--color-rule-soft); transition:transform .3s var(--ease-out),border-color .3s,box-shadow .3s !important; }
.mx-brand-card img { filter:grayscale(1) brightness(0) invert(1); opacity:.7; transition:transform .4s var(--ease-out),opacity .3s; }
.mx-brand-card:hover,.mx-brand-card:focus-visible { transform:translateY(-5px); border-color:var(--color-accent-text); box-shadow:0 6px 0 var(--color-button-edge); }
.mx-brand-card:hover img,.mx-brand-card:focus-visible img { transform:scale(1.06); opacity:1; }
.mx-button,a[class*="shadow-[0_4px"],a[class*="shadow-[0_3px"] { border-radius:var(--radius-pill); box-shadow:0 4px 0 var(--color-button-edge),inset 0 1px 0 #ffffff30 !important; transition:transform .22s var(--ease-out),box-shadow .22s var(--ease-out),background-color .22s !important; }
.mx-button { min-height:48px; padding-inline:22px; }
.mx-button:hover,a[class*="shadow-[0_4px"]:hover,a[class*="shadow-[0_3px"]:hover { transform:translateY(-2px); box-shadow:0 6px 0 var(--color-button-edge),inset 0 1px 0 #ffffff40 !important; }
.mx-button:active,a[class*="shadow-[0_4px"]:active,a[class*="shadow-[0_3px"]:active { transform:translateY(3px); box-shadow:0 1px 0 var(--color-button-edge) !important; }
.mx-button-secondary { background:var(--color-surface-raised); border-color:var(--color-rule); }
.mx-preview-section .mx-button { gap:12px; }
.mx-interactive-button { position:relative; overflow:hidden; isolation:isolate; background:var(--color-surface-raised); border-color:var(--color-rule); }
.mx-interactive-rest { display:flex; align-items:center; justify-content:center; gap:12px; }
.mx-interactive-dot { display:block; flex:none; width:8px; height:8px; border-radius:50%; background:var(--color-accent); transition:transform .35s var(--ease-out); }
.mx-interactive-rest > span { position:relative; transition:transform .3s var(--ease-out),opacity .3s; }
.mx-interactive-active { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transform:translateX(24px); transition:transform .3s var(--ease-out),opacity .3s; }
.mx-interactive-button:is(:hover,:focus-visible) .mx-interactive-dot { transform:scale(85); }
.mx-interactive-button:is(:hover,:focus-visible) .mx-interactive-rest > span { transform:translateX(30px); opacity:0; }
.mx-interactive-button:is(:hover,:focus-visible) .mx-interactive-active { transform:translateX(0); opacity:1; }
@media(prefers-reduced-motion:reduce) { .mx-interactive-dot,.mx-interactive-rest > span,.mx-interactive-active { transition:none; } }
.mx-preview-section .mx-button svg { transition:translate .25s var(--ease-out); }
.mx-preview-section .mx-button:hover svg,.mx-preview-section .mx-button:focus-visible svg { translate:3px -3px; }
.mx-preview-section .mx-text-link { display:flex; align-items:center; width:fit-content; margin-top:16px; padding-block:10px; min-height:44px; border-bottom:1px solid var(--color-rule); }
.mx-live-learning .rounded-full { backdrop-filter:blur(8px); }
.group:hover .mx-nudge,.group:focus-visible .mx-nudge { animation:mxArrowNudge .85s ease-in-out infinite; }
@keyframes mxArrowNudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
.mx-footer-gradient[class] { background-color:var(--color-paper) !important; color:var(--color-ink) !important; }
/* Fade only the image layer; the footer copy and animated linework stay crisp. */
.mx-footer-gradient::before {
 background:linear-gradient(var(--color-media-shade),var(--color-media-shade)),url('../images/bg/footer-user.webp') center bottom/cover no-repeat;
 background-color:var(--color-blue-floor);
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,var(--color-paper) 80%);
 mask-image:linear-gradient(to bottom,transparent 0%,var(--color-paper) 80%);
}
.mx-footer-gradient [class~="text-white/75"] { color:var(--color-ink); }
.mx-footer-gradient .mx-flow-lines path { stroke:var(--color-photo-border); stroke-opacity:.4; }
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V4 */
[data-catalog] { scroll-margin-top:90px; }
[data-catalog-search] input { min-width:0; }
.mx-catalog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mx-catalog-filters { display:flex; flex-wrap:wrap; gap:8px; }
.mx-catalog-filters button { border:1px solid var(--color-rule); border-radius:var(--radius-pill); padding:10px 17px; min-height:44px; color:var(--color-ink-2); background:var(--color-surface); font:inherit; font-size:14px; cursor:pointer; transition:background-color var(--dur-short),border-color var(--dur-short),transform var(--dur-short); }
.mx-catalog-filters button:hover { border-color:var(--color-accent-text); background:var(--color-surface-hover); }
.mx-catalog-filters button[aria-pressed="true"] { color:var(--color-accent-ink); background:var(--color-accent); border-color:var(--color-accent); }
.mx-catalog-filters button:focus-visible { outline:2px solid var(--color-focus); outline-offset:4px; }
.mx-catalog-filters button:active { transform:translateY(2px); }
[data-catalog-count] { color:var(--color-ink-2); font-size:14px; }
.mx-catalog-guide { padding:16px 0 24px; color:var(--color-muted); font-size:14px; }
.mx-catalog-guide a { display:inline-block; color:var(--color-accent-text); text-decoration:underline; text-underline-offset:4px; }
.mx-catalog-empty { padding:52px 20px; border-block:1px solid var(--color-rule); text-align:center; }
.mx-catalog-empty h2 { font-size:clamp(24px,4vw,34px); color:var(--color-ink); font-weight:600; }
.mx-catalog-empty p { max-width:430px; margin:12px auto 24px; color:var(--color-ink-2); }
@media(prefers-reduced-motion:reduce) { .mx-catalog-filters button { transition:none; } }
body { margin:0; padding-bottom:0; }
body > .min-h-screen { display:flex; flex-direction:column; }
body > .min-h-screen > main { flex:1; }
.mx-footer-gradient { margin-bottom:0; }
@media(max-width:639px) {
 .mx-header-gradient > .text-center > span:first-child { font-size:11px; padding:7px 10px; gap:7px; }
 .mx-hero-portraits { height:330px; margin-top:24px; }
 .mx-portrait-center { width:43%; max-width:240px; top:49%; }
 .mx-portrait-left,.mx-portrait-right { width:27%; max-width:165px; }
 .mx-portrait-left { left:3.5%; top:62%; }
 .mx-portrait-right { right:3.5%; top:39%; }
 .mx-portrait img { border-radius:16px; --tw-ring-offset-shadow:0 0 transparent; --tw-ring-shadow:0 0 0 3px var(--color-photo-border); box-shadow:var(--tw-ring-shadow),0 12px 24px #0008; }
 .mx-portrait > span { width:32px; height:32px; font-size:13px; border-radius:10px; }
 .mx-portrait-left > span { right:-4px; top:-13px; }
 .mx-portrait-right > span { left:-4px; top:-16px; }
 .mx-portrait-center > span { right:-8px; top:24px; }
 .mx-ribbon { width:850px; }
 .mx-live-learning img { width:calc(100% - 16px); margin-inline:auto; }
}
@media(max-width:374px) { .mx-hero-portraits { height:290px; } }
@media(prefers-reduced-motion:reduce) {
 .group:hover .mx-nudge,.group:focus-visible .mx-nudge { animation:none; }
 .mx-brand-card,.mx-brand-card img,.mx-button { transition:none !important; }
}
.mx-tool-header { padding-block:84px 52px; border-bottom:1px solid var(--color-rule-soft); }
.mx-tool-header h1 { max-width:950px; font-size:clamp(42px,6vw,76px); font-weight:600; line-height:1.05; letter-spacing:-.04em; }
.mx-tool-header h1 > span { font-family:var(--font-outlier); color:var(--color-accent-text); font-size:1.15em; letter-spacing:-.02em; }
.mx-tool-header .mx-shell > p:last-child { max-width:640px; margin-top:26px; font-size:18px; line-height:1.7; color:var(--color-ink-2); }
.mx-tool-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:72px; padding-block:56px; align-items:start; }
.mx-tool-layout fieldset { margin-bottom:36px; }
.mx-tool-layout legend { display:flex; align-items:center; gap:14px; font-size:19px; font-weight:600; margin-bottom:20px; }
.mx-tool-layout legend b { font-size:12px; font-weight:500; color:var(--color-accent-text); }
.mx-choice { display:flex; align-items:center; gap:16px; padding:20px; margin-top:12px; border:1px solid var(--color-rule); border-radius:16px; cursor:pointer; }
.mx-choice:has(:checked) { border-color:var(--color-accent-text); background:var(--color-accent-soft); }
.mx-choice input { flex:none; width:20px; height:20px; }
.mx-choice strong,.mx-choice small { display:block; }
.mx-choice small { font-size:13px; line-height:1.6; color:var(--color-ink-2); margin-top:6px; }
.mx-finder-result { position:sticky; top:100px; border:1px solid var(--color-rule); border-top:3px solid var(--color-accent); border-radius:20px; background:var(--color-surface); padding:32px; }
.mx-finder-result h2 { font-size:34px; line-height:1.12; letter-spacing:-.025em; font-weight:600; }
.mx-result-facts { color:var(--color-accent-text); font-size:13px; margin-block:20px; }
.mx-finder-result p:not(.mx-eyebrow) { line-height:1.7; }
.mx-finder-result .mx-button { margin-block:28px; }
.mx-tool-bottom { padding-block:52px 80px; border-top:1px solid var(--color-rule); }
.mx-tool-bottom h2 { font-size:clamp(28px,4vw,40px); font-weight:600; letter-spacing:-.025em; margin-bottom:20px; }
.mx-tool-bottom > p { max-width:650px; line-height:1.7; color:var(--color-ink-2); margin-bottom:24px; }
.mx-guide-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px; margin-top:36px; }
.mx-guide-columns article > span { font-size:11px; letter-spacing:.12em; color:var(--color-accent-text); }
.mx-guide-columns h3 { margin-block:18px 12px; font-size:20px; font-weight:600; }
.mx-guide-columns p { color:var(--color-ink-2); font-size:14px; line-height:1.8; }
.mx-practice-intro { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-block:32px; }
.mx-practice-intro p { max-width:540px; color:var(--color-ink-2); line-height:1.7; font-size:14px; }
.mx-brief-list { padding-bottom:56px; }
.mx-brief { padding:36px; margin-bottom:24px; border:1px solid var(--color-rule); border-radius:22px; background:var(--color-surface); }
.mx-brief-heading { display:flex; align-items:flex-start; gap:24px; margin-bottom:32px; }
.mx-brief-number { font-size:54px; font-weight:500; line-height:1; color:var(--color-accent-text); letter-spacing:-.06em; }
.mx-brief-heading h2 { font-size:28px; font-weight:600; letter-spacing:-.02em; }
.mx-brief-heading p:last-child { font-size:14px; line-height:1.7; margin-top:12px; color:var(--color-ink-2); }
.mx-brief-body { display:grid; grid-template-columns:1fr 1.1fr; gap:64px; }
.mx-brief dl > div { display:grid; grid-template-columns:70px 1fr; gap:16px; padding:14px 0; border-top:1px solid var(--color-rule-soft); font-size:13px; line-height:1.6; }
.mx-brief dt { color:var(--color-muted); }
.mx-review-prompt { font-size:15px; line-height:1.7; margin-top:28px; padding-left:18px; border-left:2px solid var(--color-accent); }
.mx-review-prompt strong { display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-accent-text); margin-bottom:8px; }
.mx-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:12px; margin-bottom:12px; }
.mx-brief progress { appearance:none; width:100%; height:4px; border:0; border-radius:10px; background:var(--color-rule); margin-bottom:16px; }
.mx-brief progress::-webkit-progress-bar { background:var(--color-rule); border-radius:10px; }
.mx-brief progress::-webkit-progress-value { background:var(--color-accent-text); border-radius:10px; }
.mx-task { display:flex; align-items:flex-start; gap:12px; font-size:13px; line-height:1.6; padding:10px 0; cursor:pointer; }
.mx-task input { width:18px; height:18px; margin-top:2px; flex:none; border-radius:5px; }
.mx-task:has(:checked) span { color:var(--color-muted); text-decoration:line-through; }
.mx-note-label { display:block; font-size:12px; margin-block:20px 10px; }
.mx-brief textarea { display:block; width:100%; padding:12px; border:1px solid var(--color-rule); font-size:14px; resize:vertical; }
.mx-note-actions { display:flex; align-items:center; gap:16px; margin-top:14px; }
.mx-note-actions [role="status"] { color:var(--color-muted); font-size:11px; }
.mx-inline-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.mx-inline-actions .mx-text-link { margin:0; }
.mx-help { max-width:920px; padding-block:48px 64px; }
.mx-search-label { display:block; margin-bottom:14px; font-size:17px; font-weight:600; }
.mx-help input[type="search"] { width:100%; padding:18px 20px; border:1px solid var(--color-rule); border-radius:14px; }
.mx-help-filters { display:flex; flex-wrap:wrap; gap:8px; margin-block:20px; }
.mx-help-filters button { border:1px solid var(--color-rule); background:var(--color-surface); padding:10px 16px; border-radius:999px; font-size:12px; min-height:44px; }
.mx-help-filters button[aria-pressed="true"] { background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-accent); }
.mx-help-answers { margin-top:24px; border-top:1px solid var(--color-rule); }
.mx-help details { border-bottom:1px solid var(--color-rule); }
.mx-help summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; cursor:pointer; padding:24px 0; font-size:17px; font-weight:500; }
.mx-help summary::-webkit-details-marker { display:none; }
.mx-help summary span { color:var(--color-accent-text); font-size:24px; transition:rotate .2s; }
.mx-help details[open] summary span { rotate:45deg; }
.mx-help details > div { padding:0 40px 24px 0; line-height:1.8; color:var(--color-ink-2); font-size:14px; }
.mx-help [data-help-empty] { padding:32px 0; }
.mx-help [data-help-empty] p { margin-block:12px 24px; }
[hidden] { display:none !important; }
@media(max-width:800px) {
 .mx-tool-layout { grid-template-columns:1fr; gap:16px; }
 .mx-finder-result { position:static; }
 .mx-brief-body { gap:32px; }
 .mx-guide-columns { gap:24px; }
}
@media(max-width:639px) {
 .mx-tool-header { padding-block:56px 36px; }
 .mx-tool-header .mx-shell > p:last-child { font-size:16px; }
 .mx-tool-layout { padding-block:36px; }
 .mx-choice { padding:16px; }
 .mx-guide-columns,.mx-brief-body { grid-template-columns:1fr; }
 .mx-practice-intro { align-items:flex-start; flex-direction:column; }
 .mx-brief { padding:24px 18px; }
 .mx-brief-heading { gap:16px; }
 .mx-brief-number { font-size:36px; }
 .mx-brief-heading h2 { font-size:24px; }
 .mx-finder-result { padding:24px; }
 .mx-help summary { font-size:16px; }
}
