/* ==========================================================================
   Marketing and auth pages (home, about, for buyers, for suppliers, contact,
   privacy, sign in, registration, passwords, email preferences).
   Plain unlayered CSS that builds on the Swiss primitives in
   app/assets/tailwind/application.css. Everything here is prefixed `mk-`.

   The pattern is a familiar B2B site set in the Swiss Editorial theme:
   a two-column hero, section headings above their content, feature grids of
   three or four, a stats strip, hairline panels and a closing CTA band.
   Two inks, hairlines, 6px radius, no shadows, no accent colour.
   ========================================================================== */

/* ---------- Hero: headline, lede and actions left; captioned photo right -- */
.mk-hero { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: center; padding-block: clamp(48px, 7vw, 104px) clamp(48px, 6vw, 88px); }
.mk-hero__text { grid-column: 1 / span 6; }
.mk-hero__media { grid-column: 8 / -1; }
.mk-hero__media img { aspect-ratio: 4 / 3; }
.mk-hero--text .mk-hero__text { grid-column: 1 / span 8; }
.mk-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-s); color: var(--grey-text); }
.mk-kicker .dot { margin: 0; }
.mk-hero h1 { margin-block-start: var(--s-4); font-size: var(--t-hero); line-height: var(--lh-tight); font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.mk-lede { margin-block-start: var(--s-5); max-width: 34em; font-size: var(--t-m); line-height: 1.45; color: var(--grey-text); letter-spacing: 0; text-wrap: pretty; }
.mk-hero .btn-row { margin-block-start: var(--s-6); }
.mk-note { margin-block-start: var(--s-5); font-size: var(--t-s); color: var(--grey-text); }
.mk-note a { color: var(--ink); }
@media (max-width: 63.99rem) {
  .mk-hero__text, .mk-hero--text .mk-hero__text, .mk-hero__media { grid-column: 1 / -1; }
}

/* ---------- Section: heading block above its content -------------------- */
.mk-section { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--rule); }
.mk-section--flush { border-top: 0; padding-block-start: 0; }
.mk-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-4); align-items: end; margin-block-end: clamp(32px, 4vw, 56px); }
.mk-head__text { grid-column: 1 / span 7; }
.mk-head__text h2 { margin-block-start: var(--s-3); font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.mk-head__text .mk-lede { margin-block-start: var(--s-4); font-size: var(--t-body); line-height: var(--lh-body); }
.mk-head__aside { grid-column: 9 / -1; justify-self: end; }
@media (max-width: 63.99rem) {
  .mk-head__text, .mk-head__aside { grid-column: 1 / -1; justify-self: start; }
}

/* ---------- Feature grid: hairline above, number, title, body ----------- */
.mk-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.mk-features--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mk-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-feature { padding-block-start: var(--s-4); border-top: 1px solid var(--ink); }
.mk-feature__num { font-size: var(--t-s); color: var(--grey-text); font-variant-numeric: tabular-nums; }
.mk-feature h3 { margin-block-start: var(--s-5); font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.mk-feature p { margin-block-start: var(--s-3); max-width: 30em; color: var(--grey-text); }
@media (max-width: 63.99rem) { .mk-features, .mk-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .mk-features, .mk-features--4, .mk-features--2 { grid-template-columns: 1fr; gap: var(--s-6); } }

/* ---------- Stats strip: big numbers under hairlines ------------------- */
.mk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); padding-block: var(--s-7); border-top: 1px solid var(--rule); }
.mk-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-stat { display: grid; gap: 4px; }
.mk-stat b { font-size: var(--t-xl); line-height: 1.1; font-weight: 500; letter-spacing: var(--track-display); font-variant-numeric: tabular-nums; }
.mk-stat span { font-size: var(--t-s); color: var(--grey-text); }
@media (max-width: 47.99rem) { .mk-stats, .mk-stats--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Split: text one side, list/table/photo the other ----------- */
.mk-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: start; }
.mk-split__text { grid-column: 1 / span 5; }
.mk-split__text h2 { margin-block-start: var(--s-3); font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.mk-split__text .mk-lede { font-size: var(--t-body); line-height: var(--lh-body); }
.mk-split__text .more, .mk-split__text .btn-row { margin-block-start: var(--s-5); }
.mk-split__side { grid-column: 7 / -1; }
.mk-split__side > .mk-lede:first-child { margin-block-start: 0; }
.mk-split__side > .mk-lede { font-size: var(--t-body); line-height: var(--lh-body); }
.mk-split--center { align-items: center; }
@media (max-width: 63.99rem) { .mk-split__text, .mk-split__side { grid-column: 1 / -1; } }

/* ---------- Panel: hairline-bordered group, optional quiet fill -------- */
.mk-panel { padding: clamp(24px, 3vw, 40px); border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); }
.mk-panel--field { background: var(--field); border-color: var(--field); }
.mk-panel h3 { font-size: var(--t-l); line-height: var(--lh-head); font-weight: 500; letter-spacing: var(--track-head); }
.mk-panel > p { margin-block-start: var(--s-3); color: var(--grey-text); max-width: 34em; }
.mk-panel .points { margin-block-start: var(--s-5); }
.mk-panel .more { margin-block-start: var(--s-4); }
.mk-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.mk-panels--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { .mk-panels--3 { grid-template-columns: 1fr; } }
@media (max-width: 47.99rem) { .mk-panels { grid-template-columns: 1fr; } }

/* ---------- Link grid: departments / ports as hairline rows in columns -- */
.mk-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); border-top: 1px solid var(--rule); }
.mk-links a { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px; padding-block: 14px; border-bottom: 1px solid var(--rule); transition: color 200ms var(--ease); }
.mk-links a:hover { color: var(--grey-text); }
.mk-links small { font-size: var(--t-s); color: var(--grey-text); white-space: nowrap; }
.mk-links--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-links--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 63.99rem) { .mk-links, .mk-links--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 47.99rem) { .mk-links, .mk-links--2, .mk-links--4 { grid-template-columns: 1fr; } }

/* ---------- RFQ specimen inside a panel -------------------------------- */
.mk-specimen__title { font-size: var(--t-m); line-height: 1.3; font-weight: 500; letter-spacing: var(--track-head); }
.mk-specimen__meta { display: flex; flex-wrap: wrap; gap: 4px var(--s-5); margin-block: var(--s-2) var(--s-5); font-size: var(--t-s); color: var(--grey-text); }
.mk-specimen__meta b { font-weight: 400; color: var(--ink); }
.mk-specimen .table-wrap { border-top-color: var(--ink); }
.mk-specimen .data-table td:first-child, .mk-specimen .data-table th:first-child { width: 3rem; }
.mk-specimen__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); margin-block-start: var(--s-4); font-size: var(--t-s); color: var(--grey-text); }

/* ---------- FAQ: reuses .faq, sized for the marketing column ----------- */
.mk-faq { grid-column: 7 / -1; }
.mk-faq summary { font-size: var(--t-body); min-height: 60px; }

/* ---------- Closing CTA band ------------------------------------------- */
.mk-cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-5); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: var(--radius); background: var(--field); }
.mk-cta__text { grid-column: 1 / span 6; }
.mk-cta__text h2 { font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); text-wrap: balance; }
.mk-cta__text p { margin-block-start: var(--s-3); max-width: 34em; color: var(--grey-text); }
.mk-cta .btn-row { grid-column: 7 / -1; justify-content: flex-end; flex-wrap: nowrap; }
.mk-cta .btn:not(.btn--ink) { background: var(--paper); }
.mk-cta .btn:not(.btn--ink):hover { background: color-mix(in srgb, var(--paper) 90%, var(--ink)); }
.mk-cta-wrap { padding-block: clamp(32px, 4vw, 56px) 0; }
@media (max-width: 63.99rem) {
  .mk-cta__text, .mk-cta .btn-row { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
}

/* ---------- Contact: three hairline panels ----------------------------- */
.mk-contact a.mk-panel { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-6); min-height: 220px; transition: border-color 200ms var(--ease); }
.mk-contact a.mk-panel:hover { border-color: var(--ink); }
.mk-contact .mk-panel__email { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; }

/* ---------- Prose page (privacy): sticky contents, readable measure ---- */
.mk-legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-6); padding-block: var(--s-7) var(--s-9); border-top: 1px solid var(--rule); }
.mk-legal__toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
.mk-legal__toc p { margin-block-end: var(--s-3); font-size: var(--t-s); color: var(--grey-text); }
.mk-legal__toc a { display: block; padding-block: 5px; font-size: var(--t-s); color: var(--grey-text); }
.mk-legal__toc a:hover { color: var(--ink); }
.mk-legal__body { grid-column: 5 / span 7; }
.mk-legal__body.prose { max-width: 42em; }
.mk-legal__body h2 { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }
.mk-legal__body h2:first-child { margin-block-start: 0; }
@media (max-width: 63.99rem) {
  .mk-legal__toc { display: none; }
  .mk-legal__body { grid-column: 1 / -1; }
}

/* ---------- Auth: form in a hairline panel, photo beside ---------------- */
.mk-auth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: var(--s-7); align-items: start; padding-block: clamp(40px, 6vw, 88px) clamp(56px, 7vw, 104px); }
.mk-auth__panel { grid-column: 1 / span 5; }
.mk-auth__panel h1 { font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); }
.mk-auth__panel > p { margin-block-start: var(--s-3); color: var(--grey-text); }
.mk-auth__panel .auth__form { margin-block-start: var(--s-6); }
.mk-auth__panel .auth__alt { margin-block-start: var(--s-5); padding-block-start: var(--s-5); border-top: 1px solid var(--rule); }
.mk-auth__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-2); }
.mk-auth__actions .btn { flex: 1 1 auto; }
.mk-auth__media { grid-column: 7 / -1; }
.mk-auth__media img { aspect-ratio: 5 / 4; }
.mk-auth__quote { margin-block-start: var(--s-5); max-width: 26em; font-size: var(--t-m); line-height: 1.35; font-weight: 500; letter-spacing: var(--track-head); }
.mk-auth__points { margin-block-start: var(--s-4); }
@media (max-width: 63.99rem) {
  .mk-auth__panel { grid-column: 2 / span 10; }
  .mk-auth__media { display: none; }
}
@media (max-width: 47.99rem) { .mk-auth__panel { grid-column: 1 / -1; } }

/* ---------- Registration: steps of the form as hairline groups --------- */
.mk-register { grid-column: 1 / span 8; }
.mk-register__head h1 { font-size: var(--t-xl); line-height: 1.15; font-weight: 500; letter-spacing: var(--track-display); }
.mk-register__head p { margin-block-start: var(--s-3); max-width: 38em; color: var(--grey-text); }
.mk-register .auth__form { gap: 0; margin-block-start: var(--s-6); }
.mk-register fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); grid-template-rows: auto 1fr; column-gap: var(--s-6); row-gap: var(--s-2); margin: 0; padding: var(--s-6) 0; border: 0; border-top: 1px solid var(--rule); }
.mk-register fieldset > legend { float: left; grid-column: 1; margin: 0; padding: 0; font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
.mk-register fieldset > .mk-register__hint { grid-column: 1; grid-row: 2; align-self: start; margin: 0; max-width: 18em; font-size: var(--t-s); color: var(--grey-text); }
.mk-register fieldset > :is(.form-grid, .mk-register__choices) { grid-column: 2; grid-row: 1 / span 2; }
.mk-register__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.mk-register .choice { padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 30px); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color 200ms var(--ease); }
.mk-register .choice:hover { border-color: var(--grey); }
.mk-register .choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.mk-register .choice:has(input:checked) .choice__title { text-decoration: none; }
.mk-register .choice input { left: var(--s-4); top: calc(var(--s-4) + 2px); }
.mk-register__submit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: var(--s-6); padding-block-start: var(--s-6); border-top: 1px solid var(--rule); }
.mk-register__submit > div { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.mk-register__submit .auth__alt { margin: 0; }
.mk-register__aside { grid-column: 10 / -1; position: sticky; top: calc(var(--header-h) + var(--s-5)); align-self: start; }
.mk-register__aside img { aspect-ratio: 4 / 5; }
.mk-register__aside h2 { margin-block-start: var(--s-5); font-size: var(--t-m); font-weight: 500; letter-spacing: var(--track-head); }
@media (max-width: 63.99rem) {
  .mk-register { grid-column: 1 / -1; }
  .mk-register__aside { display: none; }
}
@media (max-width: 47.99rem) {
  .mk-register fieldset, .mk-register__submit { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: var(--s-3); }
  .mk-register fieldset > :is(.form-grid, .mk-register__choices), .mk-register fieldset > .mk-register__hint, .mk-register__submit > div { grid-column: 1; grid-row: auto; }
  .mk-register__choices { grid-template-columns: 1fr; }
}

/* Captions under large photos stack on phones */
@media (max-width: 47.99rem) { .figure--stack figcaption { flex-direction: column; gap: 2px; } }

/* A panel's first child sits flush with the padding */
.mk-panel > :first-child { margin-block-start: 0; }
/* Auth pages without a photo centre the panel */
.mk-auth--solo .mk-auth__panel { grid-column: 4 / span 6; }
@media (max-width: 63.99rem) { .mk-auth--solo .mk-auth__panel { grid-column: 2 / span 10; } }
@media (max-width: 47.99rem) { .mk-auth--solo .mk-auth__panel { grid-column: 1 / -1; } }