/* Murudo Weddings — the public face: landing, sign-in, vendors, legal and error pages.
   Loaded after app.css. Direction: docs/design.md ("fine stationery, not software").
   White and ivory pages, the invitation on its envelope as the hero, the owner's
   watercolour flowers at the edges, light serif headlines, slow soft motion.
   Everything here is prefixed mk- so it never fights the foundation's older rules. */

.mk, .mk-auth {
  --mk-ink: #2A2028;
  --mk-soft: #62566A;
  --mk-faint: #8E8292;
  --mk-line: #ECE6EC;
  --mk-gold: #8A6A0C;
  --mk-max: 1180px;
  --mk-gut: 22px;
  --mk-paper-shadow: 0 1px 1px rgba(42, 32, 40, .06), 0 12px 26px -14px rgba(42, 32, 40, .24), 0 36px 60px -36px rgba(42, 32, 40, .30);
  --mk-float-shadow: 0 0 0 1px rgba(42, 32, 40, .05), 0 18px 44px -20px rgba(42, 32, 40, .26);
  color: var(--mk-ink);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
.mk ::selection, .mk-auth ::selection { background: #EAD9EC; }
.mk-wrap { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-gut); }
@media (max-width: 380px) { .mk, .mk-auth { --mk-gut: 18px; } }
@media (min-width: 760px) { .mk, .mk-auth { --mk-gut: 36px; } }
@media (min-width: 1100px) { .mk, .mk-auth { --mk-gut: 44px; } }
.mk-skip { position: absolute; top: -60px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--mk-ink); color: #fff; font-weight: 700; font-size: 14px; }
.mk-skip:focus { top: 12px; }

/* Flowers are always decoration: never clickable, never selectable. */
.mk-fl { display: block; pointer-events: none; user-select: none; -webkit-user-select: none; }
.mk-fl img { width: 100%; height: auto; }

/* Type */
.mk-eyebrow { display: inline-block; color: var(--mk-gold); font: 700 11px/1.5 var(--font-sans); letter-spacing: 2.4px; text-transform: uppercase; }
.mk-h2 { margin-top: 14px; color: var(--mk-ink); font: 300 clamp(36px, 9.6vw, 46px)/1.06 var(--font-serif); letter-spacing: -0.012em; text-wrap: balance; }
.mk-h2 em, .mk-hero h1 em { font-style: italic; }
.mk-nb { white-space: nowrap; }
.mk-lead { margin-top: 16px; color: var(--mk-soft); font-size: 16.5px; line-height: 1.65; text-wrap: pretty; }
.mk-lead a, .mk-link { color: var(--accent); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(139, 58, 139, .3); text-underline-offset: 4px; transition: text-decoration-color .2s var(--ease); }
.mk-lead a:hover, .mk-link:hover { text-decoration-color: currentColor; }
.mk-script { display: block; color: var(--accent); font: 400 40px/1 var(--font-script); }
.mk-note { color: var(--mk-soft); font: italic 300 18px/1.4 var(--font-serif); }
.mk-head { max-width: 660px; }
.mk-center { margin-inline: auto; text-align: center; }
@media (min-width: 900px) { .mk-h2 { font-size: clamp(46px, 4.5vw, 62px); line-height: 1.04; } .mk-lead { font-size: 17.5px; } }

/* Buttons on these pages keep the foundation's shape and gain a soft lift. */
.mk .btn, .mk-auth .btn { letter-spacing: .005em; box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset; }
.mk .btn:not(.ghost):not(.soft):not(.gold):not(.small), .mk-auth .btn:not(.ghost):not(.soft):not(.gold) { box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 10px 22px -12px rgba(139, 58, 139, .7); }
@media (hover: hover) { .mk .btn:not(.small):hover, .mk-auth .btn:hover { transform: translateY(-1px); } .mk .btn:active, .mk-auth .btn:active { transform: scale(.97); } }
.mk .btn.ghost, .mk-auth .btn.ghost { background: #F4EFF4; }
.mk .btn.ghost:hover, .mk-auth .btn.ghost:hover { background: #ECE4EC; }

/* ─── Header ───────────────────────────────────────────────────────────── */
.mk-top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid transparent; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.mk-top.is-stuck { border-bottom-color: var(--mk-line); box-shadow: 0 10px 30px -24px rgba(42, 32, 40, .4); }
.mk-top-in { display: flex; align-items: center; gap: 12px; height: 62px; }
.mk-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--mk-ink); font: 400 21px/1 var(--font-serif); letter-spacing: -0.005em; white-space: nowrap; }
.mk-logo:hover { text-decoration: none; }
.mk-logo img { width: 28px; height: auto; }
.mk-nav { display: none; }
.mk-nav a, .mk-signin { padding: 10px 14px; border-radius: 12px; color: var(--mk-ink); font: 500 14.5px/1 var(--font-sans); white-space: nowrap; transition: background .2s var(--ease), color .2s var(--ease); }
.mk-nav a:hover, .mk-signin:hover { background: #F6F1F6; text-decoration: none; }
.mk-nav a[aria-current] { color: var(--accent); }
.mk-top-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.mk-signin { display: none; }
.mk-top .btn.small { min-height: 40px; padding: 0 16px; border-radius: 13px; font-size: 13.5px; }
.mk-menu { position: static; }
.mk-menu > summary { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -8px; border-radius: 13px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.mk-menu > summary::-webkit-details-marker { display: none; }
.mk-burger { position: relative; display: block; width: 20px; height: 12px; }
.mk-burger i { position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: var(--mk-ink); transition: transform .3s var(--ease-out), top .3s var(--ease-out); }
.mk-burger i:first-child { top: 1px; }
.mk-burger i:last-child { top: 9px; }
.mk-menu[open] .mk-burger i:first-child { top: 5px; transform: rotate(45deg); }
.mk-menu[open] .mk-burger i:last-child { top: 5px; transform: rotate(-45deg); }
.mk-menu-panel { position: absolute; top: 100%; right: 0; left: 0; display: grid; padding: 6px var(--mk-gut) 20px; border-bottom: 1px solid var(--mk-line); background: #fff; box-shadow: 0 30px 40px -30px rgba(42, 32, 40, .35); animation: mk-menu-in .32s var(--ease-out) both; }
.mk-menu-panel a { padding: 15px 2px; border-top: 1px solid var(--mk-line); color: var(--mk-ink); font: 400 24px/1.2 var(--font-serif); }
.mk-menu-panel a:first-child { border-top: 0; }
.mk-menu-panel a:hover { color: var(--accent); text-decoration: none; }
@keyframes mk-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (min-width: 560px) { .mk-signin { display: inline-block; } }
@media (max-width: 420px) { .mk-top .mk-logo { gap: 7px; font-size: 18.5px; } .mk-top .mk-logo img { width: 25px; } .mk-top .btn.small { padding: 0 12px; font-size: 13px; } .mk-menu > summary { width: 38px; } }
@media (max-width: 339px) { .mk-top .btn.small { display: none; } }
@media (min-width: 900px) {
  .mk-top-in { gap: 20px; height: 76px; }
  .mk-logo { font-size: 25px; gap: 10px; }
  .mk-logo img { width: 32px; }
  .mk-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
  .mk-top-actions { margin-left: 8px; gap: 8px; }
  .mk-menu { display: none; }
}
.mk-page { display: block; }
.mk-flash { padding-top: 16px; }

/* ─── Footer ───────────────────────────────────────────────────────────── */
.mk-foot { padding: 12px 0 40px; background: #fff; color: var(--mk-soft); font-size: 14.5px; }
.mk-foot-orn { width: 180px; height: auto; margin: 0 auto 34px; }
.mk-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 20px; }
.mk-foot-brand { grid-column: 1 / -1; max-width: 340px; }
.mk-foot-brand p { margin-top: 12px; line-height: 1.6; }
.mk-foot-col h2 { margin-bottom: 10px; color: var(--mk-ink); font: 700 11px/1.5 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
.mk-foot-col a { display: block; padding: 6px 0; color: var(--mk-soft); }
.mk-foot-col a:hover, .mk-foot-fine a:hover { color: var(--accent); text-decoration: none; }
.mk-foot-fine { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--mk-line); font-size: 13px; }
.mk-foot-fine a { color: var(--mk-ink); font-weight: 500; }
@media (min-width: 820px) {
  .mk-foot { padding-bottom: 48px; }
  .mk-foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
  .mk-foot-brand { grid-column: auto; }
}

/* ─── The one action: email + button in a single well ──────────────────── */
.mk-start { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 470px; padding: 5px; border: 1px solid #DDD3DD; border-radius: 20px; background: #fff; box-shadow: 0 14px 30px -22px rgba(42, 32, 40, .45); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.mk-start:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 14px 30px -22px rgba(42, 32, 40, .45); }
.mk-start input[type=email] { flex: 1; min-width: 0; min-height: 48px; padding: 0 6px 0 14px; border: 0; border-radius: 14px; background: transparent; box-shadow: none; font-size: 16px; }
.mk-start input[type=email]:focus { border: 0; background: transparent; box-shadow: none; }
.mk-start .btn { flex: none; min-height: 48px; padding: 0 20px; border-radius: 15px; font-size: 15px; }
.mk-start-in .btn { min-width: 220px; }

@property --mk-la { syntax: "<color>"; inherits: true; initial-value: #DAC8E2; }
@property --mk-lb { syntax: "<color>"; inherits: true; initial-value: #CEB9D9; }

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.mk-hero { --w: clamp(196px, 55vw, 244px); position: relative; padding: 30px 0 0; overflow: hidden; overflow: clip; }
.mk-hero-grid { position: relative; z-index: 1; display: grid; gap: 34px; }
.mk-hero-copy { display: grid; justify-items: center; text-align: center; }
.mk-hero h1 { color: var(--mk-ink); font: 300 clamp(40px, 12.6vw, 56px)/1.0 var(--font-serif); letter-spacing: -0.018em; }
.mk-hero h1 span, .mk-hero h1 em { display: block; white-space: nowrap; }
.mk-tracked { margin-top: 18px; color: var(--mk-gold); font: 700 10.5px/1.9 var(--font-sans); letter-spacing: 2.3px; text-transform: uppercase; }
.mk-tracked span { white-space: nowrap; }
.mk-tracked i { margin: 0 .7em; color: var(--champagne); font-style: normal; }
@media (max-width: 519px) { .mk-tracked i:last-of-type { display: block; height: 0; margin: 0; overflow: hidden; } }
.mk-hero .mk-start, .mk-hero .mk-start-in { margin-top: 26px; }
.mk-hero .mk-note { margin-top: 14px; }
.mk-hero-stage { position: relative; display: grid; justify-items: center; padding: 6px 0 44px; }
.mk-hero-jac { position: absolute; right: -30vw; bottom: calc(var(--w) * 1.3 + 44px); z-index: 0; width: 74vw; max-width: 380px; transform: scaleX(-1); }

/* The invitation resting on its envelope. Sizes hang off --w (the envelope's width). */
.mk-envl { position: relative; width: calc(var(--w) * 1.12); height: calc(var(--w) * 1.93); --mk-la: #DAC8E2; --mk-lb: #CEB9D9; --mk-liner: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 10px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 10px), linear-gradient(var(--mk-la), var(--mk-lb)); transition: --mk-la 1.4s var(--ease-soft), --mk-lb 1.4s var(--ease-soft); }
.mk-envl[data-tone="blush"] { --mk-la: #F1D8D0; --mk-lb: #E7C6BD; }
.mk-envl[data-tone="sage"] { --mk-la: #C9D6C3; --mk-lb: #B7C7B0; }
.mk-envl[data-tone="coral"] { --mk-la: #E6B3A0; --mk-lb: #DA9C87; }
.mk-envl-env { position: absolute; top: calc(var(--w) * .5); left: 0; width: var(--w); height: calc(var(--w) * 1.36); transform: rotate(-4deg); transform-origin: 50% 60%; filter: drop-shadow(0 1px 1px rgba(42, 32, 40, .10)) drop-shadow(0 22px 30px rgba(42, 32, 40, .16)); }
.mk-envl-env > i { position: absolute; display: block; }
.mk-envl-body { inset: 0; border-radius: 4px; background: linear-gradient(rgba(42, 32, 40, .22), rgba(42, 32, 40, 0) 34%), var(--mk-liner); }
.mk-envl-pocket { inset: 0; border-radius: 4px; background: linear-gradient(100deg, #F1EADF, #FAF6EF 30%, #FAF6EF 70%, #F0E9DD); clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 0 100%); }
.mk-envl-pocket::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#FBF8F2, #F3EDE2); clip-path: polygon(0 100%, 50% 46%, 100% 100%); filter: drop-shadow(0 -1px 0 rgba(120, 100, 80, .16)); }
.mk-envl-lid { right: 0; bottom: calc(100% - 1px); left: 0; height: calc(var(--w) * .5); background: linear-gradient(#F3EDE2, #FAF6EF); clip-path: polygon(0 100%, 45.5% 7%, 48% 2.5%, 50% 1%, 52% 2.5%, 54.5% 7%, 100% 100%); transform-origin: 50% 100%; }
.mk-envl-lid::after { content: ""; position: absolute; inset: 0; background: var(--mk-liner); clip-path: polygon(7.5% 100%, 46.5% 17%, 48.5% 13.5%, 50% 12.5%, 51.5% 13.5%, 53.5% 17%, 92.5% 100%); }
.mk-envl-flap { top: 0; right: 0; left: 0; height: calc(var(--w) * .5); background: linear-gradient(#FAF6EF, #EFE8DC); clip-path: polygon(0 0, 100% 0, 54.5% 93%, 52% 97.5%, 50% 99%, 48% 97.5%, 45.5% 93%); transform: scaleY(0); transform-origin: 50% 0; }
.mk-envl-card { position: absolute; top: calc(var(--w) * .61); left: calc(var(--w) * .135); z-index: 2; width: calc(var(--w) * .95); height: auto; border-radius: 2px; box-shadow: var(--mk-paper-shadow); transform: rotate(2.5deg); }
.mk-envl-card.is-wait { opacity: 0; animation: none; }
.mk-envl-card.is-swap { z-index: 3; }
.mk-envl-bloom { position: absolute; right: -38%; bottom: -5%; z-index: 5; width: 82%; }
.mk-petal { position: absolute; z-index: 1; width: calc(var(--w) * .13); height: auto; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(42, 32, 40, .10)); }
.mk-petal-1 { bottom: 9%; left: -17%; transform: rotate(-24deg); }
.mk-petal-2 { bottom: -1%; left: 2%; width: calc(var(--w) * .1); transform: rotate(38deg); }
.mk-petal-3 { bottom: 22%; left: -31%; width: calc(var(--w) * .095); transform: rotate(112deg); }

@media (prefers-reduced-motion: no-preference) {
  .mk-hero-copy > * { animation: mw-rise 900ms var(--ease-out) both; }
  .mk-hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .mk-hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .mk-hero-copy > :nth-child(4) { animation-delay: 260ms; }
  .mk-envl-env { animation: mk-env-in 900ms var(--ease-out) 100ms both; }
  .mk-envl-flap { animation: mk-flap-shut 420ms cubic-bezier(.5, 0, .9, .6) 650ms both; }
  .mk-envl-lid { animation: mk-lid-open 620ms var(--ease-out) 1060ms both; }
  .mk-envl-card { animation: mk-card-settle 1300ms var(--ease-out) 1250ms both; }
  .mk-envl-card.is-swap { animation: mk-card-settle 1400ms var(--ease-out) 460ms both; }
  .mk-envl-card.is-out { animation: mk-card-out 520ms var(--ease-soft) both; }
  .mk-envl-bloom { animation: mk-bloom-in 1300ms var(--ease-out) 1900ms both; }
  .mk-envl-bloom img { animation: mk-sway 9s ease-in-out 3200ms infinite; transform-origin: 90% 90%; }
  .mk-petal { animation: mk-petal-in 1500ms var(--ease-out) 2200ms both; }
  .mk-petal-2 { animation-delay: 2400ms; }
  .mk-petal-3 { animation-delay: 2600ms; }
  .mk-hero-jac { animation: mk-fade-in 1600ms var(--ease-soft) 300ms both; }
  .mk-hero-jac img { animation: mk-sway 11s ease-in-out 1900ms infinite; transform-origin: 6% 8%; }
}
@keyframes mk-env-in { from { opacity: 0; transform: translateY(26px) rotate(-4deg); } to { opacity: 1; transform: rotate(-4deg); } }
@keyframes mk-flap-shut { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes mk-lid-open { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mk-card-settle { 0% { opacity: 0; transform: translateY(calc(var(--w) * .34)) rotate(-4deg) scale(.9); } 55% { opacity: 1; transform: translateY(calc(var(--w) * -.1)) rotate(-1deg) scale(1); } 100% { opacity: 1; transform: rotate(2.5deg); } }
@keyframes mk-card-out { from { opacity: 1; transform: rotate(2.5deg); } to { opacity: 0; transform: translateY(calc(var(--w) * -.06)) rotate(4.5deg) scale(.99); } }
@keyframes mk-bloom-in { from { opacity: 0; scale: .94; } to { opacity: 1; scale: 1; } }
@keyframes mk-petal-in { from { opacity: 0; translate: 10px -46px; } to { opacity: 1; translate: 0 0; } }
@keyframes mk-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mk-sway { 0%, 100% { rotate: 0deg; } 50% { rotate: 1.4deg; } }

@media (min-width: 760px) {
  .mk-hero { --w: 270px; padding-top: 48px; }
  .mk-hero h1 { font-size: 72px; }
  .mk-tracked { font-size: 11px; letter-spacing: 2.6px; }
  .mk-hero-jac { right: -4vw; width: 52vw; max-width: 440px; }
}
@media (min-width: 980px) {
  .mk-hero { --w: clamp(300px, 26vw, 372px); padding: 0; }
  .mk-hero-grid { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); align-items: center; gap: 24px; min-height: min(calc(100svh - 76px), 800px); }
  .mk-hero-copy { justify-items: start; padding: 40px 0 64px; text-align: left; }
  .mk-hero h1 { font-size: clamp(60px, 6.1vw, 86px); line-height: .98; }
  .mk-tracked { margin-top: 26px; }
  .mk-hero .mk-start, .mk-hero .mk-start-in { margin-top: 32px; }
  .mk-hero-stage { padding: 30px 0 56px; }
  .mk-hero-jac { top: -26px; right: max(-70px, calc((100vw - 1500px) / 2)); bottom: auto; width: clamp(400px, 41vw, 600px); max-width: none; }
}
@media (min-width: 980px) and (max-width: 1199px) { .mk-petal-3 { display: none; } .mk-petal-1 { left: -9%; } }

/* ─── Sections ─────────────────────────────────────────────────────────── */
.mk-sec { position: relative; padding: 76px 0; }
.mk-ivory { background: var(--ivory); }
@media (min-width: 900px) { .mk-sec { padding: 124px 0; } }
#designs { padding-bottom: 56px; }
@media (min-width: 900px) { #designs { padding-bottom: 124px; } }

/* How it works: three arches, each holding a real piece of the product. */
.mk-steps { display: grid; gap: 48px; margin: 44px 0 0; padding: 0; list-style: none; }
.mk-step { text-align: center; }
.mk-arch { position: relative; display: grid; place-items: center; width: 100%; max-width: 330px; height: 310px; margin: 0 auto 26px; border-radius: 165px 165px 22px 22px; }
.mk-arch.tone-blush { background: linear-gradient(var(--blush-soft), #FDF7F4); }
.mk-arch.tone-sage { background: linear-gradient(var(--sage-soft), #F6F8F3); }
.mk-arch.tone-ivory { background: linear-gradient(#F6F0E6, var(--ivory)); }
.mk-step-n { display: block; color: var(--mk-gold); font: italic 300 19px/1.2 var(--font-serif); }
.mk-step h3 { margin-top: 4px; color: var(--mk-ink); font: 400 31px/1.12 var(--font-serif); letter-spacing: -0.008em; }
.mk-step p { max-width: 310px; margin: 10px auto 0; color: var(--mk-soft); font-size: 15.5px; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 860px) { .mk-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-top: 64px; } }

.mk-sheet { width: 232px; margin-top: 52px; padding: 22px 20px 12px; border-radius: 3px; background: #fff; box-shadow: var(--mk-paper-shadow); text-align: center; transform: rotate(-2deg); }
.mk-sheet .k { display: block; color: var(--mk-gold); font: 700 8px/1.4 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
.mk-sheet .n { display: block; margin-top: 5px; color: var(--mk-ink); font: 400 26px/1.1 var(--font-serif); }
.mk-sheet .n i { color: var(--champagne); font-style: italic; font-weight: 300; }
.mk-sheet .n u { display: inline-block; width: 1.5px; height: .82em; margin-left: 3px; background: var(--accent); vertical-align: -0.08em; text-decoration: none; }
.mk-sheet dl { margin: 14px 0 0; border-top: 1px solid var(--mk-line); text-align: left; }
.mk-sheet dl div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--mk-line); }
.mk-sheet dl div:last-child { border-bottom: 0; }
.mk-sheet dt { padding-top: 2px; color: var(--mk-soft); font: 700 7.5px/1.5 var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }
.mk-sheet dd { margin: 0; color: var(--mk-ink); font: 400 10.5px/1.45 var(--font-sans); }

.mk-fan { position: relative; width: 250px; height: 226px; margin-top: 44px; }
.mk-fan img { position: absolute; bottom: 0; left: 50%; width: 138px; height: auto; margin-left: -69px; border-radius: 2px; box-shadow: var(--mk-paper-shadow); transform-origin: 50% 130%; transition: transform .7s var(--ease-out); }
.mk-fan img:nth-child(1) { transform: translateX(-58px) rotate(-11deg); }
.mk-fan img:nth-child(2) { z-index: 1; transform: translateY(-16px); }
.mk-fan img:nth-child(3) { transform: translateX(58px) rotate(11deg); }
@media (hover: hover) {
  .mk-step:hover .mk-fan img:nth-child(1) { transform: translateX(-68px) rotate(-14deg); }
  .mk-step:hover .mk-fan img:nth-child(3) { transform: translateX(68px) rotate(14deg); }
}

.mk-chat { display: grid; gap: .7em; width: 20.4em; margin-top: 3.2em; font-size: 11px; }
.mk-bubble { position: relative; max-width: 92%; padding: .5em .65em 1.45em; border-radius: 1em; background: #fff; box-shadow: 0 1px 1px rgba(42, 32, 40, .10); color: #1E2A22; font: 400 1em/1.42 var(--font-sans); text-align: left; }
.mk-bubble.out { justify-self: end; border-top-right-radius: .25em; background: #DDF4D2; }
.mk-bubble.in { justify-self: start; border-top-left-radius: .25em; }
.mk-bubble p { padding: 0 .15em; }
.mk-bubble time { position: absolute; right: .8em; bottom: .35em; color: rgba(30, 42, 34, .5); font-size: .74em; }
.mk-linkprev { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); margin-bottom: .5em; overflow: hidden; border-radius: .7em; background: rgba(30, 42, 34, .07); }
.mk-linkprev img { width: 5.2em; height: 5.2em; object-fit: cover; object-position: 50% 36%; }
.mk-linkprev span { display: grid; align-content: center; gap: .1em; padding: .5em .7em; }
.mk-linkprev b { font: 700 .96em/1.25 var(--font-sans); }
.mk-linkprev i { color: rgba(30, 42, 34, .68); font-size: .84em; font-style: normal; line-height: 1.3; }
.mk-linkprev u { color: rgba(30, 42, 34, .46); font-size: .78em; text-decoration: none; }
.mk-linkprev.tall { grid-template-columns: 1fr; }
.mk-linkprev.tall img { width: 100%; height: 9.4em; object-position: 50% 40%; }

/* The designs: every card rests on its own envelope. A swipe rail on phones, a table on desktop. */
.mk-designs-sprig { display: none; position: absolute; transform: rotate(24deg); }
.mk-designs { margin-top: 26px; }
.mk-designs-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(62vw, 250px); gap: 26px; margin: 0; padding: 22px var(--mk-gut) 20px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--mk-gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mk-designs-rail::-webkit-scrollbar { display: none; }
.mk-design { scroll-snap-align: start; }
.mk-design-obj { position: relative; aspect-ratio: 100 / 140; }
.mk-mini-env { position: absolute; top: 29%; left: 2%; width: 84%; height: 67%; border-radius: 3px; background: var(--env); filter: drop-shadow(0 1px 1px rgba(42, 32, 40, .10)) drop-shadow(0 14px 18px rgba(42, 32, 40, .13)); transform: rotate(var(--tilt)); }
.mk-mini-env::before, .mk-mini-env::after { content: ""; position: absolute; right: 0; bottom: calc(100% - 1px); left: 0; height: 41%; }
.mk-mini-env::before { background: var(--env); clip-path: polygon(0 100%, 45% 8%, 48% 3%, 50% 1.5%, 52% 3%, 55% 8%, 100% 100%); }
.mk-mini-env::after { background: var(--liner); clip-path: polygon(8% 100%, 46.5% 19%, 50% 14%, 53.5% 19%, 92% 100%); }
.mk-design-obj > img { position: absolute; right: 0; bottom: 0; width: 82%; height: auto; border-radius: 2px; box-shadow: var(--mk-paper-shadow); transform: rotate(calc(var(--tilt) * -0.55)); transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
@media (hover: hover) { .mk-design:hover .mk-design-obj > img { transform: translateY(-10px) rotate(0deg); } }
@media (max-width: 899px) { html.js .mk-design[data-reveal] { opacity: 1; transform: none; transition: none; } }
.mk-design-cap { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.mk-design-cap b { color: var(--mk-ink); font: 400 24px/1.1 var(--font-serif); }
.mk-design-cap a { color: var(--accent); font: 400 23px/1.15 var(--font-serif); text-decoration: underline; text-decoration-color: rgba(139, 58, 139, .3); text-underline-offset: 4px; }
.mk-tag { flex: none; padding: 4px 9px; border: 1px solid #DDD3DD; border-radius: var(--r-pill); color: var(--mk-soft); font: 700 10px/1.2 var(--font-sans); letter-spacing: 1.3px; text-transform: uppercase; }
.mk-tag.free { border-color: #C5D2C0; color: var(--sage-deep); }
.mk-design-note { margin-top: 5px; color: var(--mk-soft); font-size: 13.5px; line-height: 1.5; }
.mk-rail-hint { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; color: var(--mk-faint); font: 700 10px/1.4 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
.mk-rail-hint::after { content: ""; width: 26px; height: 7px; border-bottom: 1px solid currentColor; border-right: 1px solid currentColor; transform: skewX(45deg); transform-origin: bottom; }
.mk-design-yours { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; width: 82%; aspect-ratio: 4 / 5; border-radius: 2px; background: var(--paper); box-shadow: var(--mk-paper-shadow); transform: rotate(calc(var(--tilt) * -0.55)); }
.mk-design-yours::after { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(201, 169, 97, .55); pointer-events: none; }
.mk-yours-wreath { position: absolute; top: 50%; left: 50%; width: 82%; transform: translate(-50%, -50%); }
.mk-design-yours span { position: relative; max-width: 5.2em; color: var(--mk-ink); font: 400 21px/1.05 var(--font-serif); text-align: center; }
.mk-design-yours span i { display: block; color: var(--accent); font: 400 1.25em/1 var(--font-script); }
@media (min-width: 900px) {
  .mk-designs { max-width: var(--mk-max); margin: 44px auto 0; padding: 0 var(--mk-gut); }
  .mk-designs-rail { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 44px; padding: 0; overflow: visible; }
  .mk-designs-sprig { display: block; top: 70px; right: 2%; width: 150px; }
  .mk-rail-hint { display: none; }
}

/* What guests see: two phones, sized in em so they scale as one drawing. */
.mk-split { display: grid; gap: 40px; }
.mk-points { display: grid; gap: 0; margin: 28px 0 0; padding: 0; list-style: none; }
.mk-points li { padding: 18px 0; border-top: 1px solid var(--mk-line); }
.mk-points li:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-points b { display: block; color: var(--mk-ink); font: 400 23px/1.2 var(--font-serif); }
.mk-points span { display: block; margin-top: 4px; color: var(--mk-soft); font-size: 15px; line-height: 1.6; }
.mk-phones { position: relative; display: flex; justify-content: center; align-items: flex-start; margin: 0; padding: 0 0 3.4em; font-size: clamp(8.6px, 2.42vw, 12.4px); }
.mk-phone { position: relative; flex: none; width: 19.6em; height: 40.5em; padding: .68em; border-radius: 3.1em; background: linear-gradient(150deg, #fff, #EFE9EE); box-shadow: 0 0 0 1px #E3DCE3, 0 2.6em 4.4em -2.2em rgba(42, 32, 40, .42); }
.mk-phone::before { content: ""; position: absolute; top: 1.35em; left: 50%; z-index: 2; width: 5.2em; height: 1.4em; margin-left: -2.6em; border-radius: 1em; background: #221B22; }
.mk-phone-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 2.5em; background: #fff; }
.mk-phone-a { z-index: 0; margin-right: -2em; transform: rotate(-4deg) translateY(2.2em); }
.mk-phone-b { z-index: 1; transform: rotate(2deg); }
.mk-wa { background: #F1EAE1; }
.mk-wa-bar { display: flex; align-items: center; gap: .7em; padding: 3.5em 1em .8em; border-bottom: 1px solid rgba(42, 32, 40, .07); background: #FAF8F5; }
.mk-wa-bar .av { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--blush); color: var(--mk-ink); font: 400 1.25em/1 var(--font-serif); }
.mk-wa-bar .who b { display: block; font: 700 1.08em/1.2 var(--font-sans); }
.mk-wa-bar .who i { color: var(--mk-soft); font-size: .82em; font-style: normal; }
.mk-wa-body { display: grid; align-content: start; gap: .8em; flex: 1; padding: 1em .85em; }
.mk-wa-body .mk-bubble { max-width: 84%; }
.mk-wa-day { justify-self: center; padding: .3em .9em; border-radius: 1em; background: rgba(255, 255, 255, .86); color: var(--mk-soft); font-size: .78em; }
.mk-site { align-items: center; padding: 3.9em 1.2em 1.1em; background: linear-gradient(var(--paper), #fff); text-align: center; }
.mk-site-art { width: 82%; height: auto; }
.mk-site .k { margin-top: 1.3em; color: var(--mk-gold); font: 700 .66em/1.4 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; }
.mk-site .n { margin-top: .32em; color: var(--mk-ink); font: 400 2.55em/1 var(--font-serif); }
.mk-site .n i { display: block; color: var(--accent); font: 400 .62em/1.25 var(--font-script); }
.mk-site .d { display: flex; align-items: center; gap: .7em; margin-top: 1.25em; color: var(--mk-ink); }
.mk-site .d i { font: 700 .6em/1.3 var(--font-sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.mk-site .d b { padding: 0 .34em; border-inline: 1px solid var(--champagne); font: 400 2.5em/1 var(--font-serif); font-variant-numeric: lining-nums; }
.mk-site .v { margin-top: .8em; color: var(--mk-soft); font: italic 300 1.22em/1.3 var(--font-serif); }
.mk-site .chips { display: flex; gap: .5em; margin-top: 1em; }
.mk-site .chips u { padding: .5em .95em; border: 1px solid #E2DAE2; border-radius: 2em; color: var(--mk-ink); font: 500 .76em/1.2 var(--font-sans); text-decoration: none; }
.mk-site-rsvp { display: grid; gap: .55em; width: 100%; margin-top: auto; padding: 1.15em .9em .9em; border-radius: 1.6em; background: #fff; box-shadow: 0 0 0 1px var(--mk-line), 0 1em 2.2em -1.3em rgba(42, 32, 40, .34); }
.mk-site-rsvp b { color: var(--mk-ink); font: 400 1.62em/1.15 var(--font-serif); }
.mk-site-rsvp span { padding: .92em; border-radius: 1.1em; font: 700 .94em/1.2 var(--font-sans); }
.mk-site-rsvp .yes { background: var(--accent); color: #fff; }
.mk-site-rsvp .no { background: #F4EFF4; color: var(--mk-ink); }
.mk-replies { position: absolute; bottom: 0; left: 50%; z-index: 3; display: grid; gap: .7em; width: 17.4em; margin: 0 0 0 -19.6em; padding: 0; list-style: none; }
.mk-replies li { display: flex; align-items: center; gap: .8em; padding: .75em .9em .75em .75em; border-radius: 1.3em; background: #fff; box-shadow: var(--mk-float-shadow); }
.mk-replies li:nth-child(2) { margin-left: 1.6em; }
.mk-replies .av { display: grid; place-items: center; flex: none; width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--sage-soft); color: var(--sage-deep); font: 400 1.25em/1 var(--font-serif); }
.mk-replies li:nth-child(2) .av { background: var(--blush-soft); color: #9A5B4B; }
.mk-replies b { display: block; color: var(--mk-ink); font: 700 1em/1.25 var(--font-sans); }
.mk-replies i { display: block; color: var(--mk-soft); font-size: .86em; font-style: normal; line-height: 1.3; }
.mk-replies li > span:nth-child(2) { flex: 1; min-width: 0; }
.mk-replies em { position: relative; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--success-soft); }
.mk-replies em::after { content: ""; position: absolute; top: .52em; left: .46em; width: .7em; height: .36em; border-bottom: 2px solid var(--success); border-left: 2px solid var(--success); transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  html.js .mk-phones .mk-replies li { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  html.js .mk-phones.in .mk-replies li { opacity: 1; transform: none; transition-delay: .7s; }
  html.js .mk-phones.in .mk-replies li:nth-child(2) { transition-delay: 1.15s; }
  .mk-sheet .n u { animation: mk-caret 1.1s steps(1) infinite; }
}
@keyframes mk-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.js .mk-step:not(.in) .mk-fan img { transform: none; }
  html.js .mk-step .mk-fan img { transition-duration: 1.2s; }
  html.js .mk-step .mk-chat .mk-bubble { opacity: 0; transform: translateY(10px) scale(.96); transform-origin: 100% 100%; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  html.js .mk-step .mk-chat .mk-bubble.in { transform-origin: 0 100%; }
  html.js .mk-step.in .mk-chat .mk-bubble { opacity: 1; transform: none; transition-delay: .5s; }
  html.js .mk-step.in .mk-chat .mk-bubble.in { transition-delay: 1.35s; }
  html.js .mk-step .mk-sheet { transition: transform 1.1s var(--ease-out) .25s; }
  html.js .mk-step:not(.in) .mk-sheet { transform: rotate(0deg) translateY(10px); }
  /* F. A guest taps "I'll be there", then the replies arrive. */
  html.js .mk-phones.in .mk-site-rsvp .yes { animation: mk-tap 1.1s var(--ease-soft) .5s 1 both; }
  /* G. Photographs settle as they arrive. */
  html.js [data-reveal] .mk-archphoto img, html.js .mk-vend-photo[data-reveal] img { transform: scale(1.07); transition: transform 2.2s var(--ease-out); }
  html.js [data-reveal].in .mk-archphoto img, html.js .mk-vend-photo[data-reveal].in img { transform: none; }
  /* H. Flowers on the closing card open once it is in view. */
  html.js .mk-close-card .mk-fl { opacity: 0; scale: .9; transition: opacity 1.2s var(--ease-out) .5s, scale 1.4s var(--ease-out) .5s; }
  html.js .mk-close-card.in .mk-fl { opacity: 1; scale: 1; }
  html.js .mk-close-card .mk-close-br { transition-delay: .75s; }
}
@keyframes mk-tap { 0% { box-shadow: 0 0 0 0 rgba(139, 58, 139, .45); transform: scale(1); } 30% { transform: scale(.96); } 100% { box-shadow: 0 0 0 1.1em rgba(139, 58, 139, 0); transform: scale(1); } }
@media (min-width: 980px) {
  .mk-split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 56px; }
  .mk-phones { justify-content: flex-end; padding-right: 1em; font-size: 12.4px; }
}

/* Everything else: a framed photograph beside six plain promises. */
.mk-more { display: grid; gap: 52px; }
.mk-more-photo { position: relative; width: 100%; max-width: 264px; margin: 0 auto; }
.mk-archphoto { overflow: hidden; aspect-ratio: 3 / 4; border-radius: 999px 999px 20px 20px; box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(201, 169, 97, .5), 0 34px 60px -30px rgba(42, 32, 40, .34); }
.mk-archphoto img { width: 100%; height: 100%; object-fit: cover; }
.mk-more-protea { position: absolute; right: -14%; bottom: -9%; width: 48%; }
.mk-feats { display: grid; gap: 0 44px; margin: 30px 0 0; }
.mk-feats > div { padding: 20px 0; border-top: 1px solid #E6DED2; }
.mk-feats dt { color: var(--mk-ink); font: 400 24px/1.2 var(--font-serif); }
.mk-feats dd { margin: 6px 0 0; color: var(--mk-soft); font-size: 15px; line-height: 1.62; text-wrap: pretty; }
@media (min-width: 640px) { .mk-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) {
  .mk-more { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); align-items: center; gap: 88px; }
  .mk-more-photo { max-width: 400px; }
}

/* Plan cards (the list-your-business page): a white card and the one dark plum and gold surface. */
.mk-plans { display: grid; gap: 34px; max-width: 900px; margin: 52px auto 0; }
.mk-plan { position: relative; display: flex; flex-direction: column; padding: 34px 26px 26px; border: 1px solid var(--mk-line); border-radius: var(--r-hero); background: #fff; }
.mk-price { margin-top: 12px; color: var(--mk-ink); font: 300 76px/1 var(--font-serif); font-variant-numeric: lining-nums; letter-spacing: -0.02em; }
.mk-price small { margin-left: 10px; color: var(--mk-soft); font: italic 300 24px/1 var(--font-serif); letter-spacing: 0; }
.mk-plan-sub { margin-top: 10px; color: var(--mk-soft); font-size: 15.5px; }
.mk-ticks { display: grid; gap: 13px; flex: 1; align-content: start; margin: 24px 0 28px; padding: 24px 0 0; border-top: 1px solid var(--mk-line); list-style: none; }
.mk-ticks li { position: relative; padding-left: 30px; color: var(--mk-ink); font-size: 15.5px; line-height: 1.45; }
.mk-ticks li::before { content: ""; position: absolute; top: 6px; left: 3px; width: 12px; height: 6px; border-bottom: 1.6px solid var(--sage-deep); border-left: 1.6px solid var(--sage-deep); transform: rotate(-45deg); }
.mk-plan-lux { border-color: transparent; background: radial-gradient(120% 70% at 85% 0%, #5A3F5C, rgba(90, 63, 92, 0) 60%), linear-gradient(160deg, #46314A, #2E1F31); box-shadow: 0 40px 70px -40px rgba(46, 31, 49, .8); color: #fff; }
.mk-plan-lux::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(212, 175, 55, .42); border-radius: 20px; pointer-events: none; }
.mk-plan-lux .mk-eyebrow { color: var(--gold-bright); }
.mk-plan-lux .mk-price, .mk-plan-lux .mk-ticks li { color: #fff; }
.mk-plan-lux .mk-price small, .mk-plan-lux .mk-plan-sub { color: rgba(255, 255, 255, .74); }
.mk-plan-lux .mk-ticks { border-top-color: rgba(255, 255, 255, .16); }
.mk-plan-lux .mk-ticks li::before { border-color: var(--gold-bright); }
.mk-plan-lux .btn.gold { box-shadow: 0 14px 28px -16px rgba(212, 175, 55, .9); }
.mk-plan-fine { margin-top: 14px; color: rgba(255, 255, 255, .7); font: italic 300 16px/1.3 var(--font-serif); text-align: center; }
.mk-plan-garland { position: absolute; top: -27px; left: 50%; z-index: 1; width: 230px; margin-left: -115px; }
@media (min-width: 800px) {
  .mk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 64px; }
  .mk-plan { padding: 42px 38px 36px; }
}

/* Vendors: one bright photograph with a paper card resting on it. It follows the ivory section,
   so it keeps the section's own space above the photograph. */
.mk-vend-in { position: relative; }
.mk-vend-photo { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-hero); }
.mk-vend-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.mk-vend-card { position: relative; margin: -52px 14px 0; padding: 30px 24px 28px; border-radius: var(--r-card); background: #fff; box-shadow: var(--mk-float-shadow); }
.mk-vend-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 24px; }
@media (min-width: 900px) {
  .mk-vend-photo { aspect-ratio: 21 / 10; }
  .mk-vend-card { position: absolute; right: calc(var(--mk-gut) + 36px); bottom: -52px; width: 468px; margin: 0; padding: 44px 44px 40px; border-radius: var(--r-hero); }
  .mk-vend { padding-bottom: 150px; }
  .mk-vend-card .mk-h2 { font-size: 44px; }
}

/* Questions */
.mk-faq-sec { padding-top: 40px; }
.mk-faq-grid { display: grid; gap: 30px; }
.mk-faq-sprig { display: none; }
.mk-faq details { border-top: 1px solid var(--mk-line); }
.mk-faq details:last-child { border-bottom: 1px solid var(--mk-line); }
.mk-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 21px 2px; color: var(--mk-ink); font: 400 22px/1.25 var(--font-serif); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; transition: color .2s var(--ease); }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary:hover { color: var(--accent); }
.mk-faq summary::after { content: ""; flex: none; width: 15px; height: 15px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.4px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1.4px 100% no-repeat; color: var(--accent); transition: transform .4s var(--ease-out); }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq details p { max-width: 56ch; padding: 0 34px 24px 2px; color: var(--mk-soft); font-size: 16px; line-height: 1.66; }
@media (prefers-reduced-motion: no-preference) { .mk-faq details[open] p { animation: mk-answer .5s var(--ease-out) both; } }
@keyframes mk-answer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (min-width: 900px) {
  .mk-faq-sec { padding-top: 60px; }
  .mk-faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 88px; align-items: start; }
  .mk-faq-grid .mk-head { position: sticky; top: 120px; }
  .mk-faq-sprig { display: block; width: 80px; margin: 44px 0 0 26px; transform: rotate(-14deg); }
  .mk-faq summary { padding: 25px 2px; font-size: 25px; }
}

/* The close: one more invitation, on a card of its own. */
.mk-close { overflow: hidden; overflow: clip; }
.mk-close-card { position: relative; display: grid; justify-items: center; max-width: 800px; margin: 0 auto; padding: 78px 22px 62px; border-radius: 4px; background: #fff; box-shadow: var(--mk-paper-shadow); text-align: center; }
.mk-close-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(201, 169, 97, .55); pointer-events: none; }
.mk-close-card > * { position: relative; }
.mk-close-card .mk-h2 { margin-top: 6px; }
.mk-close-card .mk-lead { max-width: 30ch; }
.mk-close-card .mk-start, .mk-close-card .mk-start-in { margin-top: 26px; }
.mk-close-card .mk-note { margin-top: 14px; }
.mk-close-tl, .mk-close-br { position: absolute !important; z-index: 1; }
.mk-close-tl { top: -30px; left: -34px; width: 136px; transform-origin: 0 0; }
.mk-close-br { right: -36px; bottom: -32px; width: 150px; transform-origin: 100% 100%; }
@media (min-width: 760px) {
  .mk-close-card { padding: 96px 60px 84px; }
  .mk-close-card::before { inset: 14px; }
  .mk-close-card .mk-lead { max-width: none; }
  .mk-close-tl { top: -46px; left: -56px; width: 230px; }
  .mk-close-br { right: -60px; bottom: -48px; width: 250px; }
}

/* The postscript: for a visitor who is not planning a wedding yet, the way to Murudo. Quieter than
   the close above it (a smaller heading, a secondary button), and the footer's flower closes it. */
.mk-sec.mk-ps { padding: 68px 0 46px; background: #fff; }
.mk-ps-mark { width: auto; height: 60px; margin: 0 auto 20px; }
.mk-ps .mk-h2 { margin-top: 12px; font-size: clamp(31px, 8.4vw, 38px); }
.mk-ps .mk-lead { max-width: 44ch; margin-inline: auto; }
.mk-ps-go { margin-top: 26px; }
@media (min-width: 900px) {
  .mk-sec.mk-ps { padding: 104px 0 68px; }
  .mk-ps-mark { height: 70px; margin-bottom: 22px; }
  .mk-ps .mk-h2 { font-size: 46px; }
  .mk-ps .mk-lead { max-width: 52ch; }
}

/* ─── Form controls on these pages: white wells with a hairline, like a fine form ─── */
.mk input[type=text], .mk input[type=email], .mk input[type=password], .mk input[type=tel], .mk input[type=url], .mk select, .mk textarea,
.mk-auth input[type=text], .mk-auth input[type=email], .mk-auth input[type=password], .mk-auth input[type=tel], .mk-auth input[type=date] { border-color: #DDD3DD; background-color: #fff; }
.mk input:hover, .mk select:hover, .mk textarea:hover, .mk-auth input:hover { border-color: #C9BBCA; }
.mk input:focus, .mk select:focus, .mk textarea:focus, .mk-auth input:focus { border-color: var(--accent); }
.mk .field > span, .mk-auth .field > span { color: var(--mk-soft); letter-spacing: 1.6px; }
.mk .field .hint, .mk-auth .field .hint { color: var(--mk-soft); }
.mk .check, .mk-auth .check { color: var(--mk-ink); font-size: 14.5px; line-height: 1.5; }
.mk .check a, .mk-auth .check a { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(139, 58, 139, .3); text-underline-offset: 3px; }
.mk .form-error, .mk-auth .form-error { border: 1px solid rgba(196, 40, 40, .16); }
.mk .check input[type=checkbox], .mk-auth .check input[type=checkbox] { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 24px; height: 24px; margin: 0; border: 1.5px solid #CFC3D0; border-radius: 8px; background: #fff; cursor: pointer; transition: background .18s var(--ease), border-color .18s var(--ease); }
.mk .check input[type=checkbox]::after, .mk-auth .check input[type=checkbox]::after { content: ""; width: 11px; height: 6px; margin-top: -2px; border-bottom: 2px solid #fff; border-left: 2px solid #fff; opacity: 0; transform: rotate(-45deg) scale(.6); transition: opacity .18s var(--ease), transform .25s var(--ease-out); }
.mk .check input[type=checkbox]:checked, .mk-auth .check input[type=checkbox]:checked { border-color: var(--accent); background: var(--accent); }
.mk .check input[type=checkbox]:checked::after, .mk-auth .check input[type=checkbox]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.mk .check input[type=checkbox]:focus-visible, .mk-auth .check input[type=checkbox]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-light) 74%, transparent); outline-offset: 2px; }
.mk .check > span, .mk-auth .check > span { padding-top: 1px; }

/* ─── Sign-in pages ────────────────────────────────────────────────────── */
.mk-au { display: grid; min-height: 100vh; min-height: 100svh; }
.mk-au-side { display: none; }
.mk-au-main { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 var(--mk-gut) 44px; overflow: hidden; overflow: clip; }
.mk-au-bloom { align-self: flex-end; width: 150px; height: auto; margin: 36px -46px -70px 0; pointer-events: none; }
.mk-au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 62px; }
.mk-au-alt { color: var(--mk-soft); font-size: 13.5px; white-space: nowrap; }
.mk-au-alt a { margin-left: 2px; color: var(--accent); font-weight: 700; }
@media (max-width: 479px) { .mk-au-alt span { display: none; } }
.mk-au-body { display: flex; flex: 1; flex-direction: column; width: 100%; max-width: 420px; margin: 0 auto; padding-top: 14px; }
.mk-auth .auth-inner { max-width: none; }
.mk-au-head { text-align: center; }
.mk-au-orn { width: 196px; height: auto; margin: 0 auto 14px; }
.mk-au-orn.slim { width: 150px; margin-bottom: 12px; }
.mk-auth .auth-title { color: var(--mk-ink); font: 300 clamp(36px, 10vw, 44px)/1.05 var(--font-serif); letter-spacing: -0.014em; text-wrap: balance; }
.mk-auth .auth-sub { margin-top: 10px; color: var(--mk-soft); font-size: 15.5px; line-height: 1.55; text-wrap: balance; }
.mk-auth .auth-sub b { color: var(--mk-ink); font-weight: 700; overflow-wrap: anywhere; }
.mk-auth .auth-divider { color: var(--mk-faint); letter-spacing: 2px; }
.mk-auth .auth-divider::before, .mk-auth .auth-divider::after { background: var(--mk-line); }
.mk-au-switch { color: var(--mk-soft); font-size: 15px; }
.mk-au-links { display: grid; justify-items: center; gap: 14px; }
.mk-auth .linkbtn { font-size: 14.5px; }
.mk-auth .linkbtn.quiet { color: var(--mk-soft); font-weight: 500; }
.mk-pass-well { position: relative; display: block; margin: 0 !important; }
.mk-pass-well input { padding-right: 76px; }
.mk-pass-toggle { position: absolute; top: 50%; right: 8px; min-height: 38px; padding: 0 12px; border: 0; border-radius: 11px; background: transparent; color: var(--accent); font: 700 13px/1 var(--font-sans); cursor: pointer; transform: translateY(-50%); }
.mk-pass-toggle:hover { background: var(--accent-soft); }
.mk-code input { height: 66px; font: 500 26px/1 var(--font-sans); letter-spacing: .42em; text-align: center; text-indent: .42em; }
.mk-code input::placeholder { color: #DDD3DE; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .mk-au-body .auth-inner > * { animation: mw-rise 800ms var(--ease-out) both; }
  .mk-au-body .auth-inner > :nth-child(2) { animation-delay: 70ms; }
  .mk-au-body .auth-inner > :nth-child(3) { animation-delay: 140ms; }
  .mk-au-body .auth-inner > :nth-child(n+4) { animation-delay: 210ms; }
}
@media (min-width: 940px) {
  .mk-au { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .mk-au-side { position: sticky; top: 0; display: grid; place-items: center; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; background: var(--ivory); }
  .mk-au-main { padding: 0 56px 56px; }
  .mk-au-top { height: 76px; }
  .mk-au-top .mk-logo { font-size: 25px; }
  .mk-au-top .mk-logo img { width: 32px; }
  .mk-au-alt { font-size: 14.5px; }
  .mk-au-body { justify-content: center; padding: 24px 0 40px; }
  .mk-au-orn, .mk-au-bloom { display: none; }
  .mk-au-head { text-align: left; }
  .mk-auth .auth-title { font-size: 50px; }
  .mk-auth .auth-sub { font-size: 16.5px; text-wrap: pretty; }
}
/* The side panel: flowers at two corners, one picture in an arch, one line. */
.mk-au-art { position: relative; z-index: 1; display: grid; justify-items: center; width: min(62%, 360px); }
.mk-au-art .mk-archphoto { width: 100%; }
.mk-au-line { margin-top: 34px; color: var(--mk-ink); font: 300 31px/1.12 var(--font-serif); letter-spacing: -0.01em; text-align: center; text-wrap: balance; }
.mk-au-line i { display: block; font-style: italic; }
.mk-au-tl, .mk-au-br { position: absolute; z-index: 2; }
.mk-au-tl { top: -3%; left: -5%; width: min(44%, 280px); }
.mk-au-br { right: -6%; bottom: -3%; width: min(48%, 310px); }
.mk-au-post { --w: clamp(190px, 17vw, 236px); display: grid; place-items: center; padding-top: 10px; }
.mk-envl-still .mk-envl-env, .mk-envl-still .mk-envl-lid, .mk-envl-still .mk-envl-card { animation: none; }
.mk-code-card { display: grid; align-content: center; justify-items: center; gap: calc(var(--w) * .06); aspect-ratio: 4 / 5; background: var(--paper); text-align: center; }
.mk-code-card::after { content: ""; position: absolute; inset: 5%; border: 1px solid rgba(201, 169, 97, .55); }
.mk-code-card .k { color: var(--mk-gold); font: 700 calc(var(--w) * .038)/1.4 var(--font-sans); letter-spacing: .24em; text-transform: uppercase; }
.mk-code-card b { display: flex; gap: calc(var(--w) * .028); }
.mk-code-card b i { width: calc(var(--w) * .09); height: calc(var(--w) * .125); border-radius: calc(var(--w) * .02); background: #F3EDF3; box-shadow: inset 0 0 0 1px #E4DAE4; }
.mk-code-card .s { color: var(--mk-soft); font: italic 300 calc(var(--w) * .066)/1.3 var(--font-serif); }
@media (prefers-reduced-motion: no-preference) {
  .mk-au-art { animation: mw-rise 1100ms var(--ease-out) 120ms both; }
  .mk-au-tl, .mk-au-br { animation: mk-bloom-in 1500ms var(--ease-out) 300ms both; }
  .mk-au-br { animation-delay: 500ms; }
  .mk-code-card b i { animation: mk-digit 2.6s var(--ease-soft) infinite; }
  .mk-code-card b i:nth-child(2) { animation-delay: .15s; }
  .mk-code-card b i:nth-child(3) { animation-delay: .3s; }
  .mk-code-card b i:nth-child(4) { animation-delay: .45s; }
  .mk-code-card b i:nth-child(5) { animation-delay: .6s; }
  .mk-code-card b i:nth-child(6) { animation-delay: .75s; }
}
@keyframes mk-digit { 0%, 55%, 100% { background: #F3EDF3; } 20% { background: #E6D5E8; } }

/* ─── Inner pages: shared headings ─────────────────────────────────────── */
.mk-h1 { color: var(--mk-ink); font: 300 clamp(40px, 10.6vw, 52px)/1.03 var(--font-serif); letter-spacing: -0.016em; text-wrap: balance; }
.mk-h1 em { font-style: italic; }
.mk-h3 { color: var(--mk-ink); font: 400 28px/1.15 var(--font-serif); letter-spacing: -0.008em; }
@media (min-width: 900px) { .mk-h1 { font-size: clamp(52px, 5vw, 68px); } }

/* A letter (or a number) inside the flower wreath: vendors with no photo, thank-you and error pages. */
.mk-mono { position: relative; display: grid; place-items: center; width: 52%; container-type: inline-size; }
.mk-mono img { width: 100%; height: auto; }
.mk-mono b { position: absolute; color: var(--mk-ink); font: 400 44px/1 var(--font-serif); font-size: 36cqw; font-variant-numeric: lining-nums; }
.mk-mono.big { width: 176px; }
.mk-mono.wide b { font-size: 24cqw; letter-spacing: .02em; }

/* ─── Vendor directory ─────────────────────────────────────────────────── */
.mk-vendors .mk-page { padding-bottom: 84px; }
.mk-phead { position: relative; padding: 34px 0 4px; overflow: hidden; overflow: clip; }
.mk-phead .mk-h1 { margin-top: 12px; }
.mk-phead .mk-lead { max-width: 58ch; }
.mk-phead-sprig { display: none; position: absolute; opacity: .9; transform: rotate(22deg); }
.mk-filters { display: grid; gap: 14px; margin: 26px 0 30px; padding: 18px 0; border-block: 1px solid var(--mk-line); }
.mk-filter { display: grid; gap: 8px; min-width: 0; }
.mk-filter-label { color: var(--mk-soft); font: 700 10.5px/1.5 var(--font-sans); letter-spacing: 2px; text-transform: uppercase; }
.mk-chips { display: flex; gap: 8px; margin: 0 calc(var(--mk-gut) * -1); padding: 2px var(--mk-gut); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mk-chips::-webkit-scrollbar { display: none; }
.mk-chips a { display: inline-flex; align-items: center; flex: none; min-height: 40px; padding: 0 15px; border: 1px solid #DDD3DD; border-radius: var(--r-pill); background: #fff; color: var(--mk-ink); font: 500 14px/1 var(--font-sans); white-space: nowrap; transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.mk-chips a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.mk-chips a.on { border-color: var(--plum-deep); background: var(--plum-deep); color: #fff; font-weight: 700; }
.mk-count { margin-bottom: 18px; color: var(--mk-soft); font: italic 300 18px/1.3 var(--font-serif); }
.mk-vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 24px; }
.mk-vcard { display: block; color: inherit; }
.mk-vcard:hover { text-decoration: none; }
.mk-vcard-pic { position: relative; display: grid; place-items: center; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-card); background: var(--ivory); }
.mk-vcard-pic > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.mk-vcard-pic.tone-0, .mk-vd-pic.none { background: linear-gradient(var(--blush-soft), #FDF7F4); }
.mk-vcard-pic.tone-1 { background: linear-gradient(var(--sage-soft), #F7F9F4); }
.mk-vcard-pic.tone-2 { background: linear-gradient(#F6F0E6, var(--ivory)); }
.mk-vcard-pic .mk-mono { transition: transform 1.1s var(--ease-out); }
@media (hover: hover) { .mk-vcard:hover .mk-vcard-pic > img, .mk-vcard:hover .mk-mono { transform: scale(1.04); } }
.mk-vcard-flag { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .96); box-shadow: 0 6px 16px -10px rgba(42, 32, 40, .5); color: var(--mk-gold); font: 700 9.5px/1.2 var(--font-sans); letter-spacing: 1.5px; text-transform: uppercase; }
.mk-vcard-flag::before { content: ""; width: 10px; height: 10px; background: var(--champagne); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.mk-vcard-body { padding: 15px 4px 0; }
.mk-vcard-kind { display: block; color: var(--mk-soft); font: 700 10px/1.5 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.mk-vcard-kind i, .mk-vd-head .mk-eyebrow i { margin: 0 .3em; color: var(--champagne); font-style: normal; }
.mk-vcard h3 { margin-top: 6px; color: var(--mk-ink); font: 400 25px/1.14 var(--font-serif); overflow-wrap: anywhere; transition: color .2s var(--ease); }
.mk-vcard:hover h3 { color: var(--accent); }
.mk-vcard-line { margin-top: 4px; color: var(--mk-soft); font: italic 300 18px/1.3 var(--font-serif); overflow-wrap: anywhere; }
.mk-vcard-price { margin-top: 6px; color: var(--mk-ink); font-size: 14px; font-weight: 500; }
.mk-vempty { position: relative; display: grid; justify-items: center; padding: 70px 22px 34px; overflow: hidden; border-radius: var(--r-hero); background: var(--ivory); text-align: center; }
.mk-vempty > * { position: relative; }
.mk-vempty .mk-script { font-size: 34px; }
.mk-vempty .mk-h2 { margin-top: 8px; }
.mk-vempty .mk-lead { max-width: 54ch; }
.mk-vempty-tl, .mk-vempty-br { position: absolute !important; }
.mk-vempty-tl { top: -12px; left: -14px; width: 128px; }
.mk-vempty-br { display: none; right: -36px; bottom: -32px; width: 142px; }
.mk-vempty-cta, .mk-plain-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: 28px; }
.mk-vempty-facts { display: grid; width: 100%; max-width: 780px; margin: 42px 0 0; padding: 0; list-style: none; }
.mk-vempty-facts li { padding: 16px 12px; border-top: 1px solid #E6DED2; }
.mk-vempty-facts b { display: block; color: var(--mk-ink); font: 400 22px/1.2 var(--font-serif); }
.mk-vempty-facts span { display: block; margin-top: 3px; color: var(--mk-soft); font-size: 14px; }
.mk-vempty-couples { margin-top: 30px; color: var(--mk-soft); text-align: center; }
@media (min-width: 760px) {
  .mk-phead { padding-top: 56px; }
  .mk-phead-sprig { display: block; top: 22px; right: 7%; width: 74px; }
  .mk-filters { margin: 34px 0 38px; padding: 22px 0; }
  .mk-filter { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .mk-filter-label { padding-top: 12px; }
  .mk-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; }
  .mk-vempty { padding: 96px 60px 44px; }
  .mk-vempty-tl { top: -18px; left: -20px; width: 220px; }
  .mk-vempty-br { display: block; right: -20px; bottom: -16px; width: 230px; }
  .mk-vempty-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 52px; border-top: 1px solid #E6DED2; }
  .mk-vempty-facts li { padding: 22px 18px 6px; border-top: 0; }
  .mk-vempty-facts li + li { border-left: 1px solid #E6DED2; }
}

/* A vendor's own page */
.mk-vd { padding-top: 22px; }
.mk-crumb { color: var(--mk-soft); font-size: 13.5px; }
.mk-crumb a { color: var(--mk-soft); font-weight: 500; }
.mk-crumb a:hover { color: var(--accent); }
.mk-crumb i { margin: 0 .55em; color: var(--mk-faint); font-style: normal; }
.mk-vd-note { margin-top: 14px; }
.mk-vd-grid { display: grid; gap: 34px; margin-top: 18px; }
.mk-vd-pic { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-hero); background: var(--ivory); }
.mk-vd-pic > img { width: 100%; height: 100%; object-fit: cover; }
.mk-vd-pic.none { display: grid; place-items: center; aspect-ratio: 5 / 2; }
.mk-vd-pic.none .mk-mono { width: min(34%, 170px); }
.mk-vd-head { margin-top: 28px; }
.mk-vd-head .mk-h1 { margin-top: 10px; overflow-wrap: anywhere; }
.mk-vd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.mk-vd-meta:empty { display: none; }
.mk-vd-meta b { color: var(--mk-ink); font: italic 300 23px/1.2 var(--font-serif); font-variant-numeric: lining-nums; }
.mk-vd-text { max-width: 64ch; margin-top: 22px; color: #453B49; font-size: 17px; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; }
.mk-vd-contact { padding: 28px 24px 24px; border: 1px solid var(--mk-line); border-radius: var(--r-hero); background: #fff; }
.mk-vd-sub { margin-top: 6px; color: var(--mk-soft); font-size: 15px; }
.mk-vd-actions { display: grid; gap: 10px; margin-top: 20px; }
.mk-vd-actions form.inline { display: block; }
.mk-vd-care { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--mk-line); color: var(--mk-soft); font-size: 13px; line-height: 1.6; }
.mk-vd-report { margin-top: 16px; color: var(--mk-soft); font-size: 13px; text-align: center; }
@media (min-width: 940px) {
  .mk-vd { padding-top: 34px; }
  .mk-vd-grid { grid-template-columns: minmax(0, 1.55fr) minmax(310px, .85fr); align-items: start; gap: 64px; margin-top: 22px; }
  .mk-vd-side { position: sticky; top: 104px; }
  .mk-vd-contact { padding: 34px 30px 28px; }
}

/* ─── For wedding businesses: "your own page, your own link" ───────────── */
/* A short link, set like the address bar of a browser. */
.mk-addr { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 46px; padding: 0 20px 0 15px; border: 1px solid #E3D9E3; border-radius: var(--r-pill); background: #fff; box-shadow: 0 14px 28px -22px rgba(42, 32, 40, .5); color: var(--mk-soft); font: 500 15px/1.2 var(--font-sans); white-space: nowrap; }
.mk-addr svg { flex: none; width: 16px; height: 16px; color: var(--sage-deep); }
.mk-addr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mk-addr b { color: var(--accent); font-weight: 700; }
.mk-addr.typing b::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; background: var(--accent); vertical-align: -0.16em; }
@media (prefers-reduced-motion: no-preference) { .mk-addr.typing b::after { animation: mk-caret 1.1s steps(1) infinite; } }

/* A template as a phone screen: a fine bezel, two by three, the top of the picture showing. */
.mk-screen { display: block; aspect-ratio: 2 / 3; padding: 5px; border-radius: 24px; background: linear-gradient(150deg, #fff, #EFE9EE); box-shadow: 0 0 0 1px #E3DCE3, 0 26px 40px -26px rgba(42, 32, 40, .45); }
.mk-screen img { width: 100%; height: 100%; border-radius: 19px; background: var(--ivory); object-fit: cover; object-position: 50% 0; }

/* The hero: one page in front, two more looks behind it, its link above and a chat below. */
.mk-biz-hero { position: relative; padding: 30px 0 0; overflow: hidden; overflow: clip; }
.mk-biz-hero-grid { display: grid; gap: 40px; }
.mk-biz-copy { display: grid; justify-items: center; text-align: center; }
.mk-biz-copy .mk-h1 { margin-top: 12px; }
.mk-biz-copy .mk-addr { margin-top: 20px; }
.mk-biz-copy .mk-lead { max-width: 34ch; margin-top: 18px; }
.mk-biz-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 24px; }
.mk-biz-copy .mk-note { margin-top: 14px; }
.mk-biz-stage { position: relative; width: 30em; height: 33.4em; margin: 0 auto 44px; font-size: clamp(9.4px, 2.9vw, 12.6px); }
.mk-biz-stage .mk-screen { position: absolute; padding: .42em; border-radius: 2em; }
.mk-biz-stage .mk-screen img { border-radius: 1.6em; }
.mk-biz-stage .s-a, .mk-biz-stage .s-b { top: 4.2em; width: 14em; }
.mk-biz-stage .s-a { left: 0; transform: rotate(-8deg); }
.mk-biz-stage .s-b { right: 0; transform: rotate(8deg); }
.mk-biz-stage .s-c { top: 0; left: 6.4em; z-index: 1; width: 17.2em; }
.mk-biz-chat { position: absolute; right: -.4em; bottom: 0; left: -.4em; z-index: 2; display: grid; gap: .7em; font-size: 1.02em; }
.mk-biz-chat .mk-bubble { max-width: 17.6em; box-shadow: var(--mk-float-shadow); }
.mk-biz-chat .mk-bubble.out { box-shadow: 0 0 0 1px rgba(30, 60, 30, .05), 0 18px 44px -20px rgba(42, 32, 40, .3); }
.mk-biz-sprig { position: absolute; top: -1.6em; left: -5.6em; width: 7em; transform: rotate(-18deg); }
@media (prefers-reduced-motion: no-preference) {
  .mk-biz-copy > * { animation: mw-rise 900ms var(--ease-out) both; }
  .mk-biz-copy > :nth-child(2) { animation-delay: 80ms; }
  .mk-biz-copy > :nth-child(3) { animation-delay: 160ms; }
  .mk-biz-copy > :nth-child(4) { animation-delay: 230ms; }
  .mk-biz-copy > :nth-child(5) { animation-delay: 300ms; }
  .mk-biz-copy > :nth-child(6) { animation-delay: 360ms; }
  .mk-biz-stage .s-c { animation: mk-screen-in 1100ms var(--ease-out) 200ms both; }
  .mk-biz-stage .s-a { --turn: -8deg; animation: mk-screen-fan 1200ms var(--ease-out) 700ms both; }
  .mk-biz-stage .s-b { --turn: 8deg; animation: mk-screen-fan 1200ms var(--ease-out) 800ms both; }
  .mk-biz-chat .mk-bubble { animation: mk-bubble-in 700ms var(--ease-out) 1900ms both; transform-origin: 0 100%; }
  .mk-biz-chat .mk-bubble.out { animation-delay: 2700ms; transform-origin: 100% 100%; }
  .mk-biz-sprig { animation: mk-fade-in 1600ms var(--ease-soft) 900ms both; }
}
@keyframes mk-screen-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes mk-screen-fan { from { opacity: 0; transform: translateY(18px) rotate(0deg); } to { opacity: 1; transform: rotate(var(--turn)); } }
@keyframes mk-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) { .mk-biz-hero { padding-top: 48px; } .mk-biz-copy .mk-lead { max-width: 46ch; } }
@media (min-width: 980px) {
  .mk-biz-hero { padding: 0; }
  .mk-biz-hero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; gap: 32px; min-height: min(calc(100svh - 76px), 780px); }
  .mk-biz-copy { justify-items: start; padding: 40px 0 56px; text-align: left; }
  .mk-biz-copy .mk-h1 { font-size: clamp(56px, 5.6vw, 78px); line-height: 1; }
  .mk-biz-copy .mk-addr { min-height: 52px; margin-top: 26px; padding: 0 24px 0 18px; font-size: 17px; }
  .mk-biz-copy .mk-lead { max-width: 30em; margin-top: 22px; }
  .mk-biz-cta { justify-content: flex-start; margin-top: 30px; }
  .mk-biz-stage { margin: 34px auto 60px; font-size: clamp(12.6px, 1.24vw, 15.4px); }
}

/* What you get: six plain promises, three across on a wide screen. */
.mk-biz-get .mk-feats { margin-top: 38px; }
@media (min-width: 980px) { .mk-feats.mk-feats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; } }

/* The templates. A row to swipe on a phone; on a wide screen a wall, one column for each layout. */
.mk-biz-tpls { overflow: hidden; overflow: clip; }
.mk-tpls { margin-top: 24px; }
.mk-tpl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: min(60vw, 240px); gap: 22px; margin: 0; padding: 20px var(--mk-gut) 22px; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scroll-padding-left: var(--mk-gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mk-tpl-rail::-webkit-scrollbar { display: none; }
.mk-tpl { min-width: 0; scroll-snap-align: start; }
.mk-tpl-family { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mk-tpl .mk-screen { transition: transform .7s var(--ease-out), box-shadow .7s var(--ease-out); }
  .mk-tpl:hover .mk-screen { box-shadow: 0 0 0 1px #E3DCE3, 0 34px 46px -28px rgba(42, 32, 40, .5); transform: translateY(-8px); }
}
.mk-tpl-kind { display: flex; align-items: center; gap: .7em; margin-top: 18px; font: 700 10px/1.5 var(--font-sans); letter-spacing: 1.6px; text-transform: uppercase; }
.mk-tpl-kind i { color: var(--mk-soft); font-style: normal; }
.mk-tpl-kind i::after { content: "·"; margin-left: .7em; color: var(--champagne); }
.mk-tpl-kind b { color: var(--mk-gold); }
.mk-tpl-kind b.free { color: var(--sage-deep); }
.mk-tpl h3 { margin-top: 3px; color: var(--mk-ink); font: 400 25px/1.14 var(--font-serif); }
.mk-tpl-note { margin-top: 4px; color: var(--mk-soft); font-size: 13.5px; line-height: 1.5; }
@media (max-width: 899px) { html.js .mk-tpl[data-reveal] { opacity: 1; transform: none; transition: none; } }
@media (min-width: 900px) {
  .mk-tpls { max-width: var(--mk-max); margin: 52px auto 0; padding: 0 var(--mk-gut); }
  .mk-tpl-rail { grid-auto-flow: row dense; grid-auto-columns: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 40px 30px; padding: 0; overflow: visible; }
  .mk-tpl, .mk-tpl-family { grid-column: var(--col); }
  .mk-tpl-family { display: block; margin-bottom: -18px; padding-bottom: 12px; border-bottom: 1px solid var(--mk-line); color: var(--mk-ink); font: italic 300 23px/1.2 var(--font-serif); }
  .mk-tpl-kind i { display: none; }
  .mk-tpl h3 { font-size: 23px; }
  .mk-biz-tpls .mk-designs-sprig { top: 44px; right: 3%; width: 104px; }
}

/* How it works: four numbered steps. */
.mk-biz-steps { display: grid; margin: 38px 0 0; padding: 0; list-style: none; counter-reset: step; }
.mk-biz-steps li { position: relative; padding: 18px 0 18px 58px; border-top: 1px solid #E6DED2; counter-increment: step; }
.mk-biz-steps li:last-child { border-bottom: 1px solid #E6DED2; }
.mk-biz-steps li::before { content: counter(step); position: absolute; top: 17px; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--champagne); border-radius: 50%; background: #fff; color: var(--mk-gold); font: 400 21px/1 var(--font-serif); font-variant-numeric: lining-nums; }
.mk-biz-steps b { display: block; color: var(--mk-ink); font: 400 24px/1.2 var(--font-serif); }
.mk-biz-steps span { display: block; margin-top: 4px; color: var(--mk-soft); font-size: 15px; line-height: 1.6; text-wrap: pretty; }
@media (min-width: 900px) {
  .mk-biz-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin-top: 64px; }
  .mk-biz-steps li, .mk-biz-steps li:last-child { padding: 66px 0 0; border: 0; }
  .mk-biz-steps li::before { top: 0; width: 46px; height: 46px; font-size: 24px; }
  .mk-biz-steps li::after { content: ""; position: absolute; top: 23px; right: -18px; left: 64px; height: 1px; background: #E0D6C6; }
  .mk-biz-steps li:last-child::after { display: none; }
  .mk-biz-steps b { font-size: 27px; }
}

/* What it costs: the paid year is named, not priced (the dashboard gives the figure). */
.mk-price.mk-price-words { margin-top: 14px; font-size: 40px; line-height: 1.04; letter-spacing: -0.012em; text-wrap: balance; }
.mk-price-words em { font-style: italic; }
@media (min-width: 800px) { .mk-price.mk-price-words { min-height: 76px; display: grid; align-content: end; font-size: 38px; } }
.mk-close-card .mk-biz-cta { margin-top: 28px; }

/* The invitation to businesses, on the landing page and under the directory: the words on
   paper, three templates fanned like cards in a hand. */
.mk-biz-invite { position: relative; display: grid; overflow: hidden; border-radius: var(--r-hero); background: var(--ivory); }
.mk-biz-invite-copy { display: grid; justify-items: start; padding: 34px 24px 0; }
.mk-biz-invite .mk-h3 { margin-top: 10px; font-size: 34px; line-height: 1.08; }
.mk-biz-invite .mk-h3 em { font-style: italic; }
.mk-biz-invite-copy > p { max-width: 42ch; margin-top: 12px; color: var(--mk-soft); line-height: 1.62; }
.mk-biz-invite .mk-addr { margin-top: 18px; }
p.mk-biz-invite-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.mk-biz-invite-fan { position: relative; height: 236px; margin-top: 30px; }
.mk-biz-invite-fan .mk-screen { position: absolute; top: 34px; left: 50%; width: 168px; margin-left: -84px; transform-origin: 50% 150%; }
.mk-biz-invite-fan .mk-screen:nth-child(1) { transform: rotate(-16deg); }
.mk-biz-invite-fan .mk-screen:nth-child(2) { z-index: 1; top: 12px; }
.mk-biz-invite-fan .mk-screen:nth-child(3) { transform: rotate(16deg); }
/* The fan opens as the panel comes into view, and a little further under the pointer. */
@media (prefers-reduced-motion: no-preference) {
  .mk-biz-invite-fan .mk-screen { transition: transform 1.1s var(--ease-out) .2s; }
  html.js .mk-biz-invite:not(.in) .mk-biz-invite-fan .mk-screen { transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mk-biz-invite.in:hover .mk-screen { transition-delay: 0s; }
  .mk-biz-invite.in:hover .mk-screen:nth-child(1) { transform: rotate(-19deg); }
  .mk-biz-invite.in:hover .mk-screen:nth-child(3) { transform: rotate(19deg); }
}
@media (min-width: 860px) {
  .mk-biz-invite { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; min-height: 380px; }
  .mk-biz-invite-copy { padding: 52px 0 52px 56px; }
  .mk-biz-invite .mk-h3 { font-size: 44px; }
  .mk-biz-invite-fan { align-self: stretch; height: auto; margin: 0; }
  .mk-biz-invite-fan .mk-screen { top: 92px; width: 226px; margin-left: -113px; }
  .mk-biz-invite-fan .mk-screen:nth-child(2) { top: 60px; }
}
.mk-vend-biz { margin-top: 30px; }
.mk-vgrid + .mk-biz-invite { margin-top: 68px; }
.mk-vempty .mk-addr { margin-top: 24px; }
.mk-vempty .mk-addr + .mk-vempty-cta { margin-top: 20px; }
@media (min-width: 900px) { .mk-vend-biz { margin-top: 108px; } .mk-vend { padding-bottom: 124px; } }

/* Thank-you, error and offline pages: one ornament, one thought, one way on. */
.mk-plain { display: grid; justify-items: center; max-width: 660px; padding-top: 52px; padding-bottom: 100px; text-align: center; }
.mk-plain .mk-h1 { margin-top: 20px; font-size: clamp(38px, 9.6vw, 56px); }
.mk-plain .mk-lead b { color: var(--mk-ink); }
.mk-plain-sprig { width: 150px; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .mk-plain > * { animation: mw-rise 900ms var(--ease-out) both; }
  .mk-plain > :nth-child(2) { animation-delay: 90ms; }
  .mk-plain > :nth-child(3) { animation-delay: 170ms; }
  .mk-plain > :nth-child(4) { animation-delay: 250ms; }
  .mk-plain .mk-mono img { animation: mk-turn 1600ms var(--ease-out) both; }
}
@keyframes mk-turn { from { opacity: 0; transform: rotate(-16deg) scale(.92); } to { opacity: 1; transform: none; } }
@media (min-width: 760px) { .mk-plain { padding-top: 84px; padding-bottom: 130px; } }

/* Terms and privacy */
.mk-legal { max-width: 780px; padding-top: 40px; padding-bottom: 100px; }
.mk-legal-head { text-align: center; }
.mk-legal-head .mk-h1 { margin-top: 12px; }
.mk-legal-date { margin-top: 12px; color: var(--mk-soft); font: italic 300 17px/1.3 var(--font-serif); }
.mk-legal-orn { width: 170px; height: auto; margin: 22px auto 0; }
.mk-legal-body { margin-top: 18px; }
.mk-legal-body h2 { margin-top: 46px; color: var(--mk-ink); font: 400 29px/1.2 var(--font-serif); letter-spacing: -0.006em; }
.mk-legal-body p, .mk-legal-body li { margin-top: 12px; color: #4A404E; font-size: 16.5px; line-height: 1.75; }
.mk-legal-body ul { margin: 0; padding-left: 20px; }
.mk-legal-body li::marker { color: var(--champagne); }
.mk-legal-body b { color: var(--mk-ink); }
.mk-legal-body a { font-weight: 500; text-decoration: underline; text-decoration-color: rgba(139, 58, 139, .3); text-underline-offset: 4px; }
@media (min-width: 760px) { .mk-legal { padding-top: 72px; } }