/* Mako kit for the suite sites: the one stylesheet all seven share (mako.design, .community, .directory, .business,
   .financial, .legal, .support). Edit it here, in mako-kit/kit/site/, then run scripts/sync-kit.sh, which copies it
   into each site's /kit/ so every domain serves the same file from its own origin.
   The kit's source of truth is mako.watch (public/mk.css): the tokens, the floating glass top bar with round icon
   buttons, the account drawer and theme switch, glass cards and families, app tiles, chips, the contact form, the
   footer, and the phone / 900 / 1800 / 2400 layout steps.
   Each site's own style.css loads after this and sets only its brand colours (--mk-light, --mk-deep, --mk-button-day,
   --mk-button-night, --mk-tint-day, --mk-tint-night, --mk-dot) plus any rules that are truly its own.
   Type: the kit's system stack. No web fonts, no external requests. */

:root {
  /* The shared Mako greys */
  --mk-day-canvas: #f7f9fa;
  --mk-day-surface: #ffffff;
  --mk-day-ink: #0f2a3a;
  --mk-day-muted: #5b6b75;
  --mk-day-line: #d5e0e5;
  --mk-night-canvas: #0b1a22;
  --mk-night-surface: #122733;
  --mk-night-ink: #e8f1f5;
  --mk-night-muted: #a3b4bd;
  --mk-night-line: #244250;
  --mk-night-tile: #05090c;
  --mk-night-button-ink: #06141a;
  --mk-canvas: light-dark(var(--mk-day-canvas), var(--mk-night-canvas));
  --mk-surface: light-dark(var(--mk-day-surface), var(--mk-night-surface));
  --mk-ink: light-dark(var(--mk-day-ink), var(--mk-night-ink));
  --mk-muted: light-dark(var(--mk-day-muted), var(--mk-night-muted));
  --mk-line: light-dark(var(--mk-day-line), var(--mk-night-line));
  --mk-brand: light-dark(var(--mk-button-day), var(--mk-button-night));
  --mk-on-brand: light-dark(var(--mk-day-surface), var(--mk-night-button-ink));
  --mk-tint: light-dark(var(--mk-tint-day), var(--mk-tint-night));
  --mk-mark-tile: light-dark(var(--mk-day-surface), var(--mk-night-tile));
  --mk-glass: color-mix(in srgb, var(--mk-surface) 74%, transparent);
  --mk-glass-2: color-mix(in srgb, var(--mk-surface) 94%, transparent);
  --mk-edge: color-mix(in srgb, var(--mk-line) 75%, transparent);
  --mk-hi: color-mix(in srgb, var(--mk-day-surface) 18%, transparent);
  --mk-rim: color-mix(in srgb, #fff 70%, transparent);
  --mk-shade: light-dark(rgb(15 42 58 / .14), rgb(0 0 0 / .35));
  --mk-shadow: 0 10px 28px color-mix(in srgb, var(--mk-night-tile) 9%, transparent);
  --mk-s-1: 4px;
  --mk-s-2: 8px;
  --mk-s-3: 12px;
  --mk-s-4: 16px;
  --mk-s-5: 20px;
  --mk-s-6: 24px;
  --mk-s-8: 32px;
  --mk-gutter: var(--mk-s-5);
  --mk-r-tile: 18px;
  --mk-r-card: 24px;
  --mk-r-field: 18px;
  --mk-ib: 44px;
  --mk-bar-h: 64px;
  --mk-blur: 22px;
  --mk-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --mk-m-press: 90ms;
  --mk-m-quick: 160ms;
  --mk-m-gentle: 420ms;
  --mk-m-stagger: 45ms;
  --mk-e-out: cubic-bezier(.2, .8, .2, 1);
  --mk-e-spring: cubic-bezier(.34, 1.56, .64, 1);
  --mk-rise: 12px;
  --mk-press: .94;
  --mk-safe-top: env(safe-area-inset-top, 0px);
  --mk-safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
  background: var(--mk-canvas);
  color: var(--mk-ink);
  font: 400 15px/1.45 var(--mk-font);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mk-bar-h) + var(--mk-s-6) + var(--mk-safe-top));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --mk-rim: color-mix(in srgb, #fff 28%, transparent); } }

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; overflow-x: hidden; }
h1, h2, h3, p, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--mk-brand); text-underline-offset: 3px; }
a, button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2.5px solid var(--mk-brand); outline-offset: 3px; }
.mk-sr, .mk-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mk-skip:focus { position: fixed; top: var(--mk-s-3); left: var(--mk-s-3); z-index: 100; padding: var(--mk-s-3); background: var(--mk-surface); }
.mk-muted { color: var(--mk-muted); }
.mk-brand { color: var(--mk-brand); }

/* Page background, after the kit's "Dawn": three soft glows (brand, light, warm) that drift and breathe very slowly. */
body::before { content: ""; position: fixed; inset: -12%; z-index: -2; pointer-events: none; background: radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--mk-brand) 16%, transparent), transparent 62%), radial-gradient(85% 45% at 100% 38%, color-mix(in srgb, var(--mk-light) 18%, transparent), transparent 62%), var(--mk-canvas); animation: mk-bg-drift 38s ease-in-out infinite alternate; will-change: transform; }
body::after { content: ""; position: fixed; inset: -12%; z-index: -1; pointer-events: none; background: radial-gradient(110% 55% at 30% 104%, color-mix(in srgb, var(--mk-dot) 20%, transparent), transparent 62%), radial-gradient(60% 34% at 88% 14%, color-mix(in srgb, var(--mk-dot) 10%, transparent), transparent 66%); animation: mk-bg-breathe 16s ease-in-out infinite, mk-bg-drift-2 46s ease-in-out infinite alternate; will-change: transform, opacity; }
@keyframes mk-bg-drift { from { transform: translate3d(-2%, -1.5%, 0) scale(1); } to { transform: translate3d(2.5%, 2%, 0) scale(1.06); } }
@keyframes mk-bg-drift-2 { from { transform: translate3d(2%, 1%, 0) scale(1.04); } to { transform: translate3d(-2.5%, -2%, 0) scale(1); } }
@keyframes mk-bg-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mk-rise { from { opacity: 0; transform: translateY(var(--mk-rise)); } to { opacity: 1; transform: none; } }

/* Shell: one phone column, wider from 900px (kit steps) */
.mk-shell { width: 100%; max-width: 480px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(var(--mk-s-4) + var(--mk-safe-bottom)); }
.mk-main { padding: var(--mk-s-3) var(--mk-gutter) var(--mk-s-6); overflow-wrap: anywhere; }

/* Top bar: one floating glass piece. Where you are on the left (the mark and name), round icon buttons on the right. */
.mk-header { position: sticky; top: calc(var(--mk-s-3) + var(--mk-safe-top)); z-index: 30; display: flex; align-items: center; gap: var(--mk-s-1); width: calc(100% - 28px); max-width: 452px; height: var(--mk-bar-h); margin: calc(var(--mk-s-3) + var(--mk-safe-top)) auto var(--mk-s-3); padding: 6px 6px 6px var(--mk-s-4); border: 1px solid var(--mk-edge); border-radius: 26px; background: var(--mk-glass-2); box-shadow: var(--mk-shadow), inset 0 1px 0 var(--mk-hi); -webkit-backdrop-filter: blur(var(--mk-blur)) saturate(170%); backdrop-filter: blur(var(--mk-blur)) saturate(170%); }
.mk-logo { display: flex; align-items: center; flex: 1; gap: var(--mk-s-3); min-width: 0; min-height: 44px; color: var(--mk-ink); text-decoration: none; font-size: 18px; font-weight: 750; letter-spacing: -.02em; white-space: nowrap; }
.mk-logo > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* The mark: no tile, lifted by a soft shadow (kit logo rule). */
.mk-mark { --u: .4px; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; }
.mk-mark img { width: 90%; height: auto; transform: translate(calc(var(--u) * -3), calc(var(--u) * 1.8)); filter: drop-shadow(0 calc(var(--u) * -1) 0 rgba(255, 255, 255, .45)) drop-shadow(0 calc(var(--u) * 3) calc(var(--u) * 2) rgba(0, 0, 0, .35)) drop-shadow(0 calc(var(--u) * 9) calc(var(--u) * 9) rgba(0, 0, 0, .22)); }
.mk-mark-large { --u: .8px; width: 80px; height: 80px; }
.mk-actions { display: flex; align-items: center; gap: var(--mk-s-2); flex: none; }
.mk-header .mk-actions { gap: 0; }

/* Round icon buttons: tinted glass with a thin lit rim; flat inside the bars. */
.mk-ib { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--mk-ib); height: var(--mk-ib); min-width: var(--mk-ib); min-height: var(--mk-ib); padding: 0; margin: 0; border: 0; border-radius: 50%; color: var(--mk-brand); background: linear-gradient(155deg, color-mix(in srgb, var(--mk-brand) 20%, transparent), color-mix(in srgb, var(--mk-brand) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-brand) 22%, transparent), inset 0 1.5px 0 var(--mk-rim); backdrop-filter: blur(14px) saturate(180%); -webkit-backdrop-filter: blur(14px) saturate(180%); text-decoration: none; cursor: pointer; transition: transform var(--mk-m-quick) var(--mk-e-spring), background var(--mk-m-quick) var(--mk-e-out); }
.mk-ib:hover { background: linear-gradient(155deg, color-mix(in srgb, var(--mk-brand) 28%, transparent), color-mix(in srgb, var(--mk-brand) 10%, transparent)); }
.mk-ib:active { transform: scale(var(--mk-press)); transition-duration: var(--mk-m-press); }
.mk-ib.mk-ib-brand { color: var(--mk-on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--mk-brand) 84%, #fff), var(--mk-brand)); box-shadow: inset 0 1.5px 0 var(--mk-rim), 0 8px 18px color-mix(in srgb, var(--mk-brand) 34%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mk-header .mk-ib { box-shadow: none; background: transparent; color: var(--mk-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.mk-header .mk-ib:hover { background: var(--mk-tint); color: var(--mk-brand); }
.mk-icon { display: block; width: 22px; height: 22px; flex: none; }

/* Buttons with words: the brand fill and the tinted glass of the round buttons, in the kit's field shape. */
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mk-s-2); min-height: 48px; padding: 0 var(--mk-s-5); border: 0; border-radius: var(--mk-r-field); font: 700 15px/1 var(--mk-font); text-decoration: none; cursor: pointer; transition: transform var(--mk-m-quick) var(--mk-e-spring); }
.mk-btn:active { transform: scale(var(--mk-press)); }
.mk-btn .mk-icon { width: 20px; height: 20px; }
.mk-btn-brand { color: var(--mk-on-brand); background: linear-gradient(180deg, color-mix(in srgb, var(--mk-brand) 84%, #fff), var(--mk-brand)); box-shadow: inset 0 1.5px 0 var(--mk-rim), 0 8px 18px color-mix(in srgb, var(--mk-brand) 34%, transparent); }
.mk-btn-glass { color: var(--mk-brand); background: linear-gradient(155deg, color-mix(in srgb, var(--mk-brand) 20%, transparent), color-mix(in srgb, var(--mk-brand) 6%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-brand) 22%, transparent), inset 0 1.5px 0 var(--mk-rim); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); }

/* Chips */
.mk-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 var(--mk-s-3); border: 1px solid var(--mk-edge); border-radius: 999px; background: var(--mk-glass); color: var(--mk-muted); text-decoration: none; font-size: 13px; font-weight: 650; transition: transform var(--mk-m-quick) var(--mk-e-spring); }
.mk-chip .mk-icon { width: 18px; height: 18px; }
.mk-chip:hover { color: var(--mk-brand); border-color: color-mix(in srgb, var(--mk-brand) 45%, var(--mk-edge)); }
.mk-chip:active { transform: scale(var(--mk-press)); }
.mk-pill { display: inline-flex; align-items: center; justify-self: start; min-height: 28px; padding: 3px 12px; border-radius: 999px; background: var(--mk-tint); color: var(--mk-brand); font-size: 12.5px; font-weight: 700; }

/* Glass cards */
.mk-card { position: relative; display: grid; align-content: start; gap: var(--mk-s-2); min-width: 0; padding: var(--mk-s-5); border: 1px solid var(--mk-edge); border-radius: var(--mk-r-card); background: var(--mk-glass); box-shadow: var(--mk-shadow), inset 0 1px 0 var(--mk-hi); -webkit-backdrop-filter: blur(var(--mk-blur)) saturate(170%); backdrop-filter: blur(var(--mk-blur)) saturate(170%); animation: mk-rise var(--mk-m-gentle) var(--mk-e-out) both; }
.mk-card h3 { font-size: 17px; font-weight: 750; line-height: 1.25; letter-spacing: -.015em; }
.mk-card p { color: var(--mk-muted); font-size: 14.5px; line-height: 1.55; }

/* Hero: the promise, then the product mark on its glowing tile */
.hero { display: grid; gap: var(--mk-s-6); padding: var(--mk-s-4) 0 var(--mk-s-8); }
.hero h1 { font-size: clamp(36px, 10vw, 44px); font-weight: 780; line-height: 1.02; letter-spacing: -.04em; overflow-wrap: normal; }
.hero h1 .stop { color: var(--mk-dot); }
.hero .mk-pill { margin-bottom: var(--mk-s-4); }
.hero .lead { max-width: 40ch; margin-top: var(--mk-s-4); color: var(--mk-muted); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--mk-s-3); margin-top: var(--mk-s-6); }

/* The mark on its tile: the one bold moment (unchanged from the earlier site) */
.mark { position: relative; z-index: 0; justify-self: start; width: 150px; order: -1; }
.mark::before { content: ""; position: absolute; inset: 6%; z-index: -1; border-radius: 40px; background: conic-gradient(from 200deg, var(--mk-brand), var(--mk-dot), var(--mk-light), var(--mk-brand)); filter: blur(60px); opacity: .42; animation: glow 9s ease-in-out infinite alternate; }
@keyframes glow { to { transform: rotate(8deg) scale(1.05); opacity: .58; } }
.mark-tile { display: grid; place-items: center; aspect-ratio: 1; border-radius: 22%; background: var(--mk-mark-tile); border: 1px solid var(--mk-edge); box-shadow: 0 30px 80px var(--mk-shade), inset 0 1px 0 rgb(255 255 255 / .2); }
.mark-tile img { width: 64%; height: auto; filter: drop-shadow(0 10px 18px var(--mk-shade)); }

/* Sections: a heading and a short line, then the content */
.cols { display: grid; gap: var(--mk-s-8); }
.content { display: grid; gap: 40px; min-width: 0; }
.mk-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s-2); margin-bottom: var(--mk-s-3); }
.mk-section-head h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mk-family-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--mk-tint); color: var(--mk-brand); font-size: 12px; font-weight: 650; text-align: center; font-variant-numeric: tabular-nums; }
.sec { display: grid; gap: var(--mk-s-2); margin-bottom: var(--mk-s-4); }
.sec h2 { font-size: 26px; font-weight: 760; line-height: 1.15; letter-spacing: -.025em; }
.sec .lede { max-width: 60ch; color: var(--mk-muted); font-size: 15.5px; line-height: 1.55; }

/* Three points */
.points { display: grid; gap: var(--mk-s-3); margin: 0; padding: 0; list-style: none; }
.points .mk-card { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--mk-s-4); align-items: start; }
.points .mk-card > :not(.mk-appbar-icon) { grid-column: 2; }
.points .mk-appbar-icon { grid-row: span 2; }

/* App families: each in its own glass container (kit polish) */
.families { display: grid; gap: 14px; }
.mk-family { padding: 14px 8px 16px; border: 1px solid color-mix(in srgb, var(--mk-surface) 55%, transparent); border-radius: var(--mk-r-card); background: linear-gradient(155deg, color-mix(in srgb, var(--mk-surface) 42%, transparent), color-mix(in srgb, var(--mk-surface) 14%, transparent)); box-shadow: 0 10px 30px color-mix(in srgb, var(--mk-night-tile) 7%, transparent), inset 0 1px 0 color-mix(in srgb, var(--mk-day-surface) 55%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--mk-night-tile) 5%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); }
.mk-family .mk-section-head { padding: 0 10px; margin-bottom: var(--mk-s-3); }
.mk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; padding: 0; list-style: none; }
.mk-grid li { min-width: 0; }
/* App tiles: the kit's card form at every width, so each app keeps its line about what it does. */
.mk-tile { display: flex; align-items: flex-start; gap: 14px; min-width: 0; height: 100%; padding: 12px; border: 1px solid var(--mk-edge); border-radius: 20px; background: var(--mk-glass); color: var(--mk-ink); animation: mk-rise var(--mk-m-gentle) var(--mk-e-out) both; }
.mk-grid li:nth-child(4n + 2) .mk-tile { animation-delay: var(--mk-m-stagger); }
.mk-grid li:nth-child(4n + 3) .mk-tile { animation-delay: calc(2 * var(--mk-m-stagger)); }
.mk-grid li:nth-child(4n + 4) .mk-tile { animation-delay: calc(3 * var(--mk-m-stagger)); }
.mk-tile-text { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.mk-tile-label { font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.mk-tile-question { color: var(--mk-muted); font-size: 13.5px; line-height: 1.4; }
.mk-tile-text .mk-pill { min-height: 0; margin-top: 4px; padding: 2px 9px; font-size: 11.5px; }

/* App icons, every suite: two-colour gradient tile (the dot, then this product's Light and Deep), white Lucide glyph
   lifted by a soft shadow, a lit top edge and a shaded base. */
.mk-tile-icon, .mk-appbar-icon { position: relative; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(in oklch var(--mk-icon-angle, 150deg), var(--mk-dot) 0%, var(--mk-dot) 14%, var(--mk-light) 58%, var(--mk-deep) 100%); }
.mk-tile-icon { width: 52px; height: 52px; border-radius: 16px; box-shadow: 0 6px 16px color-mix(in srgb, var(--mk-deep) 28%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 0 -10px 16px color-mix(in srgb, var(--mk-deep) 55%, transparent); }
.mk-tile-icon::before { content: ""; position: absolute; left: 10%; right: 10%; top: 4%; height: 34%; border-radius: 14px 14px 40% 40%; background: linear-gradient(180deg, var(--mk-hi), transparent); opacity: .35; pointer-events: none; }
.mk-tile-icon .mk-icon { width: 26px; height: 26px; }
.mk-appbar-icon { width: 40px; height: 40px; border-radius: 12px; box-shadow: 0 3px 8px color-mix(in srgb, var(--mk-deep) 26%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 40%, transparent), inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent), inset 0 -10px 16px color-mix(in srgb, var(--mk-deep) 55%, transparent); }
.mk-appbar-icon .mk-icon { width: 21px; height: 21px; }
.mk-tile-icon .mk-icon, .mk-appbar-icon .mk-icon { filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--mk-deep) 80%, #000)); stroke-width: 2; }
/* Each app turns the two-colour blend a little, so a grid of apps stays vivid instead of uniform. */
.mk-grid li:nth-child(4n + 2) .mk-tile-icon, .points li:nth-child(2) .mk-appbar-icon { --mk-icon-angle: 200deg; }
.mk-grid li:nth-child(4n + 3) .mk-tile-icon, .points li:nth-child(3) .mk-appbar-icon { --mk-icon-angle: 120deg; }
.mk-grid li:nth-child(4n + 4) .mk-tile-icon { --mk-icon-angle: 170deg; }
.apps-note { margin-top: var(--mk-s-4); padding: 0 var(--mk-s-2); color: var(--mk-muted); font-size: 13.5px; }

/* Pricing */
.plans { display: grid; gap: var(--mk-s-3); }
.plan { gap: 6px; padding: var(--mk-s-6); }
.plan.pick { background: linear-gradient(155deg, color-mix(in srgb, var(--mk-brand) 16%, var(--mk-glass)), var(--mk-glass) 70%); box-shadow: var(--mk-shadow), inset 0 0 0 1px color-mix(in srgb, var(--mk-brand) 32%, transparent), inset 0 1.5px 0 var(--mk-rim); }
.plan .price { margin-top: 2px; color: var(--mk-ink); font-size: 36px; font-weight: 760; line-height: 1.1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.plan .price small { color: var(--mk-muted); font-size: 14px; font-weight: 500; letter-spacing: 0; }
.plan .alt { font-size: 13.5px; }
.plan ul { display: grid; gap: 6px; margin: 10px 0 0; padding: 12px 0 0; border-top: 1px solid var(--mk-edge); list-style: none; font-size: 14.5px; }
.plan li { position: relative; padding-left: 20px; }
.plan li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-brand); }
.extras { display: grid; gap: 8px; margin: var(--mk-s-3) 0 0; padding: var(--mk-s-4) var(--mk-s-5); list-style: none; color: var(--mk-muted); font-size: 14px; }
.extras li { position: relative; padding-left: 20px; }
.extras li::before { content: ""; position: absolute; left: 3px; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-dot); }

/* Questions */
.contact { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--mk-s-4); }
.contact .mail { color: var(--mk-ink); font-size: 18px; font-weight: 750; letter-spacing: -.015em; text-decoration-color: var(--mk-brand); overflow-wrap: anywhere; }

/* Side list of sections (tablets and wider, like the kit's home) */
.side { display: none; }

/* Footer: the same glass piece as the top bar */
.mk-foot { display: grid; gap: var(--mk-s-3); width: calc(100% - 28px); max-width: 452px; margin: 0 auto; padding: var(--mk-s-4) var(--mk-s-4) var(--mk-s-3); border: 1px solid var(--mk-edge); border-radius: 26px; background: var(--mk-glass-2); box-shadow: var(--mk-shadow), inset 0 1px 0 var(--mk-hi); -webkit-backdrop-filter: blur(var(--mk-blur)) saturate(170%); backdrop-filter: blur(var(--mk-blur)) saturate(170%); color: var(--mk-muted); font-size: 13px; }
.mk-foot-brand { display: flex; align-items: center; gap: var(--mk-s-3); min-width: 0; }
.mk-foot-brand .mk-mark { width: 32px; height: 32px; --u: .32px; }
.mk-foot-brand strong { display: block; color: var(--mk-ink); font-size: 15px; font-weight: 750; letter-spacing: -.015em; }
.mk-foot-brand a { color: var(--mk-muted); }
.mk-foot-links { display: flex; flex-wrap: wrap; gap: var(--mk-s-2); }
.mk-foot-links .mk-chip { flex: 1 0 auto; }
.mk-chip[aria-current="page"] { background: var(--mk-tint); color: var(--mk-brand); border-color: var(--mk-brand); }

/* Legal pages: the title beside one readable page */
.legal { display: grid; gap: var(--mk-s-5); padding-top: var(--mk-s-3); }
.legal-head { display: grid; gap: var(--mk-s-3); justify-items: start; align-content: start; }
.legal-head h1 { font-size: 32px; font-weight: 760; line-height: 1.1; letter-spacing: -.03em; }
.legal-head .lede { color: var(--mk-muted); font-size: 15.5px; line-height: 1.55; }
.legal-body { display: block; padding: var(--mk-s-6) var(--mk-s-5); font-size: 15px; line-height: 1.65; }
.legal-body > :first-child { margin-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 var(--mk-s-3); color: var(--mk-ink); font-size: 15px; line-height: 1.65; }
.legal-body h2 { margin: var(--mk-s-6) 0 var(--mk-s-2); padding-top: var(--mk-s-5); border-top: 1px solid var(--mk-edge); font-size: 17px; font-weight: 720; letter-spacing: -.01em; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body li::marker { color: var(--mk-brand); }
.legal-body .version { margin-top: var(--mk-s-6); color: var(--mk-muted); font-size: 13.5px; }

/* Tablet and desktop: wide shell, sections beside a sticky side list, tiles in a grid (kit >= 900) */
@media (min-width: 600px) {
  .points, .plans { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (min-width: 900px) {
  :root { --mk-ib: 48px; }
  .mk-ib .mk-icon { width: 23px; height: 23px; }
  .mk-shell { max-width: 1320px; padding-left: 24px; padding-right: 24px; }
  .mk-header, .mk-foot { width: 100%; max-width: none; }
  .mk-main { padding-left: 0; padding-right: 0; }
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 64px; padding: 56px 32px 72px; }
  .hero h1 { font-size: clamp(48px, 5.4vw, 72px); }
  .hero .lead { font-size: 19px; }
  .mark { order: 0; justify-self: center; width: min(100%, 380px); }
  .cols { grid-template-columns: 230px minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .side { display: grid; gap: var(--mk-s-4); position: sticky; top: calc(var(--mk-bar-h) + var(--mk-s-6) + var(--mk-safe-top)); }
  .side ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  .side a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 14px; color: var(--mk-ink); text-decoration: none; font-weight: 650; font-size: 14.5px; }
  .side a:hover { background: var(--mk-tint); color: var(--mk-brand); }
  .side .mk-family-count { background: none; color: var(--mk-muted); }
  .side .sub { padding: var(--mk-s-1) 0 var(--mk-s-1) var(--mk-s-3); }
  .side .sub a { min-height: 40px; color: var(--mk-muted); font-weight: 600; font-size: 13.5px; }
  .content { gap: 56px; }
  .sec h2 { font-size: 30px; }
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .mk-tile { padding: 14px; min-height: 96px; }
  .legal { grid-template-columns: 300px minmax(0, 760px); justify-content: center; gap: 56px; padding-top: 28px; }
  .legal-head { position: sticky; top: calc(var(--mk-bar-h) + var(--mk-s-6) + var(--mk-safe-top)); }
  .legal-head h1 { font-size: 34px; }
  .legal-body { padding: 32px 40px; border-radius: 28px; }
  .legal-body p, .legal-body ul { font-size: 15.5px; }
  .mk-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 10px 10px 10px var(--mk-s-5); }
  .mk-foot-links .mk-chip { flex: none; }
}
/* Ultra-wide: let the page breathe (kit >= 1800 and >= 2400) */
@media (min-width: 1800px) {
  :root { --mk-ib: 52px; }
  .mk-ib .mk-icon { width: 25px; height: 25px; }
  .mk-shell { max-width: 1960px; }
  .cols { grid-template-columns: 250px minmax(0, 1fr); column-gap: 40px; }
  .hero { padding: 72px 48px 96px; }
  .hero h1 { font-size: 88px; }
  .hero .lead { font-size: 21px; }
  .mark { width: 440px; }
  .families { display: block; columns: 2; column-gap: 14px; }
  .families > .mk-family { break-inside: avoid; margin-bottom: 14px; }
  .mk-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .sec h2 { font-size: 34px; }
  .sec .lede, .mk-card p { font-size: 16px; }
  .mk-tile-label { font-size: 16px; }
  .mk-tile-question { font-size: 14px; }
  .legal { grid-template-columns: 340px minmax(0, 860px); }
  .legal-body p, .legal-body ul { font-size: 17px; }
}
@media (min-width: 2400px) {
  :root { font-size: 16px; }
  .mk-shell { max-width: 2300px; }
  .hero h1 { font-size: 104px; }
  .mark { width: 520px; }
  .families { columns: 3; }
}
/* My account: the kit's account drawer, ported from mako.watch (public/mk.css); mk-site.js builds and runs it. The header button opens a drawer that
   grows out of the top bar: the bar squares its bottom corners and the drawer hangs from it with no gap, same width
   and surface on phones, under the button on wider screens. The button stays put and turns into a quiet close (x).
   Theme choices follow the kit: Auto, Light, Dark, Sun (light by day, dark after sunset), stored on this device. */
:root { --mk-m-base: 240ms; --mk-m-screen: 560ms; --mk-r-sheet: 32px; --mk-scrim: color-mix(in srgb, var(--mk-night-canvas) 55%, transparent); }
:root[data-theme="dark"] { color-scheme: dark; --mk-rim: color-mix(in srgb, #fff 28%, transparent); }
:root[data-theme="light"] { color-scheme: light; }
.mk-sheet { width: calc(100% - 16px); max-width: 464px; max-height: calc(100dvh - 64px); margin: auto auto calc(var(--mk-s-2) + var(--mk-safe-bottom)); padding: var(--mk-s-2) 0 0; border: 1px solid var(--mk-edge); border-radius: var(--mk-r-sheet); background: var(--mk-glass-2); color: var(--mk-ink); box-shadow: var(--mk-shadow), inset 0 1px 0 var(--mk-hi); overscroll-behavior: contain; }
.mk-sheet::backdrop { background: var(--mk-scrim); }
.mk-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--mk-s-2); padding: 0 var(--mk-s-3) 0 var(--mk-s-5); touch-action: pan-x; }
.mk-sheet-head h2 { font-size: 17px; font-weight: 700; line-height: 1.3; }
.mk-sheet-body { padding: var(--mk-s-3) var(--mk-s-5) calc(var(--mk-s-6) + var(--mk-safe-bottom)); overflow-wrap: anywhere; }
.mk-sheet-body a { display: inline-flex; align-items: center; min-height: 44px; }
.mk-sheet-top { position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; }
.mk-sheet-top::backdrop { background: linear-gradient(to bottom, transparent calc(var(--mk-s-3) + var(--mk-safe-top) + var(--mk-bar-h)), var(--mk-scrim) calc(var(--mk-s-3) + var(--mk-safe-top) + var(--mk-bar-h))); }
.mk-sheet-top .mk-sheet-panel { width: calc(100% - 28px); max-width: 452px; max-height: calc(100dvh - var(--mk-bar-h) - var(--mk-safe-top) - var(--mk-s-8)); margin: calc(var(--mk-s-3) + var(--mk-safe-top) + var(--mk-bar-h) - 1px) auto 0; padding-top: var(--mk-s-2); border: 1px solid var(--mk-edge); border-top: 0; border-radius: 0 0 26px 26px; background: var(--mk-surface); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); overflow-y: auto; }
.mk-sheet-top[open] .mk-sheet-panel { animation: mk-sheet-down var(--mk-m-screen) var(--mk-e-out) both; }
.mk-sheet-toggle { position: fixed; z-index: 1; }
@keyframes mk-sheet-down { from { opacity: 0; clip-path: inset(100% 0 0); transform: translateY(-100%); } to { opacity: 1; clip-path: inset(0); transform: none; } }
body:has(.mk-sheet-top[open]) .mk-header { border-radius: 26px 26px 0 0; border-bottom-color: transparent; background: var(--mk-surface); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The open (x) state of the account button is quiet: no fill, muted, a little smaller. The script lifts it above the drawer. */
.mk-ib[data-account-toggle][aria-expanded="true"] { border-color: transparent; background: transparent; color: var(--mk-muted); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mk-ib[data-account-toggle][aria-expanded="true"] .mk-icon { width: 18px; height: 18px; }
.mk-ib[data-account-toggle][aria-expanded="true"]:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--mk-edge); }
.mk-auth-glass { position: relative; border: 1px solid var(--mk-edge); background: var(--mk-glass); box-shadow: var(--mk-shadow), inset 0 1px 0 var(--mk-hi); backdrop-filter: blur(var(--mk-blur)) saturate(170%); -webkit-backdrop-filter: blur(var(--mk-blur)) saturate(170%); }
.mk-auth-glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, var(--mk-hi), transparent 42%); pointer-events: none; }
.mk-auth-account-signin { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 0 12px; padding: 0 var(--mk-s-5); border-radius: var(--mk-r-field); color: var(--mk-brand); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.mk-auth-account-signin:active { transform: scale(var(--mk-press)); }
.mk-auth-account-soon { margin: 0 0 12px; padding: 12px 16px; border-radius: var(--mk-r-field); color: var(--mk-ink); font-size: 14.5px; line-height: 1.45; animation: mk-rise var(--mk-m-quick) var(--mk-e-out) both; }
.mk-auth-account-soon:focus { outline: none; }
.mk-auth-account-soon:focus-visible { outline: 2.5px solid var(--mk-brand); outline-offset: 3px; }
.mk-menu { margin: 0 0 var(--mk-s-4); border: 1px solid var(--mk-edge); border-radius: 20px; background: var(--mk-surface); overflow: hidden; }
.mk-menu > * + * { border-top: 1px solid var(--mk-edge); }
.mk-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 0 14px 0 16px; border: 0; background: transparent; color: var(--mk-ink); font: inherit; font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; }
.mk-menu-item > .mk-icon { width: 20px; height: 20px; color: var(--mk-muted); }
.mk-menu-label { flex: 1; min-width: 0; }
.mk-menu-button { cursor: pointer; transition: background var(--mk-m-quick) var(--mk-e-out); }
.mk-menu-button:hover, .mk-menu-button:focus-visible { background: var(--mk-tint); }
.mk-menu-button:focus-visible { outline-offset: -3px; }
.mk-menu-button > .mk-icon:last-child { width: 18px; height: 18px; }
.mk-menu-sub { border-top: 0 !important; padding: 0 10px 12px; }
.mk-auth-theme { --mk-auth-choice: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; padding: 4px; border: 1px solid var(--mk-edge); border-radius: 999px; background: var(--mk-glass); box-shadow: inset 0 1px 0 var(--mk-hi); }
.mk-auth-theme::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 4); border-radius: 999px; background: linear-gradient(180deg, color-mix(in srgb, var(--mk-brand) 90%, var(--mk-light)), var(--mk-brand)); box-shadow: 0 1px 3px var(--mk-edge); transform: translateX(calc(var(--mk-auth-choice) * 100%)); transition: transform var(--mk-m-base) var(--mk-e-spring); }
.mk-auth-theme:has([data-theme-choice="light"][aria-pressed="true"]) { --mk-auth-choice: 1; }
.mk-auth-theme:has([data-theme-choice="dark"][aria-pressed="true"]) { --mk-auth-choice: 2; }
.mk-auth-theme:has([data-theme-choice="sun"][aria-pressed="true"]) { --mk-auth-choice: 3; }
.mk-auth-theme-choice { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 44px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; color: var(--mk-muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color var(--mk-m-quick) var(--mk-e-out); }
.mk-auth-theme-choice .mk-icon { width: 16px; height: 16px; }
.mk-auth-theme-choice[aria-pressed="true"] { color: var(--mk-on-brand); }
.mk-toast { position: fixed; z-index: 90; left: 50%; bottom: calc(36px + var(--mk-safe-bottom)); max-width: calc(100% - 40px); margin: 0; padding: var(--mk-s-3) var(--mk-s-5); border: 1px solid var(--mk-edge); border-radius: 999px; background: var(--mk-surface); color: var(--mk-ink); box-shadow: var(--mk-shadow); transform: translateX(-50%); font-size: 13.5px; font-weight: 650; text-align: center; }
.mk-toast[hidden] { display: none; }
/* Phones: the theme switch shows icons only (each keeps its name for screen readers and a held tap). */
@media (max-width: 599px) {
  .mk-auth-theme-choice span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .mk-auth-theme-choice .mk-icon { width: 20px; height: 20px; }
}
/* Wider: the drawer hangs from the bar under the account button, square top, rounded bottom, right edges aligned. */
@media (min-width: 900px) {
  .mk-sheet-top .mk-sheet-panel { max-width: 440px; margin-right: max(24px, calc((100% - 1272px) / 2)); margin-left: auto; border-radius: 0 0 var(--mk-r-sheet) var(--mk-r-sheet); }
}
@media (min-width: 1800px) {
  .mk-sheet-top .mk-sheet-panel { max-width: 480px; margin-right: max(24px, calc((100% - 1912px) / 2)); }
}
@media (min-width: 2400px) {
  .mk-sheet-top .mk-sheet-panel { margin-right: max(24px, calc((100% - 2252px) / 2)); }
}
@media (prefers-reduced-motion: reduce) { .mk-sheet-top[open] .mk-sheet-panel, .mk-auth-account-soon { animation: none; } .mk-auth-theme::before { transition: none; } }
.mk-sheet [hidden] { display: none !important; }
/* Contact form: posts to mako.support's intake (mk-site.js sends it) */
.form { gap: var(--mk-s-4); padding: var(--mk-s-6); }
.row2 { display: grid; gap: var(--mk-s-4); }
.field { display: grid; gap: 6px; min-width: 0; font-size: 14px; font-weight: 650; }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--mk-line); border-radius: 14px; background: var(--mk-surface); color: var(--mk-ink); font: 400 16px/1.4 var(--mk-font); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--mk-brand); outline-offset: 1px; border-color: transparent; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mk-card .form-note { margin: 0; color: var(--mk-muted); }
.mk-card .form-note.good { color: color-mix(in srgb, #2fbf79 70%, var(--mk-ink)); font-weight: 650; }
.mk-card .form-note.bad { color: color-mix(in srgb, #e5484d 75%, var(--mk-ink)); font-weight: 650; }
.mk-card .fine { font-size: 13px; }
.mk-btn:disabled { opacity: .6; cursor: default; }
@media (min-width: 600px) { .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  :root { --mk-rise: 0px; --mk-press: 1; scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* App icons (owner rule Nov 15, 2026): the two colours colour the glyph itself; the tile stays calm. */
.mk-tile-icon, .app-ico { background: linear-gradient(160deg, var(--mk-surface), color-mix(in srgb, var(--mk-tint) 70%, var(--mk-surface))) !important; box-shadow: 0 4px 12px color-mix(in srgb, var(--mk-deep) 14%, transparent), inset 0 0 0 1px var(--mk-edge), inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent) !important; }
.mk-tile-icon::before, .app-ico::before { display: none; }
.mk-tile-icon svg, .app-ico svg { stroke: url(#mk-ico-grad); stroke-width: 2.3; filter: none !important; }