/* ============================================================
   SLAYD COMPANY WEBSITE, SIGNED OUT (2026-10-06)

   The stylesheet of the site js/home.js renders as AUTH_VIEWS.home: Home
   ('' and the old marketing hashes) and Pricing (#pricing). Help (/faq),
   Support (/support) and the legal pages are static pages that carry the
   SAME header; they may link this file for it (every rule here is scoped,
   see below) or copy the TOKENS and HEADER blocks verbatim.

   The look is the APP's (docs/WEB_APP_SPEC.md): the system font, white
   and blush grounds, the brand gradient on the one primary action and on
   card outlines, rounded squares, never circles. ADAPTIVE: dark mode is
   the app's plum ramp (sx.css dusk), never black, and every fill under a
   gradient border-box is opaque so the border never shows through.

   EVERY SELECTOR IS SCOPED. slayd.css is unlayered and owns bare element
   resets and many short class names (.app .nav .btn .card), so nothing
   here is global: every class is mk-* (s-* inside the device mockups,
   still under .mk), and the header block works with no .mk around it.

   Product imagery is real: .mk-phone.mk-shot is an iPhone frame around a
   screenshot of the Slayd iPhone app (light mode, sample data; see
   js/home.js SHOT for how each one was taken). The frame scales with
   --pw. The web-app window (.mk-browser) is still drawn in HTML.
   ============================================================ */

/* ---------- prerender gate (see index.html, the head gate) ---------- */
html.pre-off #auth-mount[data-pre] > * { display: none !important; }

/* ---------- the takeover: #login hands the viewport to the site ----------
   ONLY while #login is showing. Signed in, the app hides #login with the
   hidden attribute and the homepage stays in the DOM; an unguarded
   `display: block !important` here (0,2,0) beat slayd.css's
   `[hidden] { display: none !important }` (0,1,0) and painted the signed-out
   site over the app, pushing #shell ~9,000px down. Every rule below is
   scoped to #login:not([hidden]) for that reason. */
.login:not([hidden]):has(.mk) { display: block !important; padding: 0 !important; min-height: 0 !important;
  overflow: visible !important; background: #fff !important; background-image: none !important; }
.login:not([hidden]):has(.mk)::before, .login:not([hidden]):has(.mk)::after { display: none !important; }
.login:not([hidden]) .login-inner.signin-wrap:has(.mk) { max-width: none !important; width: 100%; padding: 0 !important; margin: 0 !important; }
body:has(#login:not([hidden]) .mk) { background: #fff !important; }
html:has(#login:not([hidden]) .mk) { scroll-padding-top: 84px; }


/* =================== TOKENS: BEGIN (shared with the static pages) ===================
   Declared on .mk (this site), .mk-top (the header, alone on a static
   page) and .mk-foot. Light, then the dark ramp. */
.mk, .mk-top, .mk-foot {
  --mk-bg: #FFFFFF; --mk-wash: #FBF4F7; --mk-card: #FFFFFF; --mk-surface: #F5F3F4; --mk-soft: #FCE8EE;
  --mk-ink: #2A0F1A; --mk-mauve: #5A3D48; --mk-soft-ink: #7C6473; --mk-hint: rgba(90, 61, 72, .55);
  --mk-rose: #B83A77; --mk-pink: #F166A8; --mk-line: #EBE8E9; --mk-border: #E8B8C8;
  --mk-grad: linear-gradient(135deg, #F166A8 0%, #8092D4 60%, #A6A8D9 100%);
  --mk-grad-soft: linear-gradient(135deg, rgba(241, 102, 168, .55), rgba(128, 146, 212, .55) 60%, rgba(166, 168, 217, .55));
  --mk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mk-top-bg: rgba(255, 255, 255, .92);
  --mk-shade: rgba(42, 15, 26, .14);
  --mk-dim: rgba(42, 15, 26, .32);
  --mk-glow-a: rgba(241, 102, 168, .14); --mk-glow-b: rgba(128, 146, 212, .16);
}

/* =================== TOKENS: END =================== */

/* =================== HEADER: BEGIN (shared with the static pages) ===================
   <header class="mk-top"> — logo to /, the tabs, Sign in + Sign up at the
   right; below 1024px the tabs, Sign in and Sign up move into the menu
   (a <details>, so it opens with no script). The page marks its own tab
   with aria-current="page". .mk-web-only items (Pricing, Help, Get the
   app) are hidden inside the Android app (html.in-android-app). */
.mk-top { position: sticky; top: 0; z-index: 60; background: var(--mk-top-bg); color: var(--mk-ink);
  -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px);
  border-bottom: 1px solid var(--mk-line); font: 500 16px/1.4 var(--mk-font); -webkit-font-smoothing: antialiased; text-align: left; }
.mk-top *, .mk-top *::before, .mk-top *::after { box-sizing: border-box; }
.mk-top :where(nav, a, img, details, summary, span, i) { margin: 0; padding: 0; border: 0; background: none; }
.mk-top a { color: inherit; text-decoration: none; cursor: pointer; }
.mk-top img { display: block; max-width: none; }
.mk-top .ic { width: 1em; height: 1em; display: inline-flex; flex: none; font-style: normal; }
.mk-top .ic svg { width: 100%; height: 100%; }
.mk-top :focus-visible { outline: 2px solid var(--mk-pink); outline-offset: 2px; border-radius: 8px; }
.mk-top-in { display: flex; align-items: center; gap: 8px; height: 70px; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.mk-top .mk-logo { display: flex; align-items: center; flex: none; padding: 6px 2px; border-radius: 10px; }
.mk-top .mk-logo img { height: 30px; width: auto; }
.mk-top .mk-tabs { display: flex; align-items: center; gap: 2px; margin-left: 14px; min-width: 0; }
.mk-top .mk-tab { display: inline-flex; align-items: center; height: 40px; padding: 0 13px; border-radius: 11px; font: 600 15px/1 var(--mk-font);
  color: var(--mk-mauve); white-space: nowrap; transition: background .12s, color .12s; }
.mk-top .mk-tab:hover { background: var(--mk-wash); color: var(--mk-ink); }
.mk-top .mk-tab[aria-current="page"] { color: var(--mk-ink); background: var(--mk-soft); }
.mk-top .mk-right { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.mk-top .mk-signin { display: inline-flex; align-items: center; height: 42px; padding: 0 14px; border-radius: 12px; font: 700 15px/1 var(--mk-font);
  color: var(--mk-ink); white-space: nowrap; }
.mk-top .mk-signin:hover { background: var(--mk-wash); }
.mk-top .mk-signup { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 12px;
  font: 700 15px/1 var(--mk-font); color: #fff; white-space: nowrap; background: var(--mk-grad);
  box-shadow: 0 8px 20px rgba(241, 102, 168, .26); transition: transform .12s, box-shadow .12s; }
.mk-top .mk-signup:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(241, 102, 168, .32); }
.mk-top .mk-burger { display: none; margin-left: auto; }
.mk-top .mk-burger > summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: var(--mk-ink); font-size: 22px; border: 1.2px solid transparent;
  background: linear-gradient(var(--mk-bg), var(--mk-bg)) padding-box, var(--mk-grad-soft) border-box; }
.mk-top .mk-burger > summary::-webkit-details-marker { display: none; }
.mk-top .mk-burger > summary::marker { content: ""; }
.mk-top .mk-burger .mk-b-x { display: none; }
.mk-top .mk-burger[open] .mk-b-x { display: inline-flex; }
.mk-top .mk-burger[open] .mk-b-open { display: none; }
.mk-top .mk-sheet { position: absolute; left: 0; right: 0; top: 100%; background: var(--mk-bg); border-bottom: 1px solid var(--mk-line);
  box-shadow: 0 24px 40px var(--mk-shade), 0 100vmax 0 100vmax var(--mk-dim); padding: 6px 20px 22px;
  max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; }
.mk-top .mk-sheet-nav { display: block; }
.mk-top .mk-sheet-link { display: flex; align-items: center; justify-content: space-between; min-height: 56px;
  border-bottom: 1px solid var(--mk-line); font: 700 18px/1.2 var(--mk-font); color: var(--mk-ink); }
.mk-top .mk-sheet-link .ic { font-size: 18px; color: var(--mk-hint); }
.mk-top .mk-sheet-link[aria-current="page"] { color: var(--mk-rose); }
.mk-top .mk-sheet-ctas { display: grid; gap: 10px; margin-top: 18px; }
.mk-top .mk-sheet-ctas .mk-signup, .mk-top .mk-sheet-ctas .mk-signin { width: 100%; height: 52px; font-size: 16px; border-radius: 14px; justify-content: center; }
.mk-top .mk-sheet-ctas .mk-signin { border: 1.4px solid transparent;
  background: linear-gradient(var(--mk-bg), var(--mk-bg)) padding-box, var(--mk-grad) border-box; }
html.in-android-app .mk-top .mk-web-only { display: none !important; }
@media (min-width: 1280px) { .mk-top-in { padding: 0 32px; } }
@media (max-width: 1023px) {
  .mk-top .mk-tabs, .mk-top .mk-right { display: none; }
  .mk-top .mk-burger { display: block; }
  .mk-top-in { height: 64px; padding: 0 18px; }
  .mk-top .mk-logo img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .mk-top * { transition: none !important; } }
/* =================== HEADER: END =================== */

/* ---------- base ---------- */
.mk { --mk-pad: 20px; --mk-max: 1200px;
  position: relative; background: var(--mk-bg); color: var(--mk-ink); font-family: var(--mk-font);
  font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; text-align: left; overflow-x: clip; }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; }
.mk :where(h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, picture) { margin: 0; padding: 0; }
.mk :where(ul, ol) { list-style: none; }
.mk a { color: inherit; text-decoration: none; cursor: pointer; }
.mk img { display: block; max-width: 100%; }
.mk .mk-vis.mk-photo img { background: #F5EAEC; }
.mk button { font: inherit; color: inherit; }
.mk .ic { width: 1em; height: 1em; display: inline-flex; flex: none; }
.mk .ic svg { width: 100%; height: 100%; }
.mk :focus-visible { outline: 2px solid var(--mk-pink); outline-offset: 2px; border-radius: 6px; }
.mk .a-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mk-in { width: 100%; max-width: var(--mk-max); margin: 0 auto; padding: 0 var(--mk-pad); }
.mk-skip { position: absolute; left: 12px; top: 12px; z-index: 100; background: var(--mk-card); padding: 10px 14px;
  border-radius: 10px; font-weight: 700; transform: translateY(-300%); }
.mk-skip:focus { transform: none; box-shadow: 0 6px 20px var(--mk-shade); }
.mk-gt { background: var(--mk-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html:not(.ua-android) .mk .mk-android-only { display: none !important; }
html.ua-android .mk .mk-ios-only { display: none !important; }

/* ---------- buttons ---------- */
.mk .mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px;
  padding: 0 24px; border-radius: 14px; border: 0; font: 700 16px/1.2 var(--mk-font); letter-spacing: 0;
  text-align: center; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s; }
.mk .mk-btn .ic { font-size: 18px; }
.mk .mk-btn-p { background: var(--mk-grad); color: #fff; box-shadow: 0 8px 22px rgba(241, 102, 168, .26); }
.mk .mk-btn-p:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(241, 102, 168, .32); }
.mk .mk-btn-2 { color: var(--mk-ink); border: 1.4px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad) border-box; }
.mk .mk-btn-2:hover { background: linear-gradient(var(--mk-soft), var(--mk-soft)) padding-box, var(--mk-grad) border-box; }
.mk .mk-btn-w { background: #fff; color: #2A0F1A; box-shadow: 0 8px 22px rgba(42, 15, 26, .16); }
.mk .mk-btn-w:hover { transform: translateY(-1px); }
.mk .mk-btn-ghost { color: #fff; border: 1.4px solid rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .1); }
.mk .mk-btn-ghost:hover { background: rgba(255, 255, 255, .2); }
.mk .mk-btn-sm { min-height: 42px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.mk .mk-btn-lg { min-height: 58px; min-width: 240px; padding: 0 36px; font-size: 18px; border-radius: 16px; }
.mk .mk-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mk .mk-link { display: inline-flex; align-items: center; gap: 6px; color: var(--mk-rose); font-weight: 700; font-size: 15px; }
.mk .mk-link .ic { font-size: 16px; transition: transform .15s; }
.mk .mk-link:hover .ic { transform: translateX(3px); }

/* ---------- section grammar ---------- */
.mk-sec { padding: 96px 0; }
.mk-sec.mk-tight { padding: 64px 0; }
.mk-sec.mk-wash { background: var(--mk-wash); }
.mk-head { max-width: 760px; margin: 0 auto 52px; text-align: center; }
.mk .mk-eb { display: inline-flex; align-items: center; gap: 10px; font: 700 12.5px/1.2 var(--mk-font); letter-spacing: 1.5px !important;
  text-transform: uppercase; color: var(--mk-rose); margin-bottom: 14px; }
.mk .mk-h2 { font: 800 clamp(30px, 4vw, 46px)/1.1 var(--mk-font); letter-spacing: -.025em; color: var(--mk-ink); text-wrap: balance; }
.mk .mk-h3 { font: 800 clamp(26px, 3vw, 36px)/1.14 var(--mk-font); letter-spacing: -.02em; color: var(--mk-ink); text-wrap: balance; }
.mk .mk-sub { margin-top: 16px; font: 500 clamp(16px, 1.5vw, 19px)/1.55 var(--mk-font); color: var(--mk-mauve); text-wrap: pretty; }
.mk .mk-p { margin-top: 14px; font: 500 17px/1.6 var(--mk-font); color: var(--mk-mauve); }
.mk .mk-fine { margin-top: 14px; font: 500 14px/1.5 var(--mk-font); color: var(--mk-soft-ink); }
.mk-sec-cta { display: flex; justify-content: center; margin-top: 56px; }

/* ---------- hero: the big logo ---------- */
.mk-hero { position: relative; padding: 56px 0 72px; overflow: clip;
  background: radial-gradient(1000px 520px at 85% 0%, var(--mk-glow-b), transparent 70%),
              radial-gradient(900px 520px at 0% 10%, var(--mk-glow-a), transparent 70%),
              linear-gradient(180deg, var(--mk-wash) 0%, var(--mk-bg) 100%); }
.mk-hero-c { text-align: center; display: flex; flex-direction: column; align-items: center; }
.mk .mk-biglogo { display: block; width: min(560px, 84%); }
.mk .mk-biglogo img { width: 100%; height: auto; }
.mk .mk-h1 { margin-top: 18px; font: 800 clamp(32px, 4.4vw, 54px)/1.06 var(--mk-font); letter-spacing: -.03em; color: var(--mk-ink); text-wrap: balance; }
.mk .mk-lede { margin-top: 18px; max-width: 620px; font: 500 clamp(17px, 1.6vw, 20px)/1.55 var(--mk-font); color: var(--mk-mauve); text-wrap: pretty; }
.mk-hero-c .mk-lede { margin-left: auto; margin-right: auto; }
.mk-hero-c .mk-ctas { justify-content: center; }
.mk .mk-hero-in { margin-top: 16px; font: 500 15.5px/1.4 var(--mk-font); color: var(--mk-mauve); }
.mk .mk-hero-in a { color: var(--mk-rose); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.mk-hero-c .mk-fine { margin-top: 10px; }
.mk .mk-pre { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px;
  font: 700 13px/1.2 var(--mk-font); color: var(--mk-rose); border: 1.2px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; }
.mk .mk-pre .ic { font-size: 15px; }
.mk .mk-h1.mk-h1-pg { margin-top: 20px; font-size: clamp(34px, 4.6vw, 56px); }
.mk-hero-pg { padding: 64px 0 56px; }
.mk-away { min-height: 60vh; }

/* the stage: three phones under the hero */
.mk-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; min-width: 0; margin-top: 56px; }
.mk-stage .mk-phone.mk-front { --pw: 290px; z-index: 2; }
.mk-stage .mk-phone.mk-side { --pw: 236px; z-index: 1; opacity: .98; }
.mk-stage .mk-phone.mk-l { margin-right: -38px; transform: translateY(-26px) rotate(-4deg); }
.mk-stage .mk-phone.mk-r { margin-left: -38px; transform: translateY(-26px) rotate(4deg); }
.mk-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  max-width: 270px; font-size: 14px; line-height: 1.3; box-shadow: 0 16px 36px var(--mk-shade); border: 1.2px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; text-align: left; }
.mk-float b { display: block; font-weight: 800; color: var(--mk-ink); }
.mk-float span { color: var(--mk-mauve); font-weight: 500; font-size: 13px; }
.mk-float .mk-fi { width: 38px; height: 38px; border-radius: 11px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--mk-grad); color: #fff; font-size: 18px; }
.mk-stage .mk-float.mk-f1 { left: calc(50% - 470px); top: 26%; }
.mk-stage .mk-float.mk-f2 { right: calc(50% - 470px); bottom: 22%; }

/* ---------- device frame ---------- */
.mk .mk-phone { --pw: 280px; position: relative; isolation: isolate; width: var(--pw); aspect-ratio: 9 / 19.2; flex: none;
  padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .165); background: #1b0d14;
  box-shadow: 0 34px 70px var(--mk-shade), 0 6px 16px rgba(42, 15, 26, .12), inset 0 0 0 1.5px rgba(255, 255, 255, .14);
  font-size: calc(var(--pw) / 28); line-height: 1.25; }
/* the screens are pictures of the app in light mode, in both modes */
.mk .mk-phone, .mk .mk-browser { --mk-ink: #2A0F1A; --mk-mauve: #5A3D48; --mk-line: #EBE8E9; --mk-rose: #C2417F;
  --s-surface: #F5F3F4; --s-soft: #FCE8EE; --s-book: #FBF4F7; --s-border: #E8B8C8; --s-hint: rgba(90, 61, 72, .55); --s-blush: #F5EAEC;
  --s-pink: #F166A8; --s-purple: #8092D4; --s-green: #4CAF7D;
  --s-grad: linear-gradient(135deg, #F166A8 0%, #8092D4 60%, #A6A8D9 100%);
  --s-grad-soft: linear-gradient(135deg, rgba(241, 102, 168, .55), rgba(128, 146, 212, .55) 60%, rgba(166, 168, 217, .55)); }
.mk .mk-screen { position: relative; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  border-radius: calc(var(--pw) * .132); background: #fff; color: var(--mk-ink); text-align: left; }
.mk .mk-island { position: absolute; top: 1.15em; left: 50%; transform: translateX(-50%); width: 8.6em; height: 2.5em;
  border-radius: 1.25em; background: #1b0d14; z-index: 5; }

/* ---------- the screenshot inside the frame ----------
   .mk-shot: a real screenshot of the iPhone app (1206 x 2622, served at 600
   wide from /assets/app-screens/). The frame's aspect is set so the screen
   (the frame less its bezel) is exactly the screenshot's 1206:2622, so
   nothing is cropped; the island is drawn over the status bar the way the
   phone draws it. */
.mk .mk-phone.mk-shot { aspect-ratio: 1 / 2.094; background: linear-gradient(150deg, #FFFFFF 0%, #F3EFF1 55%, #E9E3E7 100%);
  box-shadow: 0 34px 70px var(--mk-shade), 0 6px 16px rgba(42, 15, 26, .10), inset 0 0 0 1px rgba(42, 15, 26, .10), inset 0 0 0 3px rgba(255, 255, 255, .9); }
.mk .mk-shot .mk-screen { display: block; box-shadow: 0 0 0 1px rgba(42, 15, 26, .08); }
.mk .mk-shot .mk-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #fff; }
.mk .mk-shot .mk-island { top: calc(var(--pw) * .032); width: calc(var(--pw) * .29); height: calc(var(--pw) * .088); border-radius: calc(var(--pw) * .044); }

/* ---------- browser frame (the web app) ---------- */
.mk-browser { width: 100%; max-width: 560px; border-radius: 16px; overflow: hidden; background: #fff; color: var(--mk-ink);
  box-shadow: 0 30px 60px var(--mk-shade), 0 0 0 1px rgba(42, 15, 26, .06); font-size: 13px; line-height: 1.3; }
.mk-br-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--s-surface); border-bottom: 1px solid var(--mk-line); }
.mk-br-bar i { width: 10px; height: 10px; border-radius: 3px; background: var(--s-border); }
.mk-br-bar span { margin-left: 10px; flex: 1; max-width: 220px; height: 24px; border-radius: 8px; background: #fff; display: flex; align-items: center;
  padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--mk-mauve); }
.mk-br-body { display: flex; min-height: 300px; }
.mk-br-side { width: 132px; flex: none; padding: 14px 10px; border-right: 1px solid var(--mk-line); display: flex; flex-direction: column; gap: 4px; }
.mk-br-side img { height: 20px; width: auto; margin: 0 6px 10px; }
.mk-br-side span { padding: 7px 8px; border-radius: 8px; font-weight: 600; color: var(--mk-mauve); }
.mk-br-side span.on { background: var(--s-soft); color: var(--mk-rose); }
.mk-br-main { flex: 1; min-width: 0; padding: 14px; background: var(--s-book); }
.mk-br-main > b { font-size: 18px; font-weight: 800; }
.mk-br-week { margin-top: 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.mk-br-week > div { background: #fff; border-radius: 10px; padding: 8px 6px; min-height: 210px; display: flex; flex-direction: column; gap: 6px; }
.mk-br-week small { font-size: 11px; font-weight: 700; color: var(--mk-mauve); }
.mk-br-week p { border-radius: 8px; padding: 6px; background: var(--s-soft); border-left: 3px solid var(--s-pink); }
.mk-br-week p.b { background: rgba(128, 146, 212, .14); border-left-color: var(--s-purple); }
.mk-br-week p.g { background: rgba(76, 175, 125, .12); border-left-color: var(--s-green); }
.mk-br-week p b { display: block; font-size: 11px; font-weight: 700; }
.mk-br-week p span { display: block; font-size: 10.5px; color: var(--mk-mauve); }
/* Five days only fit the full 560px frame. Beside the copy (1024 and up) the frame is
   404-480px and "Manicure" ran out of its chip, so any narrower frame shows the same
   three days the phone layout does, with a slimmer sidebar. Keyed on the frame's own
   width, not the viewport. */
.mk-browser { container-type: inline-size; }
@container (max-width: 559px) {
  .mk-br-side { width: 108px; }
  .mk-br-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-br-week > div:nth-child(n+4) { display: none; }
}

/* ---------- cards ---------- */
.mk-card { position: relative; border-radius: 20px; padding: 26px; border: 1.3px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; }
.mk-ico { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--mk-soft); color: var(--mk-pink); font-size: 22px; flex: none; }
.mk .mk-ico.mk-ico-s { width: 30px; height: 30px; border-radius: 9px; font-size: 16px; background: var(--mk-grad); color: #fff; }
.mk .mk-card h3 { margin-top: 10px; font: 800 22px/1.25 var(--mk-font); letter-spacing: -.01em; color: var(--mk-ink); }
.mk .mk-card p { margin-top: 8px; font: 500 16px/1.55 var(--mk-font); color: var(--mk-mauve); }
.mk .mk-card .mk-link { margin-top: 18px; }
.mk .mk-card .mk-eb { font: 700 12.5px/1.2 var(--mk-font); color: var(--mk-rose); }
.mk-grid { display: grid; gap: 18px; }
.mk-g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk .mk-soon { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 8px; margin-left: 8px; vertical-align: 1px;
  font: 700 12px/1 var(--mk-font); color: #fff; background: var(--mk-grad); letter-spacing: .02em; white-space: nowrap; }

/* About: the two cards */
.mk-about-card { padding: 32px; }
.mk .mk-about-card .mk-eb { margin: 22px 0 0; }

/* ---------- alternating feature rows ---------- */
.mk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.mk-row + .mk-row { margin-top: 104px; }
.mk-row.mk-rev .mk-row-txt { order: 2; }
.mk .mk-checks { margin-top: 22px; display: grid; gap: 12px; }
.mk .mk-checks li { display: flex; gap: 12px; align-items: flex-start; font: 500 16px/1.5 var(--mk-font); color: var(--mk-ink); }
.mk .mk-checks li .ic { flex: none; margin-top: 2px; width: 22px; height: 22px; padding: 4px; border-radius: 7px; background: var(--mk-grad); color: #fff; }
.mk .mk-checks li .mk-soon { margin-left: 10px; }
.mk-vis { position: relative; border-radius: 28px; padding: 44px 24px; min-height: 420px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(500px 300px at 20% 10%, var(--mk-glow-a), transparent 70%),
              radial-gradient(500px 320px at 90% 90%, var(--mk-glow-b), transparent 70%), var(--mk-soft);
  overflow: hidden; }
.mk-sec.mk-wash .mk-vis { background: radial-gradient(500px 300px at 20% 10%, var(--mk-glow-a), transparent 70%),
  radial-gradient(500px 320px at 90% 90%, var(--mk-glow-b), transparent 70%), var(--mk-bg); }
.mk-vis .mk-phone { --pw: 260px; }
.mk-vis .mk-phone + .mk-phone { margin-left: -40px; transform: translateY(30px); }
.mk-vis .mk-float { position: absolute; max-width: 250px; }
.mk-vis .mk-float.mk-f1 { left: 22px; top: auto; bottom: 36px; }
.mk-vis .mk-float.mk-f2 { right: 22px; top: 36px; bottom: auto; }
.mk-vis.mk-photo { padding: 0; min-height: 0; background: none; }
.mk-vis.mk-photo > img { width: 100%; height: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: 28px; }
.mk-vis.mk-photo .mk-float { left: 18px; bottom: 18px; }
.mk-vis.mk-vis-web { padding: 44px 28px; }

/* For clients: the numbered steps */
.mk .mk-steps { margin-top: 26px; display: grid; gap: 18px; counter-reset: none; }
.mk .mk-steps li { display: flex; gap: 16px; align-items: flex-start; }
.mk .mk-steps .mk-n { width: 40px; height: 40px; border-radius: 12px; flex: none; display: flex; align-items: center; justify-content: center;
  background: var(--mk-grad); color: #fff; font: 800 17px/1 var(--mk-font); }
.mk .mk-steps h3 { font: 800 18px/1.3 var(--mk-font); color: var(--mk-ink); }
.mk .mk-steps p { margin-top: 4px; font: 500 16px/1.55 var(--mk-font); color: var(--mk-mauve); }

/* the price summary at the bottom of Home */
.mk-psum-card { padding: 24px; }
.mk .mk-psum-card .mk-eb { margin-bottom: 10px; }
.mk .mk-psum-amt { display: block; font: 800 clamp(34px, 3.4vw, 44px)/1.05 var(--mk-font); letter-spacing: -.03em; color: var(--mk-ink); }
.mk .mk-psum-card p { margin-top: 8px; font-size: 15px; }

/* ---------- Pricing ---------- */
.mk-sec.mk-sec-plans { padding-top: 24px; }
.mk-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.mk-plan { position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: 30px 26px; border: 1.3px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; scroll-margin-top: 90px; }
.mk-plan.mk-feat { border-width: 2px; background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad) border-box;
  box-shadow: 0 24px 50px rgba(241, 102, 168, .16); }
.mk .mk-plan .mk-tagp { position: absolute; top: -14px; left: 26px; height: 28px; padding: 0 12px; border-radius: 9px; display: flex; align-items: center;
  background: var(--mk-grad); color: #fff; font: 700 13px/1 var(--mk-font); }
.mk .mk-plan .mk-eb { margin-bottom: 8px; }
.mk .mk-plan h3 { font: 800 22px/1.2 var(--mk-font); color: var(--mk-ink); }
.mk .mk-price { margin-top: 18px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.mk .mk-price b { font: 800 48px/1 var(--mk-font); letter-spacing: -.03em; color: var(--mk-ink); }
.mk .mk-price span { font: 600 16px var(--mk-font); color: var(--mk-mauve); }
.mk .mk-pnote { margin-top: 10px; font: 600 14px/1.45 var(--mk-font); color: var(--mk-rose); min-height: 41px; }
.mk-plan .mk-btn { margin-top: 20px; width: 100%; }
.mk .mk-plan .mk-checks { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--mk-line); gap: 12px; }
.mk .mk-plan .mk-checks li { font-size: 15px; }

.mk-split-card { max-width: 900px; margin: 0 auto; padding: 30px; }
.mk .mk-split-card h3 { margin-top: 0; }
.mk-split { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mk-split div { border-radius: 16px; padding: 18px; background: var(--mk-wash); }
.mk .mk-split small { display: block; font: 700 12px/1.3 var(--mk-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mk-mauve); }
.mk .mk-split b { display: block; margin-top: 6px; font: 800 32px/1.1 var(--mk-font); letter-spacing: -.02em; color: var(--mk-ink); }
.mk .mk-split span { display: block; margin-top: 4px; font: 500 14px/1.4 var(--mk-font); color: var(--mk-mauve); }
.mk-split div.mk-hl { background: var(--mk-grad); }
.mk .mk-split div.mk-hl small, .mk .mk-split div.mk-hl span { color: rgba(255, 255, 255, .92); }
.mk .mk-split div.mk-hl b { color: #fff; }

.mk-tablewrap { max-width: 980px; margin: 0 auto; border-radius: 22px; overflow: hidden; border: 1.3px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; }
.mk table.mk-table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.mk .mk-table th, .mk .mk-table td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--mk-line); vertical-align: top; }
.mk .mk-table thead th { font: 800 14px/1.3 var(--mk-font); letter-spacing: .02em; color: var(--mk-mauve); background: var(--mk-wash); }
.mk .mk-table tbody th { font-weight: 700; color: var(--mk-ink); width: 38%; }
.mk .mk-table td { color: var(--mk-mauve); font-weight: 500; }
.mk .mk-table tr.mk-tgroup th { padding: 22px 22px 10px; width: auto; font: 700 12.5px/1.2 var(--mk-font); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--mk-rose); border-bottom: 1px solid var(--mk-line); }
.mk .mk-table tr:last-child th, .mk .mk-table tr:last-child td { border-bottom: 0; }

.mk-topics { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.mk .mk-topics a { height: 42px; padding: 0 16px; border-radius: 12px; display: inline-flex; align-items: center; background: var(--mk-card);
  font-weight: 700; font-size: 15px; color: var(--mk-ink); border: 1.2px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; }
.mk .mk-topics a:hover { background: linear-gradient(var(--mk-soft), var(--mk-soft)) padding-box, var(--mk-grad) border-box; }

/* ---------- FAQ ---------- */
.mk-faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.mk-faq details { border-radius: 18px; border: 1.2px solid transparent;
  background: linear-gradient(var(--mk-card), var(--mk-card)) padding-box, var(--mk-grad-soft) border-box; }
.mk-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; font: 700 17px/1.4 var(--mk-font); color: var(--mk-ink); }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary .ic { flex: none; font-size: 18px; width: 32px; height: 32px; padding: 7px; border-radius: 10px; background: var(--mk-soft); color: var(--mk-pink); transition: transform .2s; }
.mk-faq details[open] summary .ic { transform: rotate(45deg); }
.mk .mk-faq details p { padding: 0 22px 22px; font: 500 16px/1.6 var(--mk-font); color: var(--mk-mauve); }
.mk-faq-more { text-align: center; margin-top: 26px; }

/* ---------- closing CTA ---------- */
.mk-cta { position: relative; overflow: hidden; border-radius: 30px; padding: 72px 48px; text-align: center; color: #fff;
  background: radial-gradient(600px 300px at 10% 0%, rgba(255, 255, 255, .22), transparent 70%), var(--mk-grad); }
.mk .mk-cta h2 { font: 800 clamp(32px, 4.4vw, 52px)/1.08 var(--mk-font); letter-spacing: -.03em; color: #fff; max-width: 820px; margin: 0 auto; }
.mk .mk-cta p { margin: 18px auto 0; max-width: 620px; font: 500 18px/1.55 var(--mk-font); color: rgba(255, 255, 255, .94); }
.mk-cta .mk-ctas { justify-content: center; }

/* ---------- footer ---------- */
.mk-foot { background: var(--mk-wash); color: var(--mk-ink); padding: 72px 0 36px; position: relative; }
.mk-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--mk-grad); opacity: .7; }
.mk-foot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.mk .mk-foot-logo { display: inline-flex; border-radius: 10px; }
.mk .mk-foot-logo img { height: 32px; width: auto; }
.mk .mk-foot-brand p { margin-top: 14px; max-width: 320px; font: 500 15px/1.55 var(--mk-font); color: var(--mk-mauve); }
.mk .mk-foot-brand .mk-btn { margin-top: 20px; }
.mk .mk-foot h4 { font: 700 12.5px/1.2 var(--mk-font); letter-spacing: 1.5px; text-transform: uppercase; color: var(--mk-mauve); margin-bottom: 14px; }
.mk .mk-foot ul { display: grid; gap: 4px; }
.mk .mk-foot li a { display: inline-flex; align-items: center; min-height: 36px; font: 600 15px var(--mk-font); color: var(--mk-ink); overflow-wrap: anywhere; }
.mk .mk-foot li a:hover { color: var(--mk-rose); }
.mk-foot-base { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--mk-border); display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; font: 500 14px var(--mk-font); color: var(--mk-mauve); }

/* ---------- desktop large ---------- */
@media (min-width: 1280px) {
  .mk { --mk-pad: 32px; }
}
/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .mk-sec { padding: 76px 0; }
  .mk-stage .mk-phone.mk-front { --pw: 250px; }
  .mk-stage .mk-phone.mk-side { --pw: 204px; }
  .mk-stage .mk-float.mk-f1 { left: 2%; }
  .mk-stage .mk-float.mk-f2 { right: 2%; }
  .mk-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-row { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .mk-row.mk-rev .mk-row-txt { order: 0; }
  .mk-row + .mk-row { margin-top: 80px; }
  .mk-plans { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin: 0 auto; gap: 30px; }
  .mk .mk-pnote { min-height: 0; }
  .mk-foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-foot-brand { grid-column: 1 / -1; }
}
/* ---------- narrow tablet (iPad portrait) ----------
   Between 640 and 899px a 270px float card at left/right 2% sat over the 250px centre
   phone and hid its tab bar and prices. Same treatment as the phone layout: drop the
   left card, tuck the right one into the corner at the phone size. Scoped to the hero
   stage so the .mk-vis section cards further down keep their tablet size. */
@media (min-width: 640px) and (max-width: 899px) {
  .mk-stage .mk-float.mk-f1 { display: none; }
  .mk-stage .mk-float.mk-f2 { right: 0; bottom: 10%; max-width: 196px; padding: 9px 11px; gap: 9px; border-radius: 13px; font-size: 12.5px; }
  .mk-stage .mk-float.mk-f2 span { font-size: 11.5px; }
  .mk-stage .mk-float.mk-f2 .mk-fi { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
}
/* ---------- phone ---------- */
@media (max-width: 639px) {
  .mk { --mk-pad: 18px; }
  .mk-sec { padding: 60px 0; }
  .mk-sec.mk-tight { padding: 44px 0; }
  .mk-hero { padding: 36px 0 52px; }
  .mk-hero-pg { padding: 44px 0 40px; }
  .mk .mk-biglogo { width: min(330px, 88%); }
  .mk .mk-h1 { margin-top: 14px; font-size: clamp(28px, 7.6vw, 34px); }
  .mk-hero-c .mk-ctas { width: 100%; max-width: 380px; }
  .mk-head { margin-bottom: 34px; }
  .mk .mk-ctas { margin-top: 24px; }
  .mk .mk-ctas .mk-btn { flex: 1 1 100%; }
  .mk .mk-btn-lg { min-width: 0; }
  .mk-sec-cta { margin-top: 40px; }
  .mk-sec-cta .mk-btn { width: 100%; }
  .mk-g4, .mk-g3, .mk-g2 { grid-template-columns: minmax(0, 1fr); }
  .mk-card, .mk-about-card { padding: 22px; }
  /* the four prices stay a 2 x 2 block on a phone */
  .mk-grid.mk-psum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mk-psum-card { padding: 18px 16px; }
  .mk .mk-psum-amt { font-size: 30px; }
  .mk .mk-psum-card p { font-size: 14px; }
  .mk .mk-psum-card .mk-eb { letter-spacing: 1px !important; }
  .mk-stage { margin-top: 40px; }
  .mk-stage .mk-phone.mk-front { --pw: 204px; }
  .mk-stage .mk-phone.mk-side { --pw: 168px; }
  .mk-stage .mk-phone.mk-l { display: none; }
  .mk-stage .mk-phone.mk-r { margin-left: -56px; transform: translateY(-18px) rotate(4deg); }
  .mk-float { padding: 9px 11px; gap: 9px; border-radius: 13px; max-width: 196px; font-size: 12.5px; }
  .mk-float span { font-size: 11.5px; }
  .mk-float .mk-fi { width: 30px; height: 30px; font-size: 15px; border-radius: 9px; }
  .mk-stage .mk-float.mk-f1 { display: none; }
  .mk-stage .mk-float.mk-f2 { right: 0; bottom: 10%; }
  .mk-row + .mk-row { margin-top: 64px; }
  .mk-vis { padding: 34px 12px; min-height: 0; border-radius: 22px; }
  .mk-vis .mk-phone { --pw: 212px; }
  .mk-vis .mk-phone + .mk-phone { display: none; }
  .mk-vis .mk-float { display: none; }
  .mk-vis.mk-photo .mk-float { display: flex; max-width: calc(100% - 36px); }
  .mk-vis.mk-vis-web { padding: 24px 12px; }
  .mk-br-side { display: none; }
  .mk-br-body { min-height: 0; }
  .mk-br-week { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-br-week > div:nth-child(n+4) { display: none; }
  .mk-br-week > div { min-height: 160px; }
  .mk-plan { padding: 28px 20px; }
  .mk-split-card { padding: 22px; }
  .mk-split { grid-template-columns: minmax(0, 1fr); }
  .mk-cta { padding: 48px 22px; border-radius: 24px; }
  .mk-foot { padding: 52px 0 30px; }
  .mk-foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  /* the fee table stacks: the item, then what it costs */
  .mk .mk-table thead { display: none; }
  .mk .mk-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--mk-line); }
  .mk .mk-table tr:last-child { border-bottom: 0; }
  .mk .mk-table th, .mk .mk-table td { display: block; width: auto; padding: 0; border: 0; }
  .mk .mk-table tbody th { width: auto; }
  .mk .mk-table tr.mk-tgroup { padding: 20px 18px 8px; }
  .mk .mk-table tr.mk-tgroup th { padding: 0; border: 0; }
  .mk .mk-table td { margin-top: 4px; }
  .mk-faq summary { padding: 18px; font-size: 16px; }
  .mk .mk-faq details p { padding: 0 18px 18px; font-size: 15.5px; }
}
@media (max-width: 379px) {
  .mk-stage .mk-phone.mk-front { --pw: 190px; }
  .mk-stage .mk-phone.mk-side { --pw: 156px; }
  .mk-foot-in { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk *::before, .mk *::after { transition: none !important; }
}