/* Model Citizens for Business (/business/) and the partner order pages (/p/<slug>/). Redesigned 28 Oct 2026 to
   palette A ("Cinema everywhere"): loads after /brand.css and uses its tokens, stage hero and motion kit. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; }
body { background: var(--mc-paper); color: var(--mc-ink); font: 16.5px/1.6 var(--mc-sans); -webkit-font-smoothing: antialiased; }
section[id] { scroll-margin-top: 16px; }
a { color: var(--mc-accent-text); }
img { max-width: 100%; display: block; }
.wrap { max-width: var(--mc-wrap); margin: 0 auto; padding-inline: var(--mc-gutter); }
h2, h3 { font-family: var(--mc-serif); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.9rem); line-height: 1.06; }
h3 { font-size: 1.3rem; line-height: 1.2; }
p { margin: 0; }
.on-dark { color: var(--mc-stage-ink); }
.muted { color: var(--mc-muted); } .small { font-size: .9rem; } .mono { font-family: var(--mc-mono); font-size: .88em; }
.sec { padding-block: clamp(52px, 8vw, 96px); }
.tint { background: var(--mc-tint); }
.head { display: grid; gap: 10px; max-width: 720px; margin-bottom: 30px; }

/* header */
header.top { border-bottom: 1px solid var(--mc-line); background: var(--mc-paper); }
header.top.dark { background: var(--mc-stage); border-color: var(--mc-stage-line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand img { height: 30px; width: auto; }
.brand span { font: 500 .72rem var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mc-muted); padding-top: 4px; }
.dark .brand span { color: var(--mc-stage-muted); }
header.top nav { display: flex; gap: 20px; align-items: center; font-weight: 500; font-size: .94rem; flex-wrap: wrap; }
header.top nav a:not(.mc-btn) { color: var(--mc-stage-muted); text-decoration: none; }
header.top nav a:not(.mc-btn):hover { color: var(--mc-stage-ink); }
@media (max-width: 760px) { header.top nav a:not(.mc-btn) { display: none; } }

/* hero tabs + wipe */
.vtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.vtabs button { appearance: none; cursor: pointer; border: 1px solid var(--mc-stage-line); background: transparent; color: var(--mc-stage-muted);
  font: 600 .88rem var(--mc-sans); padding: 8px 15px; border-radius: 999px; transition: background .15s, color .15s; }
.vtabs button:hover { color: var(--mc-stage-ink); }
.vtabs button[aria-selected="true"] { background: var(--mc-stage-ink); color: var(--mc-stage); border-color: var(--mc-stage-ink); }
.mc-stage-art .mc-wipe { max-width: 460px; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.mc-wipe img { transition: opacity .35s; }
.mc-wipe.swap img { opacity: 0; }
.art-cap { font: 500 .68rem var(--mc-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mc-stage-muted); margin-top: 10px; }
.mc-wipe.soon .after { display: none; }
.mc-wipe.soon::after { display: none; }
/* "pair": the portrait is its own picture, shown whole; their photo sits on it as a small card (no slider) */
.mc-wipe.pair .after { clip-path: none; object-position: center top; }
.mc-wipe.pair::after, .mc-wipe.pair input { display: none; }
.mc-wipe.pair .before { inset: auto auto 14px 14px; width: 38%; height: auto; aspect-ratio: 4 / 5; z-index: 2; border-radius: 12px;
  border: 3px solid #fff; box-shadow: 0 18px 40px -14px rgba(0,0,0,.75); transform: rotate(-3deg); }
.mc-wipe.pair .tag.l { top: auto; bottom: calc(14px + 38% + 10px); z-index: 3; }

/* see your page demo */
.demo { display: grid; grid-template-columns: 1fr 360px; gap: clamp(28px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .demo { grid-template-columns: minmax(0, 1fr); } .phone { justify-self: center; } }   /* minmax: the 340px phone mock no longer widens the page on 320px phones */
.demo-copy { display: grid; gap: 16px; justify-items: start; }
.demo-copy .mc-lede { color: var(--mc-muted); }
.demo-field { display: grid; gap: 6px; font-weight: 600; font-size: .93rem; width: 100%; max-width: 420px; }
.demo-field input { font: 400 1.15rem var(--mc-sans); padding: 14px 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-block; border: 1px solid var(--mc-line); background: var(--mc-card); border-radius: 999px; padding: 8px 15px; font-weight: 600; font-size: .9rem; }
.chips input:checked + span { background: var(--mc-ink); color: var(--mc-paper); border-color: var(--mc-ink); }
.chips input:focus-visible + span { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.phone { width: 340px; max-width: 100%; border-radius: 42px; background: #0A0B0F; padding: 12px; box-shadow: 0 50px 90px -40px rgba(22,21,27,.55); }
.phone-in { background: var(--mc-paper); border-radius: 32px; overflow: hidden; display: grid; gap: 12px; padding: 0 0 18px; min-height: 560px; align-content: start; }
.pp-top { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--mc-line); font: 500 .58rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); }
.pp-top img { height: 18px; width: auto; }
.pp-top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-hero { padding: 6px 16px 0; display: grid; gap: 6px; }
.pp-from { font: 500 .6rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-muted); }
.pp-from b { color: var(--mc-ink); font-weight: 500; }
.pp-hero h3 { font-size: 1.7rem; line-height: 1.05; }
.pp-styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 16px; }
.pp-styles figure { margin: 0; display: grid; gap: 4px; }
.pp-styles img, .pp-styles .ph { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 8px; background: var(--mc-tint); border: 1px solid var(--mc-line); }
.pp-styles figure:first-child img, .pp-styles figure:first-child .ph { outline: 2px solid var(--mc-button); outline-offset: 1px; }
.pp-styles figcaption { font-size: .66rem; font-weight: 600; text-align: center; }
.pp-prod { display: grid; gap: 6px; padding: 0 16px; }
.pp-prod div { display: flex; justify-content: space-between; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 10px; padding: 8px 10px; font-size: .78rem; font-weight: 600; }
.pp-prod div:first-child { border-color: var(--mc-button); }
.pp-btn { margin: 4px 16px 0; background: var(--mc-button); color: #fff; text-align: center; border-radius: 999px; padding: 11px; font-weight: 600; font-size: .86rem; }
.pp-fine { text-align: center; font-size: .66rem; color: var(--mc-muted); }
.flash { animation: flash .5s; }
@keyframes flash { from { background: rgba(255,90,60,.18); } }

/* verticals */
.verticals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 820px) { .verticals { grid-template-columns: 1fr; } }
.v { background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 20px; overflow: hidden; display: grid; grid-template-columns: 38% 1fr; }
@media (max-width: 520px) { .v { grid-template-columns: 1fr; } .v-img { aspect-ratio: 16 / 10 !important; } }
.v-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; min-height: 100%; aspect-ratio: 4 / 5; }
.v-soon { display: grid; place-items: center; align-content: center; gap: 10px; background: var(--mc-tint); color: var(--mc-muted); text-align: center; padding: 16px; font-size: .8rem; }
.v-soon svg { width: 54px; height: 54px; fill: none; stroke: var(--mc-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-trio { display: grid; grid-template-rows: repeat(3, 1fr); gap: 2px; background: var(--mc-line); }
.v-trio img { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.v-body { padding: clamp(18px, 3vw, 26px); display: grid; gap: 10px; align-content: start; }
.v .ico { width: 34px; height: 34px; fill: none; stroke: var(--mc-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v p { color: var(--mc-muted); font-size: .96rem; }
.v .gentle { border-left: 2px solid var(--mc-line); padding-left: 12px; }
.v .gentle b { color: var(--mc-ink); }

/* calculator */
.earn { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: center; padding-block: clamp(52px, 8vw, 96px); }
@media (max-width: 860px) { .earn { grid-template-columns: 1fr; } }
.earn > div:first-child { display: grid; gap: 14px; }
.calc { background: var(--mc-stage-2); border: 1px solid var(--mc-stage-line); border-radius: 22px; padding: clamp(18px, 3.5vw, 30px); display: grid; gap: 18px; }
.calc label { display: grid; gap: 8px; font-weight: 600; font-size: .93rem; color: var(--mc-stage-ink); }
.calc output { float: right; font: 500 .9rem var(--mc-mono); color: var(--mc-accent); }
.calc input[type=range] { width: 100%; accent-color: var(--mc-accent); }
.calc select, .calc input[type=number] { background: var(--mc-stage) !important; color: var(--mc-stage-ink) !important; border-color: var(--mc-stage-line) !important; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: var(--mc-stage); border: 1px solid var(--mc-stage-line); border-radius: 999px; padding: 4px; }
.seg label { position: relative; text-align: center; cursor: pointer; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span { display: block; padding: 9px 8px; border-radius: 999px; font-size: .86rem; color: var(--mc-stage-muted); }
.seg input:checked + span { background: var(--mc-stage-ink); color: var(--mc-stage); }
.seg input:focus-visible + span { outline: 2px solid var(--mc-accent); }
.result { display: grid; gap: 4px; border-top: 1px solid var(--mc-stage-line); padding-top: 16px; color: var(--mc-stage-muted); }
.result b { font: 400 clamp(2.4rem, 6vw, 3.4rem)/1 var(--mc-serif); color: var(--mc-stage-ink); }
.result b small { font: 500 .9rem var(--mc-sans); color: var(--mc-stage-muted); }

/* steps + counter card */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 34px; display: grid; gap: 0; max-width: 780px; }
.steps li { counter-increment: s; position: relative; padding: 16px 0 16px 58px; border-top: 1px solid var(--mc-line); color: var(--mc-muted); }
.steps li b { color: var(--mc-ink); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 17px; font: 500 .8rem var(--mc-mono); color: var(--mc-accent-text); letter-spacing: .1em; }
.qrcard { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 460px; background: var(--mc-card); border: 1px solid var(--mc-line);
  border-radius: 18px; padding: 20px 22px; box-shadow: 0 30px 50px -36px rgba(22,21,27,.5); transform: rotate(-1.2deg); }
.qr-l { display: grid; gap: 6px; }
.qr-l b { font: 400 1.5rem/1.1 var(--mc-serif); }
.qr-l span:last-child { font-size: .86rem; color: var(--mc-muted); }
.qr-r { width: 96px; height: 96px; flex: none; color: var(--mc-ink); }

/* pricing */
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
@media (max-width: 640px) { .modes { grid-template-columns: 1fr; } }
.mode { background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 16px; padding: 20px 22px; display: grid; gap: 6px; }
.mode p { color: var(--mc-muted); }
.table-wrap { overflow-x: auto; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 16px; margin-bottom: 14px; }
.prices { width: 100%; border-collapse: collapse; min-width: 520px; }
.prices th, .prices td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--mc-line); vertical-align: top; }
.prices thead th { font: 500 .7rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-muted); }
.prices tbody tr:last-child > * { border-bottom: 0; }
.prices tbody th { font-weight: 600; }
.prices small { display: block; font-weight: 400; color: var(--mc-muted); font-size: .86rem; }
.prices td { font-variant-numeric: tabular-nums; }
.cols { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; max-width: 900px; }
.cols li { color: var(--mc-muted); border-top: 1px solid var(--mc-line); padding-top: 12px; }
.cols b { color: var(--mc-ink); display: block; }
@media (max-width: 640px) { .cols { grid-template-columns: 1fr; } }

/* join form (on the dark stage) */
.join { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 56px); align-items: start; padding-block: clamp(52px, 8vw, 96px); }
.join > div:first-child { display: grid; gap: 14px; }
@media (max-width: 820px) { .join { grid-template-columns: 1fr; } }
.card { background: var(--mc-card); color: var(--mc-ink); border: 1px solid var(--mc-line); border-radius: 20px; padding: clamp(18px, 3.5vw, 28px); display: grid; gap: 14px; min-width: 0; color-scheme: light; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-weight: 600; font-size: .93rem; min-width: 0; }
input, select, textarea { font: 400 1rem var(--mc-sans); color: var(--mc-ink); background: #fff; border: 1px solid #D9CDB8; border-radius: 10px; padding: 11px 12px; width: 100%; min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mc-accent); outline-offset: 1px; border-color: transparent; }
fieldset.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
fieldset.choice legend { font-weight: 600; font-size: .93rem; margin-bottom: 6px; padding: 0; }
fieldset.choice label, label.tick { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
fieldset.choice input, label.tick input { width: auto; margin-top: 4px; accent-color: var(--mc-button); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.msg { font-size: .93rem; }
.msg.good { color: var(--mc-good); } .msg.bad { color: #B3261E; }
.fine { font-size: .82rem; color: var(--mc-muted); }

footer { border-top: 1px solid var(--mc-line); padding-block: 26px 40px; font-size: .88rem; color: var(--mc-muted); }
footer.dark { background: var(--mc-stage); border-color: var(--mc-stage-line); color: var(--mc-stage-muted); }
footer .wrap { display: grid; gap: 6px; }
footer a { color: inherit; }

/* ---- partner order page (/p/<slug>/) */
.p-stage .mc-stage-in { grid-template-columns: 1fr; padding-block: clamp(32px, 6vw, 60px); }
.p-stage h1 { font-size: clamp(2.3rem, 6vw, 4rem); }
.p-logo { height: 46px; width: auto; max-width: 180px; object-fit: contain; background: #fff; border-radius: 10px; padding: 6px; }
.p-from { font: 500 .74rem var(--mc-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--mc-stage-muted); }
.p-from b { color: var(--mc-stage-ink); font-weight: 500; }
.p-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; padding-block: 28px 60px; }
@media (max-width: 900px) { .p-layout { grid-template-columns: 1fr; } }
.p-section { display: grid; gap: 12px; padding-block: 8px 18px; }
.p-section .mc-eyebrow { color: var(--mc-accent-text); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.opts.styles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.opt { position: relative; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--mc-line); border-radius: 14px; background: #fff; cursor: pointer; font-weight: 400; transition: border-color .15s, transform .15s; }
.opt:hover { transform: translateY(-2px); }
.opt.pic { padding: 8px; }
.opt.pic img, .opt.pic .ph { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 10px; background: var(--mc-tint); }
.opt.pic .ph { display: grid; place-items: center; }
.opt.pic .ph svg { width: 38px; height: 38px; fill: none; stroke: var(--mc-ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.opt.pic b { text-align: center; font-size: .9rem; padding-top: 2px; }
.opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opt b { font-weight: 600; }
.opt small { color: var(--mc-muted); font-size: .85rem; }
.opt .price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--mc-ink); }
.opt:has(input:checked) { border-color: var(--mc-button); box-shadow: 0 0 0 1px var(--mc-button); }
.opt:has(input:focus-visible) { outline: 2px solid var(--mc-accent); outline-offset: 2px; }
.summary { position: sticky; top: 16px; background: var(--mc-stage); color: var(--mc-stage-ink); border-radius: 20px; padding: 20px; display: grid; gap: 12px; color-scheme: dark; }
.summary .sum-img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 12px; background: var(--mc-stage-2); }
.summary dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .92rem; }
.summary dt { color: var(--mc-stage-muted); }
.summary dd { margin: 0; text-align: right; font-weight: 600; }
.summary .total { font: 400 1.8rem var(--mc-serif); text-align: right; }
.summary .fine { color: var(--mc-stage-muted); }
/* phones: the summary becomes a slim bar fixed to the bottom of the screen */
@media (max-width: 900px) {
  .summary { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); top: auto; z-index: 20; padding: 10px 14px;
    grid-template-columns: 44px 1fr auto; gap: 2px 12px; align-items: center; border-radius: 16px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.55); }
  .summary .sum-img { grid-row: span 2; width: 44px; height: 54px; border-radius: 8px; }
  .summary .mc-eyebrow, .summary dl dt, .summary .fine { display: none; }
  .summary dl { display: flex; gap: 6px; font-size: .84rem; min-width: 0; overflow: hidden; }
  .summary dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
  .summary dl dd:nth-of-type(2)::before { content: "· "; color: var(--mc-stage-muted); }
  .summary dl dd:nth-of-type(3) { display: none; }
  .summary .total { grid-row: span 2; font-size: 1.3rem; }
  .p-layout { padding-bottom: 110px; }
}
.p-state { padding-block: 60px; max-width: 640px; display: grid; gap: 12px; }

/* Homes card: the painting, with the listing photo it came from as a small card */
.v-pair { position: relative; overflow: hidden; }
.v-pair > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v-pair .v-photo { position: absolute; left: 12px; bottom: 12px; width: 36%; height: auto; aspect-ratio: 4 / 5; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(0,0,0,.6); transform: rotate(-3deg); }
/* two-ways pricing: table captions and the partner terms */
.prices caption.cap { caption-side: top; text-align: left; padding: 14px 18px 0; font: 500 .7rem var(--mc-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mc-accent-text); }
.mode .mc-eyebrow { color: var(--mc-accent-text); }
details.terms { margin-top: 22px; background: var(--mc-card); border: 1px solid var(--mc-line); border-radius: 14px; padding: 14px 18px; max-width: 820px; }
details.terms summary { cursor: pointer; font-weight: 600; }
details.terms ul { margin: 12px 0 2px; padding-left: 18px; color: var(--mc-muted); display: grid; gap: 6px; font-size: .94rem; }

/* Partners hub strip: businesses, photographers, creators */
.hub { padding-block: 26px 0; }
.hub-in { display: grid; gap: 12px; }
.hub-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 760px) { .hub-cards { grid-template-columns: 1fr; } }
.hub-card { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--mc-line); border-radius: 16px; background: var(--mc-card); color: var(--mc-ink); text-decoration: none; transition: transform .2s, border-color .2s; }
.hub-card:hover { transform: translateY(-3px); border-color: var(--mc-ink); }
.hub-card b { font: 400 1.25rem var(--mc-serif); }
.hub-card span { color: var(--mc-muted); font-size: .92rem; }
.hub-card.is-here { border-color: var(--mc-button); box-shadow: 0 0 0 1px var(--mc-button); }

/* Meet Iris */
.iris .mc-stage-copy h2 em { color: var(--mc-accent); }
.iris-art { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.iris-art img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; box-shadow: 0 40px 70px -40px rgba(0,0,0,.8); }
.iris-art img:last-child { transform: translateY(24px); }
@media (max-width: 820px) { .iris-art img:last-child { transform: none; } }

/* the opportunity in one look, straight under the hero */
.earn-strip { background: var(--mc-stage-2); color: var(--mc-stage-ink); border-top: 1px solid var(--mc-stage-line); }
.earn-strip-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 22px; align-items: start; padding-block: 28px; }
.earn-strip-in .mc-btn { align-self: center; }
@media (max-width: 960px) { .earn-strip-in { grid-template-columns: 1fr; gap: 16px; } .earn-strip-in .mc-btn { justify-self: start; } }
.es { display: grid; gap: 4px; }
.es-n { font: 500 .7rem var(--mc-mono); letter-spacing: .14em; color: var(--mc-accent); }
.es b { font: 400 1.2rem var(--mc-serif); }
.es span:last-child { color: var(--mc-stage-muted); font-size: .92rem; }
.es span b { font: 600 .92rem var(--mc-sans); color: var(--mc-stage-ink); }

/* "Where it fits": the moment and the money on each card */
.v .moment, .v .worth { color: var(--mc-muted); font-size: .95rem; }
.v .moment b, .v .worth b { color: var(--mc-ink); }
.v .worth { border-top: 1px solid var(--mc-line); padding-top: 10px; }

/* Ways to earn: a line icon on each card; Photographers is the big one, with a card, a poster and a magazine */
.hub-card { align-content: center; gap: 8px; padding: 24px 24px 26px; }
.hub-card:not(.hub-feature) b { font-size: 1.5rem; }
.hub-ico { width: 56px; height: 56px; padding: 11px; border: 1px solid var(--mc-line); border-radius: 50%; background: var(--mc-paper, #F7F2E9); fill: none; stroke: var(--mc-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.hub-feature { background: var(--mc-stage, #0B0B0F); color: #fff; border-color: transparent; padding-top: 0; overflow: hidden; }
.hub-feature .hub-ico { stroke: #fff; background: transparent; border-color: rgba(255,255,255,.25); width: 44px; height: 44px; padding: 8px; }
.hub-feature { align-content: start; }
.hub-feature span { color: rgba(255,255,255,.78); }
.hub-feature b { font-size: 1.6rem; }
.hub-feature:hover { border-color: var(--mc-accent); }
.hub-trio { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin: 0 -20px 10px; padding: 22px 20px 0; height: 210px; background: radial-gradient(60% 80% at 50% 100%, rgba(255,90,60,.28), transparent 70%); }
.hub-trio img { width: 30%; max-width: 128px; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 8px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); transition: transform .4s ease; }
.hub-trio img:nth-child(1) { transform: rotate(-8deg) translate(12px, -4px); }
.hub-trio img:nth-child(2) { position: relative; z-index: 1; width: 36%; max-width: 150px; transform: translateY(-12px); }
.hub-trio img:nth-child(3) { transform: rotate(8deg) translate(-12px, -4px); border-radius: 3px 8px 8px 3px; }
.hub-feature:hover .hub-trio img:nth-child(1) { transform: rotate(-12deg) translate(2px, -8px); }
.hub-feature:hover .hub-trio img:nth-child(3) { transform: rotate(12deg) translate(-2px, -8px); }
/* All three cards get the dark stage, a fan of three pictures and the same coral button (owner, 30 Oct) */
.hub-go { justify-self: start; align-self: end; margin-top: 10px; font-style: normal; font-weight: 600; font-size: .98rem; color: #fff; background: var(--mc-button);
  padding: 11px 20px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(226,71,42,.8); transition: transform .2s, box-shadow .2s; }
.hub-feature:hover .hub-go { transform: translateX(3px); box-shadow: 0 14px 28px -10px rgba(226,71,42,.95); }
.hub-feature { position: relative; grid-template-rows: auto auto auto 1fr auto; }
.hub-feature.is-here { box-shadow: 0 0 0 2px var(--mc-button); }
.hub-here { position: absolute; top: 12px; right: 12px; z-index: 2; font: 600 .7rem var(--mc-sans); letter-spacing: .08em; text-transform: uppercase;
  color: #fff !important; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); padding: 5px 10px; border-radius: 999px; }
@media (max-width: 760px) { .hub-trio { height: 190px; } }

/* Toolkits (29 Oct rework): the hero fan of three toolkits, then three cards as the page's main choice */
.tk-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; padding-block: 10px 30px; }
.tk-tile { position: relative; display: block; border-radius: 18px; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 40px 70px -40px rgba(0,0,0,.9); transition: transform .35s ease; }
.tk-tile img { width: 100%; aspect-ratio: 3 / 4.4; object-fit: cover; }
.tk-tile span { position: absolute; left: 10px; right: 10px; bottom: 10px; font: 600 .82rem/1.2 var(--mc-sans); background: rgba(10,11,15,.72); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 7px 10px; text-align: center; backdrop-filter: blur(6px); }
.tk-tile.t1 { transform: rotate(-4deg) translateY(10px); }
.tk-tile.t2 { transform: translateY(-14px); z-index: 1; }
.tk-tile.t3 { transform: rotate(4deg) translateY(10px); }
.tk-tile:hover { transform: translateY(-20px) rotate(0); z-index: 2; }
@media (max-width: 560px) { .tk-fan { gap: 8px; padding-bottom: 16px; } .tk-tile span { font-size: .68rem; padding: 6px 6px; left: 6px; right: 6px; bottom: 6px; } }
@media (prefers-reduced-motion: reduce) { .tk-tile { transition: none; } }

.tk .head h2 em { color: var(--mc-accent-text); padding-right: .14em; margin-right: -.14em; }
.tk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 960px) { .tk-cards { grid-template-columns: 1fr; max-width: 560px; } }
.tk-card { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 24px; border-radius: 20px; overflow: hidden; background: var(--mc-stage); color: var(--mc-stage-ink); min-width: 0; transition: transform .25s, box-shadow .25s; }
.tk-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--mc-accent), 0 30px 50px -30px rgba(10,11,15,.7); }
.tk-card .hub-trio { margin: 0 -24px 6px; }
.tk-n { font: 500 .72rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-accent); }
.tk-card h3 { font-size: 1.55rem; line-height: 1.12; }
.tk-for { color: var(--mc-stage-muted); font-size: .95rem; }
.tk-h { font: 500 .68rem var(--mc-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mc-stage-muted); margin-top: 6px; }
.tk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .96rem; }
.tk-list li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; }
.tk-list li::before { content: "✓"; color: var(--mc-accent); }
.tk-earn { display: grid; gap: 4px; margin-top: 6px; padding: 14px 16px; border: 1px solid var(--mc-stage-line); border-radius: 14px; background: var(--mc-stage-2); }
.tk-earn .tk-h { margin: 0; }
.tk-earn p { font-size: .96rem; color: var(--mc-stage-ink); }
.tk-earn p b { color: var(--mc-accent); font-weight: 700; }
.tk-card .mc-btn { margin-top: auto; align-self: stretch; }
.tk-fine { color: var(--mc-stage-muted); text-align: center; font-size: .85rem; }
.tk-biz .mc-stage-copy h2 em { color: var(--mc-accent); }
.join-alt { color: var(--mc-stage-muted); font-size: .95rem; }
.join-alt a { color: var(--mc-stage-ink); }
.join h2 em { color: var(--mc-accent); }
@media (min-width: 821px) { .tk-hero .mc-stage-in { grid-template-columns: 1.05fr 1fr; } }

/* 30 Oct rework: Business tools hero + the machines */
.bt-hero-art { position: relative; }
.bt-show { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); background: #1A1B22; }
.bt-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.bt-slide.on { opacity: 1; }
.bt-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1); transition: transform 6s ease-out; }
.bt-slide.on img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .bt-slide img { transition: none; } .bt-slide.on img { transform: none; } }
.bt-tag { position: absolute; left: 16px; bottom: 16px; background: #fff; color: var(--mc-ink); border-radius: 12px; padding: 10px 14px; font-size: .86rem; box-shadow: 0 12px 30px -14px rgba(0,0,0,.6); }
.bt-tag b { display: block; font-size: 1.02rem; }
.bt-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 18px; }
.bt-tabs button { background: #fff; border: 1px solid var(--mc-line); border-radius: 999px; padding: 9px 15px; font: 600 .92rem var(--mc-sans, inherit); color: var(--mc-ink); cursor: pointer; }
.bt-tabs button[aria-selected=true] { background: var(--mc-ink); color: #fff; border-color: var(--mc-ink); }
.bt-machine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); background: #fff; border: 1px solid var(--mc-line); border-radius: 22px; padding: clamp(18px, 3vw, 30px); align-items: start; }
.bt-who { font: 500 .7rem var(--mc-mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: var(--mc-muted); }
.bt-copy h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 6px 0 8px; }
.bt-copy > p { color: var(--mc-muted); }
.bt-flow { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; }
.bt-flow li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: .95rem; }
.bt-flow b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--mc-accent); color: #fff; font-size: .82rem; }
.bt-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.bt-money div { background: var(--mc-paper, #F6F3EC); border-radius: 12px; padding: 10px 12px; }
.bt-money span { display: block; font-size: .76rem; color: var(--mc-muted); }
.bt-money b { font: 400 1.35rem/1.15 var(--mc-serif, serif); }
.bt-money .keep b { color: var(--mc-accent-text, var(--mc-accent)); }
.bt-how { font-size: .9rem; background: var(--mc-paper, #F6F3EC); border-radius: 10px; padding: 10px 12px; margin: 0 0 16px; }
.bt-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-pics > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.bt-pics .bt-ba { grid-column: 1 / -1; aspect-ratio: 4 / 3; border-radius: 14px; max-width: none; }
@media (max-width: 860px) { .bt-machine { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .bt-money { grid-template-columns: 1fr; } }

/* Dots under the header's gift slideshow (same look as the home page). */
.mc-dots { display: flex; justify-content: center; gap: 4px; margin-top: 8px; }
.mc-dots button { appearance: none; border: 0; background: none; padding: 10px 6px; cursor: pointer; display: grid; place-items: center; }
.mc-dots button span { display: block; width: 9px; height: 9px; border-radius: 50%; background: #fff; opacity: .3; transition: width .3s ease, opacity .3s ease, border-radius .3s ease; }
.mc-dots button[aria-selected="true"] span { width: 26px; border-radius: 99px; opacity: .9; }
.mc-dots button:focus-visible { outline: 3px solid var(--mc-accent); outline-offset: 2px; border-radius: 8px; }

.calc-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); margin-bottom: 6px; }
.calc-mode label { cursor: pointer; }
.calc-mode input { position: absolute; opacity: 0; pointer-events: none; }
.calc-mode span { display: block; text-align: center; padding: 10px 12px; border-radius: 999px; font-weight: 600; font-size: .9rem; color: rgba(255,255,255,.7); transition: background .2s, color .2s; }
.calc-mode input:checked + span { background: #FF5A3C; color: #fff; }
.calc-mode input:focus-visible + span { outline: 3px solid #FF5A3C; outline-offset: 2px; }

/* Partner pricing (30 Oct 2026, owner: "boring as hell"): two bold ways to earn, then gift cards with what you keep. */
.pw-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 6px 0 26px; }
.pw-mode { display: grid; gap: 10px; align-content: start; padding: clamp(22px, 3vw, 32px); border-radius: 24px; }
.pw-mode h3 { font: 400 clamp(1.8rem, 3.2vw, 2.4rem)/1.05 var(--mc-serif, Georgia, serif); margin: 0; }
.pw-mode p { margin: 0; line-height: 1.55; }
.pw-k { font: 500 .7rem/1 var(--mc-mono, monospace); letter-spacing: .14em; text-transform: uppercase; }
.pw-a { background: #16151B; color: #F4EFE6; box-shadow: 0 30px 60px -36px rgba(22,21,27,.8); }
.pw-a .pw-k { color: #F6E3B8; } .pw-a p { color: #B9B2A5; } .pw-a .mc-btn { justify-self: start; margin-top: 6px; }
.pw-b { background: linear-gradient(135deg, #FF5A3C, #E0462C); color: #fff; box-shadow: 0 30px 60px -36px rgba(224,70,44,.8); }
.pw-b .pw-k { color: #FFE2D9; } .pw-b p { color: #FFE9E2; }
.pw-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.25); }
.pw-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.18); font-size: .9rem; }
.pw-list em { font-style: normal; color: #FFE2D9; } .pw-list b { font-weight: 700; min-width: 3.4em; text-align: right; }
.pp-h { font: 400 1.5rem/1.2 var(--mc-serif, Georgia, serif); margin: 0 0 12px; }
.pp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.pp-card { display: grid; grid-template-rows: auto 1fr; border-radius: 20px; overflow: hidden; background: #FFFDF8; border: 1px solid var(--mc-line, #E3DCCD);
  box-shadow: 0 18px 34px -28px rgba(22,21,27,.45); transition: transform .25s ease, box-shadow .25s ease; }
.pp-card:hover { transform: translateY(-5px); box-shadow: 0 28px 44px -28px rgba(22,21,27,.6); }
.pp-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.pp-card > div { display: grid; gap: 6px; padding: 14px 16px 16px; align-content: start; }
.pp-card b { font-size: 1rem; line-height: 1.25; } .pp-card small { color: var(--mc-muted, #6b6559); font-size: .8rem; line-height: 1.4; }
.pp-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 0; }
.pp-card dl div { background: #F4EFE6; border-radius: 10px; padding: 6px 8px; } .pp-card dt { font-size: .68rem; color: var(--mc-muted, #6b6559); } .pp-card dd { margin: 0; font-weight: 600; }
.pp-keep { margin: 4px 0 0; font-size: .86rem; color: var(--mc-ink, #16151B); } .pp-keep strong { display: block; font: 400 2rem/1 var(--mc-serif, Georgia, serif); color: #E0462C; }
.pp-card.best { border-color: #E0462C; box-shadow: 0 0 0 2px rgba(224,70,44,.35), 0 28px 44px -28px rgba(224,70,44,.6); position: relative; }
.pp-card.best::before { content: "Best seller"; position: absolute; top: 10px; left: 10px; background: #E0462C; color: #fff; font: 600 .68rem/1 var(--mc-sans, sans-serif); padding: 6px 9px; border-radius: 999px; }
@media (max-width: 1000px) { .pp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pw-modes { grid-template-columns: 1fr; } .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .pp-grid { grid-template-columns: 1fr; } }