/* Shared components for the corp marketing pages: the comparison pages
   (the simpletix-vs- folders), the farm page and the organizer login page.

   How to use it:
   - Add the class mk to the page's <main>, e.g. <main class="farm-page mk">.
     Every rule here is scoped under .mk, so nothing leaks into the rest of the
     site, and the mk- prefix keeps clear of Bootstrap's .btn, .card and so on.
   - Link this file before the page's own stylesheet, so the page stylesheet
     can adjust a component (same specificity, later wins).
   - Keep page-specific layout in the page stylesheet. Add a component here
     only when a second page needs it, instead of copying it.
   - Linked with ?v= from every page that uses it; bump it when this file changes. */

/* Buttons: <a class="mk-btn mk-btn-primary"> or <a class="mk-btn mk-btn-outline"> */
.mk .mk-btn { display: inline-flex; align-items: center; gap: 8px; padding: 16px 36px; border-radius: 50px; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.5px; text-decoration: none; cursor: pointer; transition: background-color 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s; }
.mk .mk-btn-primary { border: none; background: #00d075; color: #fff; text-transform: uppercase; }
.mk .mk-btn-primary:hover { background: #00b866; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,208,117,0.35); }
.mk .mk-btn-outline { border: 2px solid #1b1b20; background: transparent; color: #1b1b20; }
.mk .mk-btn-outline:hover { background: #1b1b20; color: #fff; }

/* Feature card with the green top edge: <div class="mk-card"><h3>…</h3><p>…</p></div> */
.mk .mk-card { background: #fff; border: 1px solid #e8e8e8; border-top: 3px solid #00d075; border-radius: 14px; padding: 24px; }
.mk .mk-card h3 { font-size: 17px; font-weight: 700; color: #1b1b20; margin-bottom: 8px; line-height: 1.3; }
.mk .mk-card p { font-size: 14.5px; color: #555; line-height: 1.6; }

/* Plain white panel (price cards, scenario cards); the page sets the padding. */
.mk .mk-panel { background: #fff; border: 1px solid #e8e8e8; border-radius: 16px; }

/* FAQ accordion: <details class="mk-faq-item"><summary>…</summary><div class="mk-faq-answer">…</div></details>
   The page styles the question row inside the summary. */
.mk .mk-faq-item { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; margin-bottom: 12px; }
.mk .mk-faq-item > summary { cursor: pointer; list-style: none; }
.mk .mk-faq-item > summary::-webkit-details-marker { display: none; }
.mk .mk-faq-answer { font-size: 15px; color: #6b6b6b; }

/* Sources / disclosure box at the end of the page:
   <div class="mk-sources"><details class="mk-sources-body"><summary>Sources…</summary><p>…</p></details></div>
   The text is #6b6b6b, not lighter: it holds pricing substantiation, so it must
   pass WCAG AA contrast (4.5:1) on the #f8f9fa background. */
.mk .mk-sources { background: #f8f9fa; border-top: 1px solid #e0e0e0; }
.mk .mk-sources-body { font-size: 12px; color: #6b6b6b; line-height: 1.8; }
.mk .mk-sources-body > summary { cursor: pointer; font-weight: 600; color: #6b6b6b; font-size: 13px; }