/* marked page sections: the week that fills itself, the client cycle, features by who uses them,
   the business ribbon, plans, trust and the closing call. Scoped to body.mk. */

/* ---------- a week of slots: before and with marked ---------- */
.mk-week { display: grid; gap: 20px; }
@media (min-width: 1040px) { .mk-week { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.mk-board { background: #fff; border-radius: 28px; padding: clamp(16px, 2.2vw, 28px); box-shadow: 0 1px 0 var(--mk-line), 0 30px 70px rgba(42,10,143,.1); min-width: 0; }
.mk-board-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.mk-switch { display: inline-flex; padding: 4px; border-radius: 100px; background: var(--mk-lav); }
.mk-switch button { border: 0; cursor: pointer; padding: 11px 20px; border-radius: 100px; background: transparent; color: var(--mk-text2); font: 600 14px/1 var(--mk-body); transition: background .3s, color .3s; }
.mk-switch button[aria-pressed="true"] { background: var(--mk-violet); color: #fff; }
.mk-board-top .mk-eyebrow { color: var(--mk-text2); }
.mk-grid { display: grid; grid-template-columns: 44px repeat(6, minmax(0, 1fr)); gap: 6px; }
.mk-grid .d, .mk-grid .t { font: 500 11px/1 var(--mk-mono); color: var(--mk-text2); text-transform: uppercase; letter-spacing: .04em; }
.mk-grid .d { text-align: center; padding-bottom: 6px; }
.mk-grid .t { align-self: center; }
.slot { position: relative; min-height: 54px; border-radius: 12px; padding: 8px 9px; display: grid; align-content: center; gap: 3px; background: #fbfaff; box-shadow: inset 0 0 0 1px #ece6fb; transition: background .45s ease, box-shadow .45s ease, color .45s ease; transition-delay: var(--dl, 0s); min-width: 0; }
.slot b { font: 700 12px/1.1 var(--mk-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot small { font: 500 10px/1.1 var(--mk-mono); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .ic { position: absolute; right: 7px; top: 7px; width: 13px; height: 13px; }
.slot.p { background: #f1eff6; box-shadow: inset 0 0 0 1px #e4e0ee; color: #5c5670; }
.slot.n { background: repeating-linear-gradient(135deg, #f6f3fd 0 6px, #fff 6px 12px); box-shadow: inset 0 0 0 1px #e4def6; color: #8c84a8; }
.slot.n b { text-decoration: line-through; }
.slot.b, .slot.c { background: var(--mk-violet); box-shadow: none; color: #fff; }
.slot.c { background: var(--mk-bright); }
.mk-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font: 500 12px/1.2 var(--mk-body); color: var(--mk-text2); }
.mk-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mk-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.mk-side { display: grid; gap: 10px; }
.mk-side li { list-style: none; background: #fff; border-radius: 18px; padding: 18px 20px; display: grid; gap: 6px; box-shadow: 0 1px 0 var(--mk-line); }
.mk-side ul { margin: 0; padding: 0; display: grid; gap: 10px; }
.mk-side b { font: 700 17px/1.2 var(--mk-display); letter-spacing: -0.02em; }
.mk-side span { font: 400 14px/1.45 var(--mk-body); color: var(--mk-text2); }
.mk-side [data-for] { display: none; }
.mk-week[data-state="before"] .mk-side [data-for="before"], .mk-week[data-state="after"] .mk-side [data-for="after"] { display: grid; }
@media (max-width: 720px) {
  .mk-grid { grid-template-columns: 34px repeat(3, minmax(0, 1fr)); }
  .mk-grid .late { display: none; }
  .slot { min-height: 50px; }
}

/* ---------- the client cycle ---------- */
.mk-cycle { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .mk-cycle { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); } }
.mk-ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.mk-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mk-ring .track { fill: none; stroke: #262626; stroke-width: 14; }
.mk-ring .arc { fill: none; stroke: var(--mk-violet); stroke-width: 14; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.65,0,.35,1); }
.mk-ring .stop { fill: var(--mk-dark); stroke: #3a3a3a; stroke-width: 3; transition: fill .4s, stroke .4s; }
.mk-ring .stop.on { fill: var(--mk-violet); stroke: var(--mk-violet); }
.mk-ring .ring-iso { position: absolute; left: 50%; top: 50%; width: 34%; transform: translate(-50%, -50%); }
.mk-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; counter-reset: s; }
.mk-steps li { counter-increment: s; display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; padding: 16px 18px; border-radius: 18px; transition: background .4s, box-shadow .4s; cursor: pointer; }
.mk-steps li::before { content: counter(s); grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--mk-mono); color: var(--mk-lilac); box-shadow: inset 0 0 0 2px #3a3a3a; transition: background .4s, color .4s, box-shadow .4s; }
.mk-steps b { font: 700 19px/1.2 var(--mk-display); letter-spacing: -0.02em; }
.mk-steps span { font: 400 14px/1.45 var(--mk-body); color: rgba(255,255,255,.66); }
.mk-steps li.on { background: var(--mk-dark2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.mk-steps li.on::before { background: var(--mk-violet); color: #fff; box-shadow: none; }

/* ---------- features by who uses them ---------- */
.mk-groups { display: grid; gap: 14px; }
@media (min-width: 1000px) { .mk-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-group { border-radius: 28px; padding: clamp(24px, 2.6vw, 34px); display: grid; gap: 24px; align-content: start; min-width: 0; }
.mk-group:not(.mk-grain, .lav) { background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-group.lav { background: var(--mk-dark); color: #fff; box-shadow: none; }
.mk-group.lav .mk-p, .mk-group.lav li span { color: rgba(255,255,255,.7); }
.mk-group.mk-grain { box-shadow: none; }
.mk-group header { display: grid; gap: 10px; }
.mk-group ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.mk-group li { display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; align-items: start; }
.mk-group .ic { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mk-lav); color: var(--mk-violet); }
.mk-group.lav .ic { background: var(--mk-dark2); color: var(--mk-lilac); }
.mk-group.mk-grain .ic { background: rgba(255,255,255,.16); color: #fff; }
.mk-group .ic svg { width: 20px; height: 20px; }
.mk-group li b { font: 700 16px/1.25 var(--mk-body); }
.mk-group li span { font: 400 14px/1.45 var(--mk-body); color: var(--mk-text2); }
.mk-group.mk-grain li span { color: rgba(255,255,255,.8); }

/* ---------- business ribbon ---------- */
.mk-ribbon { overflow: hidden; padding-block: clamp(28px, 4vw, 48px); border-block: 1px solid var(--mk-line); }
.mk-ribbon-track { display: flex; width: max-content; gap: clamp(24px, 3vw, 44px); align-items: center; animation: mk-ribbon 46s linear infinite; }
.mk-ribbon-track span { font: 700 clamp(34px, 5.4vw, 76px)/1 var(--mk-display); letter-spacing: -0.04em; color: var(--mk-violet); white-space: nowrap; }
.mk-ribbon-track img { height: clamp(26px, 3.6vw, 48px); width: auto; opacity: .35; }
.mk-ribbon:hover .mk-ribbon-track { animation-play-state: paused; }
@keyframes mk-ribbon { to { transform: translateX(-50%); } }

/* ---------- plans ---------- */
.mk-plans { display: grid; gap: 14px; }
@media (min-width: 900px) { .mk-plans { grid-template-columns: 1fr 1fr; } }
.mk-plan { border-radius: 28px; padding: clamp(26px, 3vw, 40px); display: grid; gap: 18px; align-content: start; }
.mk-plan:not(.mk-grain) { background: #fff; box-shadow: inset 0 0 0 1px var(--mk-line); }
.mk-plan.mk-grain { box-shadow: 0 30px 70px rgba(67,18,204,.3); }
.mk-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.mk-plan li { display: flex; gap: 12px; align-items: baseline; font: 500 15px/1.4 var(--mk-body); color: var(--mk-text2); }
.mk-plan li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--mk-violet); transform: translateY(-1px); }
.mk-plan.mk-grain li { color: rgba(255,255,255,.88); }
.mk-plan.mk-grain li::before { background: var(--mk-lilac); }
.mk-addon { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 22px clamp(26px, 3vw, 40px); border-radius: 22px; background: var(--mk-dark); color: #fff; }
.mk-addon .mk-btn.ghost { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.mk-addon b { font: 700 19px/1.2 var(--mk-display); letter-spacing: -0.02em; }
.mk-addon span { font: 400 15px/1.45 var(--mk-body); color: rgba(255,255,255,.7); }

/* ---------- trust ---------- */
.mk-trust { display: grid; gap: 0 32px; }
@media (min-width: 720px) { .mk-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .mk-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mk-trust div { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--mk-line); }
.mk-trust b { font: 700 18px/1.2 var(--mk-display); letter-spacing: -0.02em; }
.mk-trust span { font: 400 14px/1.45 var(--mk-body); color: var(--mk-text2); }

/* ---------- closing call ---------- */
.mk-cta { position: relative; overflow: hidden; border-radius: 40px; padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px); display: grid; justify-items: center; text-align: center; gap: 22px; }
.mk-cta .mk-actions { justify-content: center; }
.mk-cta .mk-iso { width: 72px; }

@media (prefers-reduced-motion: reduce) { .mk-ribbon-track { animation: none; } .slot { transition: none; } }