/*
 * MarkitUP inner pages: Book a Free Trial + Why MarkitUP
 * Loaded only on these two templates (see inc/markitup-pages.php).
 * Everything is scoped under .mup-pg so it never touches the header,
 * footer or homepage.
 *
 * Brand: Poppins | red #E21A2D | yellow #FFC629 | charcoal #1D2430 | white
 * Green #0C8A4E is used ONLY for booking buttons.
 */

.mup-pg {
	--red: #e21a2d;
	--red-dk: #b8121f;
	--red-lt: #fdecee;
	--yellow: #ffc629;
	--yellow-lt: #fff6db;
	--yellow-dk: #8a5d00;
	--green: #0c8a4e;
	--green-dk: #096b3c;
	--ink: #1d2430;
	--ink-2: #2c3544;
	--muted: #5b6676;
	--line: #e3e7ee;
	--chalk: #f4f6f9;
	--white: #fff;
	--r-sm: 10px;
	--r-md: 16px;
	--r-lg: 24px;
	--shadow-sm: 0 2px 12px rgba(29, 36, 48, .07);
	--shadow-md: 0 8px 30px rgba(29, 36, 48, .12);
	--shadow-lg: 0 18px 50px rgba(29, 36, 48, .2);
	--ease: cubic-bezier(.4, 0, .2, 1);
	--sp: clamp(3.5rem, 7vw, 6rem);
	--head-h: var(--mup-head-h, 76px);

	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.65;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

.mup-pg *, .mup-pg *::before, .mup-pg *::after { box-sizing: border-box; }
:where(.mup-pg) :is(h1, h2, h3, h4) { font-family: inherit; color: inherit; line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -.01em; }
:where(.mup-pg) p { margin: 0 0 1em; }
:where(.mup-pg) p:last-child { margin-bottom: 0; }
:where(.mup-pg) a { color: var(--red); }
:where(.mup-pg) img { max-width: 100%; height: auto; display: block; }
:where(.mup-pg) :is(ul, ol) { margin: 0; padding: 0; list-style: none; }
.mup-pg button { font-family: inherit; cursor: pointer; }
.mup-pg [hidden] { display: none !important; }
.mup-pg section[id] { scroll-margin-top: calc(var(--head-h) + 64px); }
.mup-pg #book { scroll-margin-top: calc(var(--head-h) + 16px); }

/* Guard against default Underscores link/button colours */
.mup-pg a:where(:link, :visited, :hover, :focus, :active) { color: var(--red); }
.mup-pg button.mup-btn:where(:hover, :focus, :active) { border-color: transparent; }
.mup-pg button.mup-btn--outline-dark { border-color: var(--line); }
.mup-pg button.mup-btn--outline-dark:where(:hover, :focus, :active) { border-color: var(--ink); }

.mup-ic { width: 1.15em; height: 1.15em; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
	.mup-pg * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	html { scroll-behavior: auto !important; }
}

/* Layout
   ========================================================================== */

.mup-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem); position: relative; z-index: 1; }
.mup-section { padding: var(--sp) 0; position: relative; background: var(--white); }
.mup-section--chalk { background: var(--chalk); }
.mup-section--dark { background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; }
.mup-section--red { background: var(--red); color: #fff; padding: clamp(2.75rem, 5vw, 4rem) 0; }
.mup-center { text-align: center; }
.mup-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mup-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }

.mup-head { text-align: center; max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.mup-head h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin: .7rem 0 .9rem; }
.mup-head p { color: var(--muted); font-size: 1.05rem; }
.mup-head--light p { color: rgba(255, 255, 255, .72); }
.mup-head--light strong { color: #fff; }
.mup-h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: .8rem; }
.mup-lead { font-size: 1.15rem; }
.mup-more { margin-top: 2rem; font-weight: 600; }
.mup-more a { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; }
.mup-more a:hover { text-decoration: underline; }

/* Waves (sit on the edge between two sections) */
.mup-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(36px, 6vw, 80px); line-height: 0; pointer-events: none; z-index: 0; }
.mup-wave svg { width: 100%; height: 100%; display: block; }
.mup-wave--flip { top: 0; bottom: auto; transform: translateY(calc(-100% + 1px)); }
.mup-wave--white path { fill: #fff; }
.mup-wave--chalk path { fill: var(--chalk); }
.mup-wave--dark path { fill: var(--ink); }
.mup-wave--red path { fill: var(--red); }

/* Eyebrow + pills + tags */
.mup-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .95rem; border-radius: 50px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--red-lt); color: var(--red-dk); }
.mup-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.mup-eyebrow--light { background: rgba(255, 255, 255, .12); color: #fff; }
.mup-eyebrow--light::before { background: var(--yellow); }
.mup-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .85rem; border-radius: 50px; font-size: .78rem; font-weight: 700; }
.mup-pill--green { background: rgba(12, 138, 78, .1); color: var(--green-dk); }
.mup-tag { display: inline-block; padding: .15rem .6rem; border-radius: 50px; background: var(--yellow-lt); color: var(--yellow-dk); font-size: .72rem; font-weight: 700; letter-spacing: .02em; vertical-align: middle; }

/* Buttons
   ========================================================================== */

.mup-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.7rem; border-radius: 50px; border: 2px solid transparent; font: 700 .95rem/1.2 'Poppins', sans-serif; text-decoration: none !important; text-align: center; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s; }
.mup-btn:hover { transform: translateY(-2px); }
.mup-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.mup-btn--lg { padding: 1rem 2rem; font-size: 1rem; }
.mup-btn--block { width: 100%; }
.mup-btn--green { background: var(--green); color: #fff !important; box-shadow: 0 6px 20px rgba(12, 138, 78, .3); }
.mup-btn--green:hover { background: var(--green-dk); box-shadow: 0 10px 28px rgba(12, 138, 78, .4); }
.mup-btn--glow { box-shadow: 0 0 0 6px rgba(255, 255, 255, .15), 0 10px 30px rgba(0, 0, 0, .2); }
.mup-btn--red { background: var(--red); color: #fff !important; }
.mup-btn--red:hover { background: var(--red-dk); }
.mup-btn--dark { background: var(--ink); color: #fff !important; }
.mup-btn--dark:hover { background: var(--ink-2); box-shadow: var(--shadow-md); }
.mup-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .45); }
.mup-btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.mup-btn--outline { background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, .35); }
.mup-btn--outline:hover { border-color: #fff; }
.mup-btn--outline-dark { background: #fff; color: var(--ink) !important; border-color: var(--line); }
.mup-btn--outline-dark:hover { border-color: var(--ink); }

/* Hero
   ========================================================================== */

.mup-hero { position: relative; background: linear-gradient(150deg, var(--ink) 0%, var(--ink-2) 100%); color: #fff; padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(5rem, 9vw, 8rem); overflow: hidden; }
.mup-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent); }
.mup-hero::after { content: ''; position: absolute; width: 640px; height: 640px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 26, 45, .22) 0%, transparent 70%); top: -220px; right: -180px; pointer-events: none; }
.mup-hero h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); line-height: 1.1; margin: 1rem 0 1.1rem; color: #fff; }
.mup-hero__lead { font-size: clamp(1rem, 1.6vw, 1.12rem); color: rgba(255, 255, 255, .78); max-width: 560px; }

.mup-hero__grid { display: grid; grid-template-columns: 1fr minmax(0, 520px); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.mup-hero__copy { padding-top: clamp(0rem, 3vw, 2.5rem); position: sticky; top: calc(var(--head-h) + 1.5rem); }
.mup-ticks { margin: 1.75rem 0 2rem; display: grid; gap: .7rem; }
.mup-ticks li { display: flex; align-items: flex-start; gap: .7rem; color: rgba(255, 255, 255, .88); }
.mup-ticks .mup-ic { width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--yellow); color: var(--ink); stroke-width: 3; margin-top: 1px; }
.mup-ticks strong { color: #fff; }
.mup-hero__facts { display: flex; gap: 1rem; flex-wrap: wrap; }
.mup-hero__facts div { padding: .8rem 1.1rem; border-radius: var(--r-md); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); min-width: 128px; }
.mup-hero__facts strong { display: block; font-size: 1.4rem; color: var(--yellow); line-height: 1.1; }
.mup-hero__facts span { font-size: .8rem; color: rgba(255, 255, 255, .7); }

.mup-hero__center { text-align: center; max-width: 900px; }
.mup-hero--why h1 span { color: var(--yellow); display: block; }
.mup-hero--why .mup-hero__lead { margin: 0 auto 2rem; }
.mup-hero__ctas { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }

.mup-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: clamp(2.5rem, 5vw, 3.5rem); background: rgba(255, 255, 255, .12); border-radius: var(--r-lg); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.mup-stats li { background: rgba(29, 36, 48, .55); padding: 1.3rem 1rem; text-align: center; }
.mup-stats strong { display: block; font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.1; color: #fff; }
.mup-stats li:nth-child(odd) strong { color: var(--yellow); }
.mup-stats span { font-size: .8rem; color: rgba(255, 255, 255, .7); }

/* Forms
   ========================================================================== */

.mup-form-card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-lg); border-top: 5px solid var(--red); position: relative; }
.mup-form-card__head h2 { font-size: 1.55rem; margin: .7rem 0 .25rem; }
.mup-form-card__head p { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }
.mup-form { display: grid; gap: 1.1rem; }
.mup-form__group { border: 0; margin: 0; padding: 0; display: grid; gap: .8rem; min-width: 0; }
.mup-form__group legend { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); margin-bottom: .55rem; padding: 0; display: flex; align-items: center; gap: .6rem; width: 100%; }
.mup-form__group legend::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.mup-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.mup-field { display: grid; gap: .3rem; margin: 0; min-width: 0; }
.mup-field > span { font-size: .82rem; font-weight: 600; color: var(--ink); }
.mup-field em { font-style: normal; font-weight: 400; color: var(--muted); }
.mup-field input, .mup-field select, .mup-field textarea { width: 100%; font: 400 .95rem/1.4 'Poppins', sans-serif; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: .72rem .85rem; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; margin: 0; }
.mup-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6676' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px; padding-right: 2.4rem; }
.mup-field textarea { resize: vertical; min-height: 84px; }
.mup-field input:focus, .mup-field select:focus, .mup-field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(255, 198, 41, .45); }
.mup-pg [aria-invalid="true"] { border-color: var(--red) !important; background-color: #fff8f8 !important; }
.mup-form-error { background: var(--red-lt); color: var(--red-dk); border-radius: var(--r-sm); padding: .65rem .9rem; font-size: .88rem; font-weight: 600; margin-bottom: 1rem; }
.mup-form-error--inline { margin: -.2rem 0 0; }
.mup-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.mup-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.mup-chip { position: relative; margin: 0; }
.mup-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.mup-chip span { display: inline-block; padding: .45rem .9rem; border-radius: 50px; border: 1.5px solid var(--line); font-size: .82rem; font-weight: 500; transition: all .15s; user-select: none; }
.mup-chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.mup-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 198, 41, .6); }
.mup-chips--days .mup-chip span { min-width: 52px; text-align: center; }

.mup-centre-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.mup-centre-opt { position: relative; margin: 0; }
.mup-centre-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mup-centre-opt > span { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; padding: .8rem .4rem; border: 1.5px solid var(--line); border-radius: var(--r-md); transition: all .15s; height: 100%; }
.mup-centre-opt .mup-ic { color: var(--red); width: 20px; height: 20px; }
.mup-centre-opt strong { font-size: .9rem; }
.mup-centre-opt small { font-size: .68rem; color: var(--muted); line-height: 1.3; }
.mup-centre-opt input:checked + span { border-color: var(--red); background: var(--red-lt); box-shadow: inset 0 0 0 1px var(--red); }
.mup-centre-opt input:focus-visible + span { box-shadow: 0 0 0 3px rgba(255, 198, 41, .6); }

.mup-hsc-note { display: flex; gap: .6rem; align-items: flex-start; background: var(--yellow-lt); border: 1px solid rgba(255, 198, 41, .6); border-radius: var(--r-sm); padding: .7rem .85rem; font-size: .86rem; margin: 0; }
.mup-hsc-note .mup-ic { color: var(--yellow-dk); margin-top: 2px; }
.mup-form__fine { display: flex; gap: .5rem; align-items: flex-start; font-size: .78rem; color: var(--muted); margin: 0; }
.mup-form__fine .mup-ic { color: var(--green); margin-top: 2px; }

.mup-form-done { text-align: center; padding: 1.5rem .5rem; }
.mup-form-done__icon { width: 68px; height: 68px; border-radius: 50%; background: var(--green); color: #fff; display: inline-grid; place-items: center; margin-bottom: 1rem; box-shadow: 0 0 0 10px rgba(12, 138, 78, .12); }
.mup-form-done__icon .mup-ic { width: 34px; height: 34px; stroke-width: 3; }
.mup-form-done h2, .mup-form-done h3 { font-size: 1.5rem; margin-bottom: .7rem; }
.mup-form-done p { color: var(--muted); margin-bottom: 1.4rem; }

/* Trial: steps
   ========================================================================== */

.mup-steps { position: relative; max-width: 880px; margin: 0 auto 2.5rem; display: grid; gap: 1.1rem; counter-reset: s; }
.mup-steps::before { content: ''; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 3px; background: repeating-linear-gradient(to bottom, var(--red) 0 8px, transparent 8px 16px); opacity: .35; }
.mup-step { display: grid; grid-template-columns: 58px 1fr; gap: 1.1rem; align-items: start; position: relative; }
.mup-step__num { width: 58px; height: 58px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: 1.35rem; font-weight: 800; box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(226, 26, 45, .3); position: relative; z-index: 1; }
.mup-step:last-child .mup-step__num { background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 6px #fff, 0 8px 20px rgba(255, 198, 41, .45); }
.mup-step__card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.3rem 1.5rem 1.3rem 4.6rem; position: relative; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.mup-step__card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.mup-step__icon { position: absolute; left: 1.3rem; top: 1.3rem; width: 44px; height: 44px; border-radius: 12px; background: var(--red-lt); color: var(--red); display: grid; place-items: center; }
.mup-step__icon .mup-ic { width: 22px; height: 22px; }
.mup-step__card h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.mup-step__card p { color: var(--muted); margin-bottom: .5rem; }
.mup-step__card strong { color: var(--ink); }
.mup-step__extra { background: var(--chalk); border-radius: var(--r-sm); padding: .6rem .85rem; font-size: .92rem; }

/* Bands + tiles
   ========================================================================== */

.mup-band { padding: clamp(1.8rem, 4vw, 2.6rem) 0; }
.mup-band--yellow { background: var(--yellow); color: var(--ink); }
.mup-band__inner { display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center; }
.mup-band__icon { width: 64px; height: 64px; border-radius: 18px; background: var(--ink); color: var(--yellow); display: grid; place-items: center; }
.mup-band__icon .mup-ic { width: 32px; height: 32px; }
.mup-band h2 { font-size: clamp(1.2rem, 2.4vw, 1.55rem); margin-bottom: .3rem; }
.mup-band p { margin: 0; color: rgba(29, 36, 48, .82); }

.mup-tile { background: #fff; border-radius: var(--r-lg); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); border: 1px solid var(--line); transition: transform .2s var(--ease), box-shadow .2s; }
.mup-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mup-tile__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--red); color: #fff; display: grid; place-items: center; margin-bottom: 1rem; }
.mup-tile__icon .mup-ic { width: 26px; height: 26px; }
.mup-tile h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.mup-tile p { color: var(--muted); font-size: .92rem; }

.mup-centre-mini { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: var(--shadow-sm); }
.mup-centre-mini__top { display: flex; gap: .85rem; align-items: center; }
.mup-centre-mini__pin { width: 48px; height: 48px; border-radius: 50%; background: var(--red-lt); color: var(--red); display: grid; place-items: center; flex-shrink: 0; }
.mup-centre-mini h3 { font-size: 1.1rem; margin-bottom: .2rem; }
.mup-centre-mini__addr { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.mup-days { display: flex; gap: .3rem; }
.mup-days li { flex: 1; text-align: center; font-size: .72rem; font-weight: 700; padding: .4rem 0; border-radius: 8px; }
.mup-days .is-open { background: rgba(12, 138, 78, .1); color: var(--green-dk); }
.mup-days .is-closed { background: var(--chalk); color: #aab2bf; text-decoration: line-through; }

/* Ask Miu
   ========================================================================== */

.mup-miu { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: center; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); color: #fff; }
.mup-miu__avatar { position: relative; width: max-content; }
.mup-miu__face { width: 84px; height: 84px; border-radius: 50%; background: var(--red); display: grid; place-items: center; box-shadow: 0 0 0 8px rgba(226, 26, 45, .2); animation: mupPulse 2.6s infinite; }
.mup-miu__face .mup-ic { width: 38px; height: 38px; color: #fff; }
.mup-miu__live { position: absolute; bottom: -4px; right: -6px; background: var(--green); color: #fff; font-size: .7rem; font-weight: 800; border-radius: 50px; padding: .15rem .5rem; border: 2px solid var(--ink); }
.mup-miu h2 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: .5rem; color: #fff; }
.mup-miu p { color: rgba(255, 255, 255, .75); }
.mup-miu__asks { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; }
.mup-miu__asks li { font-size: .78rem; padding: .35rem .8rem; border-radius: 50px; background: rgba(255, 255, 255, .09); color: rgba(255, 255, 255, .88); }
.mup-miu__asks li::before { content: '\201C'; color: var(--yellow); font-weight: 800; margin-right: 2px; }
.mup-miu__ctas { display: grid; gap: .6rem; }
@keyframes mupPulse { 0%, 100% { box-shadow: 0 0 0 8px rgba(226, 26, 45, .2); } 50% { box-shadow: 0 0 0 14px rgba(226, 26, 45, .08); } }

/* Why: section nav
   ========================================================================== */

.mup-subnav { position: sticky; top: var(--head-h); z-index: 40; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); box-shadow: 0 4px 14px rgba(29, 36, 48, .05); backdrop-filter: blur(8px); }
.mup-subnav ul { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding: .6rem 0; justify-content: center; }
.mup-subnav ul::-webkit-scrollbar { display: none; }
.mup-subnav a { display: block; white-space: nowrap; padding: .5rem 1rem; border-radius: 50px; font-size: .86rem; font-weight: 600; color: var(--muted); text-decoration: none; transition: all .2s; }
.mup-subnav a:hover { color: var(--ink); background: var(--chalk); }
.mup-subnav a.is-active { background: var(--ink); color: #fff; }

/* Tabs (shared)
   ========================================================================== */

.mup-tabs__list { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.75rem; }
.mup-tabs__list [role="tab"] { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.3rem; border-radius: 50px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-size: .92rem; font-weight: 600; transition: all .2s; }
.mup-tabs__list [role="tab"] .mup-ic { color: var(--red); }
.mup-tabs__list [role="tab"]:hover { border-color: var(--ink); }
.mup-tabs__list [role="tab"][aria-selected="true"] { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 18px rgba(226, 26, 45, .28); }
.mup-tabs__list [role="tab"][aria-selected="true"] .mup-ic { color: #fff; }
.mup-pg [role="tab"]:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.mup-pg [role="tabpanel"]:not([hidden]) { animation: mupFade .35s var(--ease); }
@keyframes mupFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Why: difference
   ========================================================================== */

.mup-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.mup-feature { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.2rem 1.25rem; box-shadow: var(--shadow-sm); }
.mup-feature__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--red-lt); color: var(--red); display: grid; place-items: center; }
.mup-feature__icon .mup-ic { width: 22px; height: 22px; }
.mup-feature h3 { font-size: 1rem; margin-bottom: .25rem; }
.mup-feature p { font-size: .9rem; color: var(--muted); margin: 0; }
.mup-feature strong { color: var(--ink); }
.mup-feature__tick { width: 26px; height: 26px; border-radius: 50%; background: rgba(12, 138, 78, .12); color: var(--green); display: grid; place-items: center; }
.mup-feature__tick .mup-ic { width: 15px; height: 15px; stroke-width: 3; }

.mup-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.mup-split--gap { margin-top: clamp(3rem, 6vw, 5rem); }
.mup-split__text h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); margin: .8rem 0 1.1rem; }
.mup-split__text p { color: var(--muted); }
.mup-split__text strong { color: var(--ink); }
.mup-split--plan { margin-top: clamp(3rem, 6vw, 4.5rem); grid-template-columns: 1.25fr .75fr; }

.mup-plan-card { background: linear-gradient(150deg, var(--ink), var(--ink-2)); color: #fff; border-radius: var(--r-lg); padding: 2rem; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); }
.mup-plan-card::after { content: ''; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 198, 41, .25), transparent 70%); right: -70px; top: -70px; }
.mup-plan-card__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--yellow); color: var(--ink); display: grid; place-items: center; margin-bottom: 1.1rem; }
.mup-plan-card__icon .mup-ic { width: 26px; height: 26px; }
.mup-plan-card__big { font-size: 1.45rem; font-weight: 700; line-height: 1.3; }
.mup-plan-card__big span { color: var(--yellow); }
.mup-plan-card__small { color: rgba(255, 255, 255, .7); margin-bottom: 1.4rem !important; }

/* Media (Nhi photo/video) */
.mup-media { margin: 0; }
.mup-media__frame { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink); box-shadow: var(--shadow-lg); }
.mup-media__frame img, .mup-media__frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.mup-media__play { position: absolute; inset: 0; border: 0; background: linear-gradient(to top, rgba(29, 36, 48, .55), rgba(29, 36, 48, .05)); display: grid; place-items: center; }
.mup-media__play span { width: 76px; height: 76px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, .2); transition: transform .2s; }
.mup-media__play:hover span { transform: scale(1.08); }
.mup-media__play .mup-ic { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.mup-media figcaption { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.mup-media figcaption strong { color: var(--ink); }
.mup-media--quote { background: linear-gradient(150deg, var(--red), var(--red-dk)); color: #fff; border-radius: var(--r-lg); padding: clamp(2rem, 4vw, 3rem); position: relative; overflow: hidden; box-shadow: var(--shadow-lg); min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
.mup-media--quote::after { content: ''; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 30px solid rgba(255, 255, 255, .08); }
.mup-media--dark { background: linear-gradient(150deg, var(--ink), var(--ink-2)); }
.mup-media--yellow { background: var(--yellow); color: var(--ink); }
.mup-media--yellow .mup-media--quote > * { position: relative; z-index: 1; }
.mup-media__mark { color: var(--red); }
.mup-media--yellow figcaption { color: rgba(29, 36, 48, .7) !important; }
.mup-media--yellow::after { border-color: rgba(255, 255, 255, .35); }
.mup-media__mark { font-size: 6rem; line-height: .6; color: var(--yellow); font-weight: 800; display: block; height: 2.6rem; }
.mup-media--quote blockquote { margin: 0; font-size: clamp(1.35rem, 2.6vw, 1.85rem); font-weight: 700; line-height: 1.3; }
.mup-media--quote figcaption { color: rgba(255, 255, 255, .8); margin-top: 1.2rem; font-size: .9rem; display: block; }

.mup-belief { border-left: 4px solid var(--yellow); padding: .3rem 0 .3rem 1.1rem; color: var(--ink) !important; font-weight: 500; }

/* 5-week cycle */
.mup-cycle { margin-top: clamp(3rem, 6vw, 5rem); background: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--shadow-sm); border: 1px solid var(--line); }
.mup-cycle__intro { text-align: center; max-width: 640px; margin: 0 auto 1.8rem; }
.mup-cycle__intro p { color: var(--muted); }
.mup-term { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mup-term__label { display: block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; }
.mup-term__weeks { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.mup-week { background: var(--red); color: #fff; border-radius: 10px; padding: .8rem .2rem; text-align: center; font-weight: 800; font-size: 1.2rem; line-height: 1; }
.mup-week small { display: block; font-size: .62rem; font-weight: 600; opacity: .8; margin-bottom: .2rem; text-transform: uppercase; }
.mup-week--test { background: var(--yellow); color: var(--ink); }
.mup-cycle__legend { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0 2.5rem; font-size: .88rem; color: var(--muted); }
.mup-cycle__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.mup-dot { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mup-dot--red { background: var(--red); }
.mup-dot--yellow { background: var(--yellow); }

/* Teaching process */
.mup-process { margin-top: clamp(3rem, 6vw, 5rem); }
.mup-process__flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin: 1.5rem 0 1.25rem; position: relative; }
.mup-process__flow [role="tab"] { border: 0; background: #fff; border-radius: var(--r-md); padding: 1rem .5rem; display: flex; flex-direction: column; align-items: center; gap: .45rem; box-shadow: var(--shadow-sm); position: relative; transition: all .2s; color: var(--ink); }
.mup-process__flow [role="tab"]:not(:last-child)::after { content: ''; position: absolute; right: -.45rem; top: 50%; width: .5rem; height: 2px; background: var(--red); opacity: .4; }
.mup-process__n { width: 38px; height: 38px; border-radius: 50%; background: var(--red-lt); color: var(--red); display: grid; place-items: center; font-weight: 800; transition: all .2s; }
.mup-process__w { font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.mup-process__flow [aria-selected="true"] { background: var(--ink); color: #fff; transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mup-process__flow [aria-selected="true"] .mup-process__n { background: var(--yellow); color: var(--ink); }
.mup-process__panel { background: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow-sm); border-left: 5px solid var(--red); max-width: 900px; margin: 0 auto; }
.mup-process__step { font-size: .75rem; font-weight: 700; color: var(--red); text-transform: uppercase; letter-spacing: .08em; }
.mup-process__panel h4 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: .35rem 0 .8rem; }
.mup-process__panel p { color: var(--muted); }
.mup-process__lead { font-size: 1.08rem; color: var(--ink) !important; }
.mup-process__key { background: var(--yellow-lt); border-radius: var(--r-sm); padding: .8rem 1rem; color: var(--ink) !important; }
.mup-process__tagline { text-align: center; max-width: 720px; margin: 1.75rem auto 0; color: var(--muted); font-style: italic; }

.mup-cta-card { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; background: linear-gradient(150deg, var(--ink), var(--ink-2)); color: #fff; border-radius: var(--r-lg); padding: clamp(1.75rem, 4vw, 2.75rem); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.mup-cta-card::before { content: ''; position: absolute; left: -80px; bottom: -120px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 26, 45, .35), transparent 70%); }
.mup-cta-card > * { position: relative; }
.mup-cta-card h3 { font-size: clamp(1.3rem, 2.6vw, 1.75rem); margin-bottom: .6rem; }
.mup-cta-card h3 span { color: var(--yellow); }
.mup-cta-card p { color: rgba(255, 255, 255, .78); }
.mup-cta-card strong { color: #fff; }
.mup-cta-card__sig { font-style: italic; color: rgba(255, 255, 255, .55) !important; font-size: .9rem; }

/* Tutors */
.mup-tutors { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mup-tutor { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem 1.1rem 1.4rem; text-align: center; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), box-shadow .2s; }
.mup-tutor:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.mup-tutor__img { width: 128px; height: 128px; margin: 0 auto 1rem; border-radius: 50%; overflow: hidden; background: linear-gradient(150deg, var(--yellow), #ffd966); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--red-lt), var(--shadow-sm); }
.mup-tutor__img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.mup-tutor h3 { font-size: 1.02rem; margin-bottom: .45rem; }
.mup-tutor__badge { display: inline-block; font-size: .74rem; font-weight: 700; color: var(--red-dk); background: var(--red-lt); padding: .25rem .65rem; border-radius: 50px; margin-bottom: .55rem !important; line-height: 1.4; }
.mup-tutor__study { font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.5; }
.mup-tutor__study .mup-ic { color: var(--ink); vertical-align: -3px; margin-right: 2px; }
.mup-tutors:not(.is-expanded) .mup-tutor--more { display: none; }
.mup-tutors + .mup-center { margin-top: 1.75rem; }

.mup-join { margin-top: 2.5rem; display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.5rem; border-radius: var(--r-lg); background: var(--yellow-lt); border: 1.5px dashed var(--yellow); text-decoration: none !important; color: var(--ink) !important; transition: background .2s; }
.mup-join:hover { background: #ffefbf; }
.mup-join__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--yellow); display: grid; place-items: center; flex-shrink: 0; }
.mup-join__text { flex: 1; color: var(--muted); }
.mup-join__text strong { display: block; color: var(--ink); font-size: 1.05rem; }
.mup-join__go { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; flex-shrink: 0; }

/* Journey */
.mup-journey__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; position: relative; margin-bottom: 1.75rem; }
.mup-journey__track::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 34px; height: 3px; background: linear-gradient(90deg, var(--yellow), var(--red)); border-radius: 3px; opacity: .6; }
.mup-journey__track [role="tab"] { background: none; border: 0; color: rgba(255, 255, 255, .7); display: flex; flex-direction: column; align-items: center; gap: .7rem; padding: 0 .25rem .5rem; position: relative; transition: color .2s; }
.mup-journey__dot { width: 70px; height: 70px; border-radius: 50%; background: var(--ink-2); border: 3px solid rgba(255, 255, 255, .18); display: grid; place-items: center; transition: all .25s var(--ease); }
.mup-journey__dot .mup-ic { width: 28px; height: 28px; color: var(--yellow); }
.mup-journey__name { font-size: .9rem; font-weight: 600; text-align: center; line-height: 1.3; }
.mup-journey__track [aria-selected="true"] { color: #fff; }
.mup-journey__track [aria-selected="true"] .mup-journey__dot { background: var(--red); border-color: var(--red); transform: scale(1.1); box-shadow: 0 0 0 8px rgba(226, 26, 45, .25); }
.mup-journey__track [aria-selected="true"] .mup-journey__dot .mup-ic { color: #fff; }
.mup-journey__card { background: #fff; color: var(--ink); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 2.75rem); display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--shadow-lg); max-width: 960px; margin: 0 auto; }
.mup-journey__big { width: 88px; height: 88px; border-radius: 24px; background: var(--red-lt); color: var(--red); display: grid; place-items: center; }
.mup-journey__big .mup-ic { width: 42px; height: 42px; }
.mup-journey__stage { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.mup-journey__card h3 { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: .3rem 0 .9rem; }
.mup-journey__card p { color: var(--muted); }
.mup-journey__card strong { color: var(--ink); }
.mup-journey__goal { font-weight: 600; color: var(--ink) !important; border-left: 4px solid var(--yellow); padding-left: .9rem; margin: 1.2rem 0 1.4rem !important; }

.mup-path { text-align: center; margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 820px; }
.mup-path h3 { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1.6rem; }
.mup-path__steps { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.mup-path__steps li { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 50px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .15); font-weight: 600; font-size: .92rem; }
.mup-path__steps li span { color: var(--yellow); display: inline-flex; }
.mup-path__steps li:not(:last-child)::after { content: '\2192'; margin-left: .7rem; color: var(--red); font-weight: 800; }
.mup-path__steps li:last-child { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.mup-path__steps li:last-child span { color: var(--ink); }
.mup-path p { color: rgba(255, 255, 255, .75); margin-bottom: 1.75rem; }
.mup-path strong { color: #fff; }
.mup-section--dark { padding-bottom: calc(var(--sp) + 3rem); }

/* Story */
.mup-growth { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; counter-reset: g; }
.mup-growth li { counter-increment: g; display: inline-flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; padding: .45rem .9rem .45rem .45rem; border-radius: 50px; background: var(--chalk); }
.mup-growth li::before { content: counter(g); width: 24px; height: 24px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; font-size: .75rem; }
.mup-growth li:last-child { background: var(--yellow); }
.mup-growth li:last-child::before { background: var(--ink); }

.mup-quote { margin: clamp(3rem, 6vw, 4.5rem) auto 0; max-width: 920px; text-align: center; position: relative; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3rem); background: var(--yellow-lt); border-radius: var(--r-lg); }
.mup-quote::before { content: '\201C'; position: absolute; top: -32px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; font-size: 3rem; line-height: 80px; font-weight: 800; }
.mup-quote p { font-size: clamp(1.2rem, 2.6vw, 1.65rem); font-weight: 700; line-height: 1.4; color: var(--ink); }
.mup-quote__by { margin-top: 1rem; font-size: .88rem; color: var(--muted); }

/* Centres */
.mup-centre { display: grid; grid-template-columns: 1fr 1.15fr; background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line); }
.mup-centre__map { min-height: 380px; background: var(--chalk); position: relative; }
.mup-centre__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mup-centre__info { padding: clamp(1.5rem, 3.5vw, 2.5rem); }
.mup-centre__info h3 { font-size: 1.5rem; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: .9rem; }
.mup-centre__addr { display: flex; gap: .6rem; color: var(--muted); }
.mup-centre__addr .mup-ic { color: var(--red); margin-top: 3px; }
.mup-centre__cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.75rem; margin: 1.5rem 0; }
.mup-centre__info h4 { font-size: .9rem; display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.mup-centre__info h4 .mup-ic { color: var(--red); }
.mup-hours { width: 100%; border-collapse: collapse; font-size: .86rem; margin: 0; }
.mup-hours th, .mup-hours td { padding: .38rem .55rem; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: none; }
.mup-hours th { font-weight: 600; width: 52px; }
.mup-hours .is-closed td { color: #a3acb9; }
.mup-hours .is-today { background: var(--yellow-lt); }
.mup-hours .is-today th, .mup-hours .is-today td { font-weight: 700; color: var(--ink); }
.mup-centre__small { font-size: .76rem; color: var(--muted); margin-top: .7rem !important; }
.mup-list-check { display: grid; gap: .45rem; margin-bottom: 1.1rem !important; }
.mup-list-check li { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--muted); }
.mup-list-check .mup-ic { color: var(--green); margin-top: 3px; stroke-width: 3; }
.mup-ig { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; text-decoration: none !important; padding: .55rem .95rem; border-radius: 50px; background: linear-gradient(90deg, #f58529, #dd2a7b, #8134af); color: #fff !important; }
.mup-centre__contact { display: grid; gap: .4rem; margin-top: 1.1rem !important; font-size: .88rem; }
.mup-centre__contact a { display: inline-flex; gap: .5rem; align-items: center; color: var(--ink); text-decoration: none; font-weight: 600; }
.mup-centre__contact .mup-ic { color: var(--red); }
.mup-centre__ctas { display: flex; gap: .7rem; flex-wrap: wrap; }

/* Trial band + contact */
.mup-trial-band { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; }
.mup-trial-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); margin: .8rem 0 .7rem; }
.mup-trial-band p { color: rgba(255, 255, 255, .88); max-width: 640px; }
.mup-trial-band strong { color: #fff; }

.mup-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
.mup-contact__miu .mup-miu { background: linear-gradient(150deg, var(--ink), var(--ink-2)); grid-template-columns: 1fr; height: 100%; align-content: center; }
.mup-contact__miu .mup-miu__ctas { grid-template-columns: 1fr 1fr; }
.mup-form-card--callback { box-shadow: var(--shadow-md); border: 1px solid var(--line); border-top: 5px solid var(--ink); }
.mup-form-card--callback > h3 { font-size: 1.35rem; display: flex; align-items: center; gap: .55rem; margin-bottom: .3rem; }
.mup-form-card--callback > h3 .mup-ic { color: var(--red); }
.mup-form-card--callback > p { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }

/* Responsive
   ========================================================================== */

@media (max-width: 1024px) {
	.mup-hero__grid { grid-template-columns: 1fr; }
	.mup-hero__copy { position: static; }
	.mup-hero__form { max-width: 620px; width: 100%; margin: 0 auto; }
	.mup-grid-4 { grid-template-columns: repeat(2, 1fr); }
	.mup-tutors { grid-template-columns: repeat(3, 1fr); }
	.mup-stats { grid-template-columns: repeat(3, 1fr); }
	.mup-stats li:nth-child(4), .mup-stats li:nth-child(5) { grid-column: span 1; }
	.mup-centre { grid-template-columns: 1fr; }
	.mup-centre__map { min-height: 280px; }
	.mup-contact { grid-template-columns: 1fr; }
	.mup-subnav ul { justify-content: flex-start; }
}

@media (max-width: 820px) {
	.mup-split, .mup-split--plan { grid-template-columns: 1fr; }
	.mup-split--rev > :first-child { order: 2; }
	.mup-feature-grid { grid-template-columns: 1fr; }
	.mup-grid-3 { grid-template-columns: 1fr; }
	.mup-band__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.mup-miu { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.mup-miu__asks { justify-content: center; }
	.mup-miu__ctas { width: 100%; max-width: 360px; }
	.mup-cta-card, .mup-trial-band { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.mup-process__flow { grid-template-columns: repeat(3, 1fr); }
	.mup-process__flow [role="tab"]::after { display: none; }
	.mup-term { grid-template-columns: 1fr; }
	.mup-journey__card { grid-template-columns: 1fr; }
	.mup-journey__name { font-size: .78rem; }
	.mup-journey__dot { width: 56px; height: 56px; }
	.mup-journey__track::before { top: 27px; }
}

@media (max-width: 600px) {
	.mup-tabs__list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none; margin-left: -1rem; margin-right: -1rem; padding: .25rem 1rem .75rem; }
	.mup-tabs__list::-webkit-scrollbar { display: none; }
	.mup-tabs__list [role="tab"] { flex-shrink: 0; padding: .65rem 1.05rem; font-size: .86rem; }
	.mup-form__row { grid-template-columns: 1fr; }
	.mup-centre-pick { grid-template-columns: 1fr; }
	.mup-centre-opt > span { flex-direction: row; justify-content: flex-start; text-align: left; gap: .6rem; padding: .75rem .9rem; }
	.mup-centre-opt small { margin-left: auto; }
	.mup-grid-4 { grid-template-columns: 1fr; }
	.mup-tutors { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
	.mup-tutor { padding: 1rem .7rem 1.1rem; }
	.mup-tutor__img { width: 96px; height: 96px; }
	.mup-stats { grid-template-columns: repeat(2, 1fr); }
	.mup-stats li:last-child { grid-column: span 2; }
	.mup-hero__ctas .mup-btn, .mup-centre__ctas .mup-btn { width: 100%; }
	.mup-hero__facts div { flex: 1; min-width: 0; padding: .7rem .8rem; }
	.mup-hero__facts strong { font-size: 1.15rem; }
	.mup-step { grid-template-columns: 44px 1fr; gap: .75rem; }
	.mup-step__num { width: 44px; height: 44px; font-size: 1.1rem; }
	.mup-steps::before { left: 20.5px; }
	.mup-step__card { padding: 1.1rem 1.1rem 1.1rem 1.1rem; }
	.mup-step__icon { position: static; margin-bottom: .7rem; width: 40px; height: 40px; }
	.mup-centre__cols { grid-template-columns: 1fr; }
	.mup-contact__miu .mup-miu__ctas { grid-template-columns: 1fr; }
	.mup-journey__track { gap: .2rem; }
	.mup-journey__track [role="tab"] { padding: 0; }
	.mup-media figcaption { flex-direction: column; gap: .2rem; }
	.mup-join { flex-wrap: wrap; }
	.mup-join__go { display: none; }
}

/* Compact booking form */
.mup-form-card--compact { padding: 1.4rem 1.5rem; max-width: 460px; margin-left: auto; }
.mup-form-card--compact .mup-form-card__head h2 { font-size: 1.35rem; margin: 0 0 .15rem; }
.mup-form-card--compact .mup-form-card__head p { font-size: .85rem; margin-bottom: .9rem; }
.mup-form-card--compact .mup-form { gap: .7rem; }
.mup-form-card--compact .mup-form__row { gap: .6rem; }
.mup-form-card--compact .mup-field { gap: .2rem; }
.mup-form-card--compact .mup-field > span { font-size: .78rem; }
.mup-form-card--compact .mup-field input, .mup-form-card--compact .mup-field select { padding: .55rem .75rem; font-size: .9rem; }
.mup-form-card--compact .mup-centre-pick { gap: .4rem; }
.mup-form-card--compact .mup-centre-opt > span { flex-direction: row; justify-content: center; padding: .55rem .4rem; font-size: .85rem; font-weight: 600; border-radius: 50px; }
.mup-form-card--compact .mup-btn { padding: .8rem 1.4rem; margin-top: .2rem; }
.mup-form-card--compact .mup-hsc-note { padding: .5rem .75rem; font-size: .8rem; }
.mup-form-card--compact .mup-form__fine { font-size: .74rem; }
@media (max-width: 1024px) { .mup-form-card--compact { margin: 0 auto; } }
@media (max-width: 600px) { .mup-form-card--compact .mup-centre-pick { grid-template-columns: repeat(3, 1fr); } .mup-form-card--compact .mup-centre-opt > span { padding: .55rem .2rem; } }

/* ==========================================================================
   Match the approved homepage (light hero, red buttons, #FFC72C yellow, #222 ink)
   ========================================================================== */
.mup-pg { --yellow: #ffc72c; --yellow-lt: #fff6d6; --ink: #222; --ink-2: #333; --muted: #5f5f5f; --line: #ececec; --red-lt: #fdecee; }

/* Hero: white with soft yellow + pink glow, like the homepage hero */
.mup-hero { background: radial-gradient(circle at 88% 12%, #ffe9a8 0, rgba(255, 233, 168, 0) 42%), radial-gradient(circle at 8% 92%, #fdecee 0, rgba(253, 236, 238, 0) 48%), #fff; color: var(--ink); }
.mup-hero::before, .mup-hero::after { display: none; }
.mup-hero h1 { color: var(--ink); }
.mup-hero--why h1 span { color: var(--red); }
.mup-hero__lead { color: var(--muted); }
.mup-eyebrow--light { background: var(--red-lt); color: var(--red-dk); }
.mup-eyebrow--light::before { background: var(--red); }
.mup-ticks li { color: var(--muted); }
.mup-ticks strong { color: var(--ink); }
.mup-hero__facts div { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mup-hero__facts strong { color: var(--red); }
.mup-hero__facts span { color: var(--muted); }
.mup-stats { background: var(--line); border-color: var(--line); box-shadow: var(--shadow-sm); }
.mup-stats li { background: #fff; }
.mup-stats strong, .mup-stats li:nth-child(odd) strong { color: var(--ink); }
.mup-stats li:nth-child(odd) strong { color: var(--red); }
.mup-stats span { color: var(--muted); }
.mup-btn--ghost { color: var(--red) !important; border-color: var(--red); }
.mup-btn--ghost:hover { background: var(--red-lt); border-color: var(--red); }

/* Booking buttons in brand red, same as the homepage */
.mup-btn--green { background: var(--red); box-shadow: 0 6px 20px rgba(226, 26, 45, .28); }
.mup-btn--green:hover { background: var(--red-dk); box-shadow: 0 10px 28px rgba(226, 26, 45, .36); }
.mup-section--red .mup-btn--green, .mup-btn--glow { background: #fff; color: var(--red) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.mup-section--red .mup-btn--green:hover { background: var(--yellow); color: var(--ink) !important; }
.mup-days .is-open { background: var(--red-lt); color: var(--red-dk); }
.mup-miu__live { background: var(--yellow); color: var(--ink); border-color: #222; }

/* Former dark sections become soft pink */
.mup-section--dark { background: var(--red-lt); color: var(--ink); }
.mup-wave--dark path { fill: var(--red-lt); }
.mup-head--light p { color: var(--muted); }
.mup-head--light strong { color: var(--ink); }
.mup-journey__track [role="tab"] { color: var(--muted); }
.mup-journey__track [aria-selected="true"] { color: var(--ink); }
.mup-journey__dot { background: #fff; border-color: var(--line); box-shadow: var(--shadow-sm); }
.mup-journey__dot .mup-ic { color: var(--red); }
.mup-path__steps li { background: #fff; border-color: var(--line); color: var(--ink); }
.mup-path__steps li span { color: var(--red); }
.mup-path p { color: var(--muted); }
.mup-path strong { color: var(--ink); }
.mup-miu, .mup-contact__miu .mup-miu { background: #222; border: 0; box-shadow: var(--shadow-md); }

/* Wavy red underline under section headings, like the homepage */
.mup-head h2::after { content: ''; display: block; width: 110px; height: 12px; margin: .7rem auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 12'%3E%3Cpath d='M2 6c9-6 18-6 27 0s18 6 27 0 18-6 27 0 18 6 25 0' fill='none' stroke='%23E21A2D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.mup-section--dark .mup-eyebrow { background: #fff; }

/* ===== Nhi feedback, Oct 2026 ===== */
/* Ask Miu box: brand red instead of black */
.mup-miu, .mup-contact__miu .mup-miu { background: var(--red); color: #fff; }
.mup-miu p { color: rgba(255, 255, 255, .92); }
.mup-miu__face { background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .25); }
.mup-miu__face .mup-ic { color: var(--red); }
.mup-miu__asks li { background: rgba(255, 255, 255, .16); color: #fff; }
.mup-miu__asks li::before { color: var(--yellow); }
.mup-miu .mup-btn--red { background: #fff; color: var(--red) !important; box-shadow: none; }
.mup-miu .mup-btn--red:hover { background: var(--yellow); color: var(--ink) !important; }
.mup-miu .mup-btn--outline { border-color: #fff; color: #fff !important; background: transparent; }
.mup-miu .mup-btn--outline:hover { background: #fff; color: var(--red) !important; }
.mup-miu__phone span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.mup-miu__phone small { font-size: .78em; opacity: .85; font-weight: 600; }
/* Green button (Year 11/12 band) */
.mup-btn--go { background: #1f9d55; color: #fff !important; box-shadow: 0 6px 20px rgba(31, 157, 85, .3); }
.mup-btn--go:hover { background: #17824a; }
/* Class timetable band */
.mup-timetable { background: var(--yellow); padding: 1.6rem 0; }
.mup-timetable__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; }
.mup-timetable h2 { margin: 0; font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--ink); }
.mup-timetable__btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--red); color: #fff !important; font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.6rem); padding: .55em 1.8em; border-radius: 50px; text-decoration: none; box-shadow: 0 10px 24px -10px rgba(226, 26, 45, .7); transition: transform .2s; }
.mup-timetable__btn:hover { transform: translateY(-2px); }
/* Centre opening hours */
.mup-hours__label { font-size: .8rem; font-weight: 700; margin: .4rem 0 .35rem !important; color: var(--ink); }
.mup-hours { display: grid; gap: 2px; margin: 0 0 1rem; font-size: .8rem; }
.mup-hours li { display: flex; justify-content: space-between; padding: .2rem 0; border-bottom: 1px dashed var(--line); }
.mup-hours li span:first-child { font-weight: 700; }
.mup-hours .is-closed { color: var(--muted); }
.mup-timetable__btns { display: flex; gap: .8rem; flex-wrap: wrap; }
.mup-timetable__btn.is-soon { background: #fff; color: var(--muted) !important; box-shadow: none; cursor: default; font-size: clamp(1rem, 2vw, 1.25rem); }
.mup-timetable__btn.is-soon small { font-size: .7em; font-weight: 600; }
.mup-timetable__btn.is-soon:hover { transform: none; }

/* ===== Version 2 updates (Oct 2026) ===== */
/* Ask Miu buttons: green so they stand out */
.mup-btn[data-mup-miu], .mup-miu .mup-btn--red[data-mup-miu] { background: #1f9d55 !important; color: #fff !important; border-color: #1f9d55 !important; box-shadow: 0 6px 18px rgba(31, 157, 85, .3); }
.mup-btn[data-mup-miu]:hover { background: #17824a !important; color: #fff !important; }
.mup-btn[data-mup-miu] .mup-ic { color: #fff; }
/* Miu photo in the Ask Miu box */
.mup-miu__photo { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; object-position: center 12%; border: 4px solid #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); display: block; background: #fff; }
/* Ask Miu input (box + hero card) */
.mup-miu-ask { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; padding: .35rem .35rem .35rem 1.1rem; box-shadow: 0 14px 34px -18px rgba(226, 26, 45, .55); border: 2px solid var(--line); max-width: 460px; }
.mup-miu-ask:focus-within { border-color: var(--red); }
.mup-miu-ask input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: .95rem; padding: .55rem 0; outline: none; color: var(--ink); }
.mup-miu-ask button { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--red); color: #fff; display: grid; place-items: center; cursor: pointer; }
.mup-miu-ask button .mup-ic { transform: rotate(-90deg); color: #fff; }
.mup-miu-ask--box { margin-top: 1rem; border-color: transparent; }
/* Miu card in hub heroes */
.mup-hub-hero--miu { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.mup-miu-card { background: #fff; border-radius: var(--r-lg); padding: 1.2rem 1.2rem 1.4rem; box-shadow: var(--shadow-lg); text-align: center; max-width: 380px; margin-left: auto; width: 100%; }
.mup-miu-card__photo { position: relative; background: #f6f6f6; border-radius: var(--r-md); overflow: hidden; }
.mup-miu-card__photo img { display: block; width: 100%; height: 260px; object-fit: cover; object-position: center 15%; }
.mup-miu-card__hi { position: absolute; left: .7rem; top: .7rem; background: var(--red); color: #fff; font-weight: 700; font-size: .8rem; padding: .3rem .75rem; border-radius: 14px 14px 14px 4px; }
.mup-miu-card__title { font-weight: 800; font-size: 1.15rem; margin: 1rem 0 .7rem !important; color: var(--ink); }
.mup-miu-card .mup-miu-ask { margin: 0 auto; }
@media (max-width: 900px) {
	.mup-hub-hero--miu { grid-template-columns: 1fr; }
	.mup-miu-card { margin: 0 auto; }
}
@media (max-width: 760px) { .mup-miu__photo { margin: 0 auto; } .mup-miu-ask--box { margin-left: auto; margin-right: auto; } }