/* Self-contained marketing-site styles (no framework dependency).
   Class hooks are emitted by marketing/page.html and the block fragments. */

/* The palette lives in izamna/css/tokens.css (loaded before this file) — the
   same tokens the maintenance page and the sign-up wizard use. These aliases
   keep the --mk-* names the rest of this file is written in, so the design
   language has one source of truth and this file keeps its own vocabulary.
   Both light and dark values come along: a token that changes there changes
   here, because the alias is resolved at use. */
:root {
  --mk-brand-1: var(--iz-brand-1);
  --mk-brand-2: var(--iz-brand-2);
  --mk-brand-gradient: var(--iz-brand-gradient);
  --mk-ink: var(--iz-ink);

  --mk-fg: var(--iz-fg);
  --mk-muted: var(--iz-muted);
  --mk-bg: var(--iz-bg);
  --mk-bg-alt: var(--iz-bg-alt);
  --mk-primary: var(--iz-primary);
  --mk-primary-ink: var(--iz-primary-ink);
  --mk-primary-fg: var(--iz-primary-fg);
  --mk-border: var(--iz-border);
  --mk-radius: var(--iz-radius);
  --mk-maxw: var(--iz-maxw);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--mk-fg);
  background: var(--mk-bg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
}

a { color: var(--mk-primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.mk-wrap { max-width: var(--mk-maxw); margin: 0 auto; padding: 0 1.25rem; }

/* Operator-only strip above the header while the site is in maintenance. */
.mk-opnotice {
  margin: 0; padding: .6rem 1.25rem; text-align: center;
  font-weight: 600; color: #7c4a03; background: #fde68a;
}

/* ── nav ───────────────────────────────────────────────────────────── */
.mk-nav { border-bottom: 1px solid var(--mk-border); background: var(--mk-bg); }
.mk-nav__inner {
  display: flex; align-items: center; gap: 1.5rem;
  min-height: 64px;
}
.mk-brand { display: inline-flex; align-items: center; }
/* The wordmark's lettering is a dark grey that disappears on the dark plate,
   so there it is flattened to white — the gradient mark keeps its shape. */
.mk-brand__logo { width: auto; height: 30px; display: block; }
@media (prefers-color-scheme: dark) {
  .mk-brand__logo { filter: brightness(0) invert(1); }
}
.mk-nav__links { display: flex; gap: 1.25rem; margin-left: 1rem; }
.mk-nav__links a { color: var(--mk-fg); }
.mk-nav__actions { display: flex; gap: .5rem; margin-left: auto; }

/* ── buttons ───────────────────────────────────────────────────────── */
.mk-btn {
  display: inline-block; border-radius: 8px; padding: .5rem 1rem;
  font-weight: 600; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
}
.mk-btn:hover { text-decoration: none; }
.mk-btn--primary {
  background: var(--mk-brand-gradient); color: var(--mk-primary-fg);
  box-shadow: 0 3px 9px rgba(64, 0, 134, .3);
}
.mk-btn--primary:hover { filter: brightness(1.05); color: var(--mk-primary-fg); }
.mk-btn--ghost { color: var(--mk-fg); border-color: var(--mk-border); }
.mk-btn--lg { padding: .75rem 1.5rem; font-size: 1.05rem; }

/* ── user menu (signed in) ─────────────────────────────────────────── */
/* Native <details> dropdown — no JS on the marketing shell. */
.mk-usermenu { position: relative; }
.mk-usermenu__toggle {
  list-style: none; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 8px; font-weight: 600;
  color: var(--mk-fg); border: 1px solid var(--mk-border); background: var(--mk-bg);
}
.mk-usermenu__toggle::-webkit-details-marker { display: none; }
.mk-usermenu__toggle::after { content: "\25BE"; font-size: .8em; opacity: .7; }
.mk-usermenu__menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 50;
  min-width: 12rem; display: flex; flex-direction: column; gap: .1rem;
  padding: .35rem; background: var(--mk-bg);
  border: 1px solid var(--mk-border); border-radius: var(--mk-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.mk-usermenu__menu a,
.mk-usermenu__logout {
  display: block; width: 100%; text-align: left;
  padding: .5rem .65rem; border-radius: 8px;
  color: var(--mk-fg); background: none; border: 0; cursor: pointer;
  font: inherit;
}
.mk-usermenu__menu a:hover,
.mk-usermenu__logout:hover { background: var(--mk-bg-alt); text-decoration: none; }

/* ── sections ──────────────────────────────────────────────────────── */
.mk-section { padding: 3.5rem 0; }
.mk-section:nth-of-type(even) { background: var(--mk-bg-alt); }
.mk-section__title { font-size: 1.9rem; margin: 0 0 .5rem; text-align: center; }
.mk-section__intro {
  color: var(--mk-muted); text-align: center; max-width: 640px; margin: 0 auto 2rem;
}

/* ── features ──────────────────────────────────────────────────────── */
.mk-features__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.mk-feature {
  position: relative;
  background: var(--mk-bg); border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius); padding: 1.5rem;
}
/* editor-only ghost pencil, gated to the marketing owner. One look for all
   three places it appears: next to the header, on each content block, and in
   the footer. Where it overlays something it is positioned by that place's own
   rule below (.mk-feature__edit, .mk-block > .mk-edit). */
.mk-edit, .mk-feature__edit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 8px;
  color: var(--mk-muted); background: transparent;
  border: 1px solid var(--mk-border);
  opacity: .55; transition: opacity .15s, color .15s, background .15s;
}
.mk-edit:focus, .mk-feature__edit:focus { opacity: 1; }
.mk-edit:hover, .mk-feature__edit:hover {
  color: var(--mk-fg); background: var(--mk-bg-alt); text-decoration: none;
}
.mk-edit svg, .mk-feature__edit svg { width: 1.05rem; height: 1.05rem; }
/* One content block. The pencil floats over its top-right corner; the band
   itself is unstyled, so a block keeps looking exactly as its own CSS says. */
.mk-block { position: relative; }
.mk-block > .mk-edit { position: absolute; top: .6rem; right: .6rem; z-index: 2; }
.mk-block:hover > .mk-edit { opacity: 1; }
.mk-feature__edit { position: absolute; top: .6rem; right: .6rem; }
.mk-feature:hover .mk-feature__edit { opacity: 1; }
/* The sprite of <symbol>s is inlined for the <use> references, never drawn. */
.mk-icon-sprite { display: none; }
/* Stroke presentation lives here rather than on every symbol: the icons are
   Tabler outline shapes, which carry no fill of their own. */
.mk-feature__icon {
  display: block; width: 52px; height: 52px;
  color: var(--mk-brand-1); margin: 0 auto 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
/* The deep violet disappears on the near-black background. */
@media (prefers-color-scheme: dark) {
  .mk-feature__icon { color: var(--mk-brand-2); }
}
/* Per-feature accent (Feature.color, or the colour its module brings).
   Tabler's palette spelled out, because this page loads no Tabler CSS — and it
   has to be a class, since the marketing site carries no inline styles.

   Each class sets one hue; everything else is mixed from it against the page
   background, so the same rules hold in the dark theme. The icon disc is the
   loud part and the card only gets a wash of the hue — a grid of fully tinted
   cards reads as confetti and drowns out the brand.

   Two variants per hue: the saturated one fills the disc and draws the icon in
   white, the pastel one (Tabler's ``-lt``) fills it softly and draws the icon
   in the hue. A pastel *stroke* on white would be invisible, which is why the
   tint is the surface, not the ink. */
.mk-feature--brand { --mk-hue: #400086; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--blue { --mk-hue: #066fd1; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--azure { --mk-hue: #4299e1; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--indigo { --mk-hue: #4263eb; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--purple { --mk-hue: #ae3ec9; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--pink { --mk-hue: #d6336c; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--red { --mk-hue: #d63939; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--orange { --mk-hue: #f76707; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--yellow { --mk-hue: #f59f00; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--lime { --mk-hue: #74b816; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--green { --mk-hue: #2fb344; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--teal { --mk-hue: #0ca678; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--cyan { --mk-hue: #17a2b8; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--muted { --mk-hue: #6b7280; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--black { --mk-hue: #000000; --mk-disc-bg: var(--mk-hue); --mk-disc-ink: #fff; }
.mk-feature--brand-lt { --mk-hue: #400086; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--blue-lt { --mk-hue: #066fd1; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--azure-lt { --mk-hue: #4299e1; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--indigo-lt { --mk-hue: #4263eb; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--purple-lt { --mk-hue: #ae3ec9; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--pink-lt { --mk-hue: #d6336c; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--red-lt { --mk-hue: #d63939; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--orange-lt { --mk-hue: #f76707; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--yellow-lt { --mk-hue: #f59f00; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--lime-lt { --mk-hue: #74b816; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--green-lt { --mk-hue: #2fb344; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--teal-lt { --mk-hue: #0ca678; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--cyan-lt { --mk-hue: #17a2b8; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--muted-lt { --mk-hue: #6b7280; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }
.mk-feature--black-lt { --mk-hue: #000000; --mk-disc-bg: color-mix(in srgb, var(--mk-hue) 14%, var(--mk-bg)); --mk-disc-ink: var(--mk-hue); }

/* Only a card that carries a colour gets the wash, the tinted edge and a disc. */
.mk-feature[class*="mk-feature--"] {
  background: color-mix(in srgb, var(--mk-hue) 5%, var(--mk-bg));
  border-color: color-mix(in srgb, var(--mk-hue) 28%, var(--mk-border));
}
.mk-feature[class*="mk-feature--"] .mk-feature__icon {
  color: var(--mk-disc-ink);
  background: var(--mk-disc-bg);
  border-radius: 50%;
  padding: 11px;
}

/* ── pricing ───────────────────────────────────────────────────────── */
/* The cards themselves are billing/css/module-cards.css — shared with the
   onboarding wizard and the studio's financial panel. Only the palette is
   re-pointed at the brand colours here, so the marketing site keeps its look
   (incl. the dark theme) without a second copy of the card CSS. */
:root {
  --pc-bg: var(--mk-bg);
  --pc-fg: var(--mk-fg);
  --pc-muted: var(--mk-muted);
  --pc-faint: var(--mk-muted);
  --pc-border: var(--mk-border);
  --pc-accent: var(--mk-primary-ink);
  --pc-accent-bg: color-mix(in srgb, var(--mk-primary) 10%, var(--mk-bg));
  --pc-accent-ring: color-mix(in srgb, var(--mk-primary) 25%, transparent);
  --pc-accent-soft: color-mix(in srgb, var(--mk-primary) 14%, transparent);
  --pc-chip-bg: var(--mk-bg-alt);
  --pc-chip-fg: var(--mk-muted);
  --pc-radius: var(--mk-radius);
}

.mk-pricing .pricing-cards { gap: 1.5rem; }
.mk-pricing .pricing-card { padding: 1.75rem; }
/* The CTA sits at the bottom of every card, whatever the module list length. */
.mk-pricing .pricing-card .mk-btn { margin-top: auto; }

/* ── testimonials ──────────────────────────────────────────────────── */
.mk-testimonials__grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.mk-testimonial {
  background: var(--mk-bg); border: 1px solid var(--mk-border);
  border-radius: var(--mk-radius); padding: 1.5rem;
}
.mk-testimonial__quote { margin: 0 0 1rem; font-style: italic; }
.mk-testimonial__author { display: flex; align-items: center; gap: .5rem; }
.mk-testimonial__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mk-testimonial__name { font-weight: 600; }
.mk-testimonial__role { color: var(--mk-muted); }

/* ── generic CMS text blocks (e.g. privacy policy, home pwyw hint) ──── */
.mk-main .cms-text { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem; }
/* On the home page the lone text block is a small pay-what-you-want hint. */
.mk-page--home .cms-text { text-align: center; color: var(--mk-muted); }
.mk-page--home .cms-text a { color: var(--mk-primary-ink); font-weight: 600; }

/* ── faq ───────────────────────────────────────────────────────────── */
/* Each FAQ entry is its own block. The category heading is rendered on the
   first entry of each group, so consecutive same-category entries flow under
   one heading. The per-entry wrapper carries no section padding/zebra — spacing
   is set here so a group reads as one continuous list. */
.mk-faq { padding: 0; }
.mk-faq--group-start { padding-top: 1rem; }
.mk-faq:last-of-type { padding-bottom: 2rem; }
.mk-faq__category { margin-bottom: .5rem; }
/* The entry wrapper carries the centring + the (tight) gap between entries, and
   anchors the editor pencil to the visible card. */
.mk-faq__entry { position: relative; max-width: 760px; margin: 0 auto .25rem; }
.mk-faq__item {
  border: 1px solid var(--mk-border); border-radius: var(--mk-radius);
  padding: 1rem 1.25rem; background: var(--mk-bg);
}
.mk-faq__question { font-weight: 600; cursor: pointer; padding-right: 2.25rem; }
.mk-faq__answer { color: var(--mk-muted); margin-top: .5rem; }

/* ── cta ───────────────────────────────────────────────────────────── */
.mk-cta { background: var(--mk-brand-gradient); color: var(--mk-primary-fg); }
.mk-cta__inner { text-align: center; }
.mk-cta__headline { font-size: 1.9rem; margin: 0 0 .5rem; }
.mk-cta__text { margin: 0 auto 1.5rem; max-width: 600px; opacity: .95; }
.mk-cta .mk-btn--primary { background: var(--mk-primary-fg); color: var(--mk-brand-1); }

/* ── footer ────────────────────────────────────────────────────────── */
.mk-footer { border-top: 1px solid var(--mk-border); padding: 2rem 0; color: var(--mk-muted); }
.mk-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mk-footer__links { display: flex; gap: 1rem; }