/* My Money: the app's own visual language on the web (tokens from the app's code,
   research/assets-inventory.md §5.1): light canvas #FAFCFE, white cards with 26px
   corners and a soft blue-grey shadow, the home-screen ring, SF Pro Rounded (Nunito
   where it isn't available), dark pill buttons, segmented controls, rounded-square
   icon badges. Calm and roomy; deliberately unlike SnapTidy's tilted poster. */

.px-mm { background: var(--canvas); }
.mm h3 { font-family: var(--f-disp); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; text-transform: none; }
:lang(zh-CN) .mm h3, :lang(zh-Hant) .mm h3, :lang(ja) .mm h3 { font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }
.mm-head { display: grid; gap: 18px; max-width: 800px; margin-bottom: clamp(44px, 5.4vw, 72px); }
.mm-head-c { margin-inline: auto; text-align: center; justify-items: center; }
.mm-head-c .px-lead { margin-inline: auto; }
.mm-card { background: #fff; border-radius: 26px; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }

/* Hero ------------------------------------------------------------------------- */
.mm-hero { position: relative; overflow: hidden; background: var(--canvas); color: var(--ink); padding: clamp(28px, 4vw, 56px) 0 clamp(70px, 8vw, 110px); }
.mm-stars { display: none; }
.mm-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px; align-items: center; min-height: min(calc(100svh - 150px), 720px); }
.mm-hero h1 { margin: 0; }
.mm-hero .px-eyebrow { font-family: var(--f-disp); font-weight: 900; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); opacity: 1; }
:lang(zh-CN) .mm-hero .px-eyebrow, :lang(zh-Hant) .mm-hero .px-eyebrow, :lang(ja) .mm-hero .px-eyebrow { letter-spacing: .04em; text-transform: none; font-size: 14px; }
.mm-h1 { display: block; font-size: clamp(42px, min(5.6vw, 9.4svh), 80px); font-weight: 800; line-height: 1.04; letter-spacing: -.03em; }
:lang(zh-CN) .mm-h1, :lang(zh-Hant) .mm-h1, :lang(ja) .mm-h1 { font-family: var(--f-cjk-disp); font-weight: 600; line-height: 1.16; letter-spacing: -.01em; font-size: clamp(40px, min(5.4vw, 9svh), 76px); }
.mm-intro { margin-top: 24px; max-width: 32em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--ink-2); }
.mm-hero .breadcrumb { color: var(--ink-3); opacity: 1; }

.mm-orbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; justify-self: end; container-type: inline-size; }
.mm-backlight { position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle, rgb(40 184 255 / .3), rgb(40 184 255 / 0) 68%); filter: blur(24px); }
.mm-orbit::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: #fff; box-shadow: 0 30px 60px -30px rgb(30 75 122 / .25); }
.mm-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mm-ring circle { fill: none; stroke-linecap: round; }
.mm-track { stroke: #e6ecf3; stroke-width: 18; }
.mm-track-hi { stroke: rgb(255 255 255 / .22); stroke-width: 2; }
.mm-arc { stroke-width: 18; filter: drop-shadow(0 6px 10px rgb(0 156 255 / .16)); }
.mm-orbit-in { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; }
.mm-label { font-family: var(--f-disp); font-size: clamp(14px, 3.6cqw, 19px); font-weight: 700; color: var(--ink-2); }
.mm-amt { display: flex; align-items: flex-start; margin-top: 1cqw; font-family: var(--f-disp); font-size: clamp(60px, 22cqw, 124px); font-weight: 900; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mm-amt .cur { font-size: .5em; margin: .12em .02em 0 0; }
.mm-spent { margin-top: 2cqw; font-family: var(--f-disp); font-size: clamp(12px, 3.2cqw, 16px); font-weight: 600; color: var(--ink-2); }
.mm-chip { position: absolute; z-index: 4; display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-family: var(--f-disp); font-weight: 800; font-size: clamp(13px, 3.6cqw, 18px); box-shadow: var(--card-shadow), 0 0 0 1px #d6efff; white-space: nowrap; }
.mm-chip-1 { left: 2cqw; top: 8cqw; }
.mm-vault { position: absolute; width: 24cqw; height: auto; right: 0; bottom: 6cqw; filter: drop-shadow(0 18px 24px rgb(30 75 122 / .25)); }
@keyframes mm-draw { from { stroke-dashoffset: var(--arc); } }
@keyframes mm-breathe { 0%, 100% { scale: .96; } 50% { scale: 1.06; } }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .mm-arc { animation: mm-draw 1.6s cubic-bezier(.65, 0, .35, 1) both .25s; }
  html:not([data-motion="off"]) .mm-backlight { animation: mm-breathe 5s ease-in-out infinite; }
  html:not([data-motion="off"]) .mm-orbit-in { animation: px-fade-up .9s var(--out) both .15s; }
  html:not([data-motion="off"]) .mm-hero h1 .mm-h1 { animation: px-fade-up .9s var(--out) both .1s; }
  html:not([data-motion="off"]) .mm-intro { animation: px-fade-up .9s var(--out) both .3s; }
  html:not([data-motion="off"]) .mm-chip { animation: px-pop-in .6s var(--spring) both 1.3s; }
  html:not([data-motion="off"]) .mm-vault { animation: px-pop-in .7s var(--spring) both 1.1s, px-float 6s ease-in-out infinite 1.9s; }
}

/* Why: receipts ------------------------------------------------------------------ */
.mm-why { background: #fff; }
.mm-receipts { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mm-receipts > li { position: relative; padding: 32px 30px 48px; background: var(--canvas); border-radius: 26px 26px 0 0; box-shadow: inset 0 0 0 1px var(--line); -webkit-mask: radial-gradient(9px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 24px 100%; mask: radial-gradient(9px at 50% calc(100% + 1px), #0000 98%, #000) 50% / 24px 100%; transition: translate .5s var(--spring); }
.mm-receipts > li:hover { translate: 0 -6px; }
.mm-was { padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1.5px dashed var(--line); font-size: 15px; color: var(--ink-3); }
.mm-was s { text-decoration-color: var(--coral); text-decoration-thickness: 1.5px; }
.mm-receipts h3 { font-size: 21px; }
.mm-receipts p:not(.mm-was) { margin-top: 10px; font-size: 16px; color: var(--ink-2); }

/* Method -------------------------------------------------------------------------- */
.mm-method { background: var(--blue-ice); }
.mm-method-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.mm-div { font-family: var(--f-disp); font-size: clamp(96px, 12vw, 180px); font-weight: 900; line-height: .85; letter-spacing: -.04em; background: var(--hero-grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 22px; }
.mm-method-copy .px-lead { margin-top: 18px; }
.method-figure { margin: 0; padding: clamp(24px, 3vw, 36px); border-radius: 26px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.method-controls { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-gray); margin-bottom: 26px; }
.method-figure .px-pill { min-height: 38px; border: 0; padding: 0 16px; color: var(--ink-2); font-family: var(--f-disp); font-weight: 800; font-size: 14px; }
.method-figure .px-pill:hover { transform: none; color: var(--ink); }
.method-figure .px-pill[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(30 75 122 / .12); }
.method-axis { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.method-chart { position: relative; height: clamp(210px, 22vw, 260px); margin-bottom: 34px; padding-right: clamp(64px, 8vw, 100px); }
.bars { list-style: none; display: flex; align-items: flex-end; gap: clamp(4px, .8vw, 10px); height: 100%; position: relative; }
.bars li { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.bar { display: block; height: calc(var(--h) * 100%); min-height: 3px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #42c8ff, #009cff); transition: height .8s var(--spring), opacity .3s; }
.bars li.is-save .bar { background: linear-gradient(180deg, #4fd3a6, var(--mint)); }
.bars li.is-over .bar { background: linear-gradient(180deg, #ff9d86, var(--coral)); }
.bars li.is-before .bar { opacity: .32; }
.val { position: absolute; left: 50%; bottom: calc(var(--h) * 100% + 8px); transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--f-disp); font-size: 12px; font-weight: 800; white-space: nowrap; opacity: 0; transition: bottom .8s var(--spring), opacity .3s; }
.bars li.has-label .val { opacity: 1; }
.day { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.bars li:nth-child(even) .day { visibility: hidden; }
.baseline { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1.5px dashed rgb(23 26 32 / .28); z-index: 1; pointer-events: none; }
.baseline span { position: absolute; right: 0; top: 0; transform: translateY(-50%); width: clamp(56px, 7.4vw, 92px); font-size: 12px; line-height: 1.3; text-align: right; color: var(--ink-2); background: #fff; padding-left: 8px; }
.method-figure figcaption { display: grid; gap: 10px; }
.method-caption { font-family: var(--f-disp); font-size: 17px; line-height: 1.55; font-weight: 700; min-height: 3.2em; }
:lang(zh-CN) .method-caption, :lang(zh-Hant) .method-caption, :lang(ja) .method-caption { font-family: var(--f-body); }
.method-note { font-size: 12.5px; color: var(--ink-3); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .method-figure:not(.is-in) .bar { height: 0; }
  html.js:not([data-motion="off"]) .method-figure .bars li .bar { transition-delay: calc(var(--n, 0) * 45ms); }
}
.mm-rules { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mm-rules > div { padding: 26px; border-radius: 26px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm-rules dt { display: flex; align-items: center; gap: 12px; font-family: var(--f-disp); font-weight: 800; font-size: 19px; }
:lang(zh-CN) .mm-rules dt, :lang(zh-Hant) .mm-rules dt, :lang(ja) .mm-rules dt { font-family: var(--f-body); font-weight: 700; }
.mm-rules dt::before { content: ""; width: 42px; height: 42px; flex: none; border-radius: 13px; background: var(--blue-soft) center / 22px no-repeat; }
.mm-rule-0 dt::before { background-color: var(--blue-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007fe8' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E"); }
.mm-rule-1 dt::before { background-color: #e3f7ef; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317b486' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h11M12 7l5 5-5 5'/%3E%3C/svg%3E"); }
.mm-rule-2 dt::before { background-color: #fdebe6; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2765c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H8M12 7l-5 5 5 5'/%3E%3C/svg%3E"); }
.mm-rules dd { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

/* Logging: four big soft cards ------------------------------------------------------- */
.mm-log { background: #fff; }
.mm-ways { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.mm-way { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; min-height: 410px; padding: 36px 30px 0 36px; border-radius: 30px; transition: translate .5s var(--spring); }
.mm-way:hover { translate: 0 -4px; }
.mm-way-0 { background: var(--blue-soft); }
.mm-way-1 { background: #e6f8f0; }
.mm-way-2 { background: #fff1ec; }
.mm-way-3 { background: #f1eeff; }
.mm-way-copy { padding-bottom: 36px; }
.mm-verb { font-family: var(--f-disp); font-size: clamp(30px, 3vw, 42px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05; margin-bottom: 18px; }
.mm-way-0 .mm-verb { color: var(--blue-deep); }
.mm-way-1 .mm-verb { color: #0f9a72; }
.mm-way-2 .mm-verb { color: #dc5a3e; }
.mm-way-3 .mm-verb { color: #6b55d9; }
:lang(zh-CN) .mm-verb, :lang(zh-Hant) .mm-verb, :lang(ja) .mm-verb { font-family: var(--f-cjk-disp); font-weight: 600; }
.mm-way h3 { font-size: 19px; }
.mm-way p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.mm-way .mm-req { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgb(23 26 32 / .08); font-size: 13.5px; color: var(--ink-3); }
.mm-way-shot { position: relative; align-self: end; display: flex; justify-content: center; }
.mm-way-shot .px-phone { --w: 210px; margin-bottom: -150px; box-shadow: 0 30px 50px -26px rgb(30 75 122 / .45); transition: translate .6s var(--spring); }
.mm-way:hover .px-phone { translate: 0 -14px; }
.mm-way .screen-crop { margin: 0 0 26px; width: 100%; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm-way .screen-crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Review & decide ------------------------------------------------------------------ */
.mm-review { background: var(--canvas); }
.mm-decide { background: #fffbea; }
.mm-feature { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.mm-flip > :first-child { order: 2; }
.mm-feature .px-lead { margin-top: 18px; }
.mm-list { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mm-list > div { padding: 20px 22px; border-radius: 20px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm-list dt { font-family: var(--f-disp); font-weight: 800; font-size: 16.5px; }
:lang(zh-CN) .mm-list dt, :lang(zh-Hant) .mm-list dt, :lang(ja) .mm-list dt { font-family: var(--f-body); font-weight: 700; }
.mm-list dd { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.mm-pair { position: relative; display: flex; justify-content: center; gap: 26px; padding-block: 10px 50px; }
.mm-pair .px-phone { --w: clamp(190px, 18vw, 250px); box-shadow: 0 40px 70px -34px rgb(30 75 122 / .45); }
.mm-pair .px-phone:nth-child(2) { translate: 0 48px; }

/* Privacy ---------------------------------------------------------------------------- */
.mm-privacy { background: #fff; }
.mm-privacy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.mm-privacy-grid .mm-head { margin-bottom: 0; }
.mm-shield { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm-shield > div { padding: 24px; border-radius: 26px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.mm-shield dt { display: flex; align-items: center; gap: 14px; font-family: var(--f-disp); font-weight: 800; font-size: 17px; }
:lang(zh-CN) .mm-shield dt, :lang(zh-Hant) .mm-shield dt, :lang(ja) .mm-shield dt { font-family: var(--f-body); font-weight: 700; }
.mm-shield dt svg { width: 42px; height: 42px; flex: none; padding: 10px; border-radius: 13px; background: var(--blue-soft); color: var(--blue-deep); }
.mm-shield > div:nth-child(2) dt svg { background: #e3f7ef; color: var(--mint); }
.mm-shield > div:nth-child(3) dt svg { background: #f1eeff; color: #6b55d9; }
.mm-shield > div:nth-child(4) dt svg { background: #fff4dc; color: var(--amber); }
.mm-shield dd { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Scenarios: segmented control + panels (all panels are plain HTML) ----------------------- */
.mm-scen { background: var(--canvas); }
.mm-tablist { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; width: fit-content; margin: 0 auto 28px; padding: 4px; border-radius: 999px; background: var(--surface-gray); }
.mm-tablist[hidden] { display: none; }
.mm-tab { min-height: 42px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; color: var(--ink-2); font-family: var(--f-disp); font-weight: 800; font-size: 14.5px; transition: background-color .25s, color .25s, box-shadow .25s; }
.mm-tab:hover { color: var(--ink); }
.mm-tab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(30 75 122 / .12); }
.mm-panel { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: clamp(28px, 4vw, 52px); border-radius: 30px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm-panel + .mm-panel { margin-top: 20px; }
.mm-panel[hidden] { display: none; }
.mm-panel-tag { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-family: var(--f-disp); font-size: 13px; font-weight: 800; }
.mm-panel h3 { margin-top: 16px; font-size: clamp(23px, 2.2vw, 30px); }
.mm-panel-copy p:not(.mm-panel-tag) { margin-top: 14px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.mm-panel-steps { list-style: none; counter-reset: s; display: grid; gap: 12px; }
.mm-panel-steps li { counter-increment: s; position: relative; padding: 18px 20px 18px 64px; border-radius: 20px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); font-size: 15.5px; line-height: 1.6; }
.mm-panel-steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--main); color: #fff; font-family: var(--f-disp); font-weight: 900; font-size: 14px; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .mm-tabs.is-tabbed .mm-panel:not([hidden]) { animation: px-fade-up .45s var(--out) both; }
}

/* Compare, fit, steps ------------------------------------------------------------------ */
.mm-compare { background: #fff; }
.mm-fitsec { background: var(--canvas); }
.mm-fit-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.mm-fit-grid > div { padding: clamp(28px, 3.4vw, 40px); border-radius: 30px; }
.mm-fit-yes { background: #e6f8f0; }
.mm-fit-no { background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm-fit-grid ul { list-style: none; margin-top: 18px; }
.mm-fit-grid li { position: relative; padding: 13px 0 13px 34px; border-top: 1px solid rgb(23 26 32 / .08); font-size: 16px; line-height: 1.55; color: var(--ink); }
.mm-fit-grid li::before { position: absolute; left: 0; top: 14px; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.mm-fit-yes li::before { content: "✓"; background: var(--mint); color: #fff; }
.mm-fit-no li::before { content: "✕"; background: #fdebe6; color: var(--coral); }
.mm-steps { background: #fff; }
.mm-steps-row { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.mm-steps-row li { padding: 30px; border-radius: 26px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.mm-step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--hero-grad); color: #fff; font-family: var(--f-disp); font-size: 24px; font-weight: 900; margin-bottom: 22px; box-shadow: 0 10px 20px -10px rgb(0 156 255 / .6); }
.mm-steps-row h3 { font-size: 20px; }
.mm-steps-row p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }

/* Facts & glossary: two-column lists in white cards -------------------------------------- */
.mm-facts { background: var(--canvas); }
.mm-gloss { background: #fff; }
.mm-two { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
.mm-two-head { position: sticky; top: 110px; display: grid; gap: 16px; }
.mm-facts .facts { padding: 6px 28px; border-radius: 26px; background: #fff; box-shadow: var(--card-shadow), 0 0 0 1px var(--line); }
.mm .facts > div { padding: 18px 0; border-color: var(--line); }
.mm .facts > div:last-child { border-bottom: 0; }
.mm .facts dt { color: var(--ink); font-weight: 700; }
.mm .facts dd { color: var(--ink-2); }
.mm-terms { padding: 6px 28px; border-radius: 26px; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--line); }
.mm-terms > div { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr); gap: 24px; padding: 20px 0; }
.mm-terms > div + div { border-top: 1px solid var(--line); }
.mm-terms dt { font-family: var(--f-disp); font-weight: 800; font-size: 16px; }
:lang(zh-CN) .mm-terms dt, :lang(zh-Hant) .mm-terms dt, :lang(ja) .mm-terms dt { font-family: var(--f-body); font-weight: 700; }
.mm-terms dd { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.mm-faq { background: var(--canvas); }
.mm .guide-strip { background: var(--canvas); }
.mm .px-end { background: var(--canvas); }

/* Responsive ------------------------------------------------------------------------------ */
@media (max-width: 1099px) {
  .mm-way { grid-template-columns: 1fr; min-height: 0; }
  .mm-way-shot { margin-top: 10px; }
  .mm-way-shot .px-phone { margin-bottom: -170px; }
  .mm-rules { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  .mm-hero-grid { grid-template-columns: 1fr; min-height: 0; gap: 20px; }
  .mm-orbit { justify-self: center; max-width: 380px; margin-top: 10px; }
  .mm-receipts, .mm-steps-row { grid-template-columns: 1fr; }
  .mm-method-grid, .mm-feature, .mm-privacy-grid, .mm-panel, .mm-two, .mm-fit-grid { grid-template-columns: 1fr; }
  .mm-flip > :first-child { order: 0; }
  .mm-two-head { position: static; }
  .mm-ways { grid-template-columns: 1fr; }
  .bars li:not(:first-child) .day { visibility: hidden; }
  .mm-tablist { border-radius: 24px; }
}
@media (max-width: 599px) {
  .mm-list, .mm-shield { grid-template-columns: 1fr; }
  .mm-terms > div { grid-template-columns: 1fr; gap: 6px; }
  .mm-terms, .mm-facts .facts { padding: 4px 20px; }
  .mm-way { padding: 28px 24px 0; }
  .mm-pair .px-phone { --w: 40vw; }
  .method-caption { font-size: 15.5px; }
}

/* Product page → calculator link */
.mm-calc-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-family: var(--f-disp); font-weight: 800; transition: transform .3s var(--spring); }
.mm-calc-link:hover { transform: translateY(-2px); }

/* Daily budget calculator ----------------------------------------------------------- */
.calc-hero { background: var(--canvas); padding: clamp(28px, 4vw, 52px) 0 clamp(24px, 3vw, 40px); }
.calc-hero h1 { margin: 0; }
.calc-hero .px-eyebrow { font-family: var(--f-disp); font-weight: 900; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep); }
:lang(zh-CN) .calc-hero .px-eyebrow, :lang(zh-Hant) .calc-hero .px-eyebrow, :lang(ja) .calc-hero .px-eyebrow { letter-spacing: .04em; font-size: 14px; }
.calc-h1 { display: block; font-family: var(--f-disp); font-size: clamp(38px, 5vw, 68px); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
:lang(zh-CN) .calc-h1, :lang(zh-Hant) .calc-h1, :lang(ja) .calc-h1 { font-family: var(--f-cjk-disp); font-weight: 600; }
.calc-dek { margin-top: 18px; max-width: 36em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--ink-2); }
.calc-tool { background: var(--canvas); padding-bottom: clamp(64px, 8vw, 110px); }
.calc-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: start; }
.calc-form { padding: clamp(24px, 3vw, 34px); }
.calc-form fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 20px; }
.calc-form legend { padding: 0; margin-bottom: 6px; font-family: var(--f-disp); font-weight: 800; font-size: 18px; }
.calc-field { display: grid; gap: 8px; }
.calc-field label { font-weight: 700; font-size: 15px; }
.calc-field small { font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.calc-input { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 18px; border-radius: 16px; background: var(--surface-gray); box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s, background-color .2s; }
.calc-input:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--main); }
.calc-input input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--f-disp); font-weight: 800; font-size: 24px; color: var(--ink); outline: none; font-variant-numeric: tabular-nums; }
.calc-input span { color: var(--ink-2); font-weight: 700; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.calc-results { display: grid; gap: 18px; }
.calc-result { padding: clamp(24px, 3vw, 34px); }
.calc-result-b { border-radius: 26px; background: var(--hero-grad); color: #fff; box-shadow: 0 30px 60px -30px rgb(0 156 255 / .55); }
.calc-result-title { font-family: var(--f-disp); font-weight: 800; font-size: 16px; color: var(--ink-2); }
.calc-result-b .calc-result-title { color: rgb(255 255 255 / .85); }
.calc-num { margin-top: 6px; font-family: var(--f-disp); font-weight: 900; font-size: clamp(54px, 7vw, 96px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.calc-sub { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 40em; }
.calc-result-b .calc-sub { color: rgb(255 255 255 / .88); }
.calc-chip { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; background: rgb(255 255 255 / .2); font-family: var(--f-disp); font-weight: 800; font-size: 14px; }
.calc-tool.is-over .calc-result:not(.calc-result-b) .calc-num { color: var(--coral); }
.calc-how { background: #fff; }
.calc-p + .calc-p { margin-top: 14px; }
.calc-formulas { margin-top: 28px; }
.calc-formulas code { font-family: var(--f-disp); font-weight: 700; font-size: 15px; color: var(--ink); background: none; }
.calc-example { margin-top: 22px; padding: 20px 22px; border-radius: 20px; background: var(--blue-ice); font-size: 15.5px; line-height: 1.7; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .calc-num { transition: color .3s; }
}
@media (max-width: 899px) {
  .calc-grid { grid-template-columns: 1fr; }
}

/* Wishes (1.0.4): cool-off list. Renders only when the content file has a `wish` block. */
.mm-wish { background: linear-gradient(170deg, #fff, #f1eeff); }
.mm-new { display: inline-block; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px; background: #ece8ff; color: #6b55d9; font-family: var(--f-disp); font-weight: 800; font-size: 13px; }
.mm-seg { display: inline-flex; gap: 2px; margin-top: 24px; padding: 4px; border-radius: 999px; background: var(--surface-gray); }
.mm-seg span { min-height: 40px; display: grid; place-items: center; padding: 0 18px; border-radius: 999px; color: var(--ink-2); font-family: var(--f-disp); font-weight: 800; font-size: 14.5px; }
.mm-seg span.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgb(30 75 122 / .12); }
.mm-wish-note { margin-top: 18px; font-size: 13.5px; color: var(--ink-3); line-height: 1.6; }