/* Marketing kit styles — supplements colors_and_type.css */

.mk {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* Layout helpers — section shell mirrors the DS reference (section / section__inner) */
.mk-container {
  max-width: var(--section-max);
  margin-inline: auto;
  padding-inline: var(--section-px);
  width: 100%;
  box-sizing: border-box;
}

.mk-section { padding: var(--section-py) 0; position: relative; }
.mk-section--tight { padding: var(--section-py-tight) 0; }
/* Mobile: tighten the main section rhythm (phones only; tablet/desktop intact). */
@media (max-width: 640px) { :root { --section-py: 16px; } }

.mk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
}
/* Main grid collapses to 6 columns on narrow viewports */
@media (max-width: 980px) {
  .mk-grid { grid-template-columns: repeat(6, 1fr); }
}
/* Small screens: tighten gutters + panel inset so content isn't cramped */
@media (max-width: 640px) {
  :root { --section-px: 16px; }
}

/* Panel — consistent content wrapper inside a section (rounded + padded).
   Surface is opt-in: base is transparent (keeps vertical rhythm); add
   --sunken for the tinted card surface. */
.mk-panel {
  position: relative;
  border-radius: var(--radius-md);
  padding: clamp(var(--space-10), 4vw, var(--space-20));
}
/* Phones: every panel (transparent, --sunken, --aurora — the surface variants
   inherit this) gets a 16px horizontal inset so card content never touches the
   card edge. Vertical stays 24px. MUST come after the base .mk-panel rule above
   (equal specificity → source order decides). Net side inset = 16px container
   gutter + 16px panel = 32px from the screen edge. */
@media (max-width: 640px) {
  .mk-panel { padding: var(--space-6) var(--space-4); }
}
.mk-panel--sunken {
  background: var(--bg-sunken);
  border: 1px solid var(--border-faint);
}
/* Aurora panel — a light, atmospheric surface variant. A soft top->bottom
   purple gradient (lightest tint to a deeper step, e.g. signalling progression),
   a grain overlay, and an optional pair of slow drifting tan glow blobs.
   Self-contained; drop on any panel. For the animated atmosphere, add
   <div class="mk-aurora" aria-hidden="true"></div> as the FIRST child of the
   panel. Surface stands alone — do NOT also add --sunken. */
.mk-panel--aurora {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* iOS Safari fails to clip blurred/animated composited children (.mk-aurora
     blobs) to border-radius; a matching mask forces the rounded clip. */
  -webkit-mask-image: radial-gradient(white, black);
  mask-image: radial-gradient(white, black);
  border: none;
  /* Aurora tint + blob-placement tokens. Override these on a color/position
     variant class (e.g. .mk-panel--aurora-coral) — the gradient and both blobs
     read them, so a variant is pure token overrides, no duplicated rules.
     EXPLORATORY tints (coral/sky/mint) are oklch-derived at the purple aurora's
     lightness; promote to real --ws-* tokens once chosen. */
  --aurora-top:    var(--ws-purple-25);
  --aurora-bottom: var(--ws-purple-100);
  --aurora-a-x: -12%; --aurora-a-y: 30%; --aurora-a-delay: 0s;
  --aurora-b-x:  48%; --aurora-b-y: 42%; --aurora-b-delay: 0s;
  /* two blob (atmosphere) colors: A stays a light/white glow, B is the
     contrasting tint — override --aurora-blob-b per variant */
  --aurora-blob-a: var(--ws-tan-50);
  --aurora-blob-b: var(--ws-tan-100);
  background: linear-gradient(to bottom, var(--aurora-top), var(--aurora-bottom));
}

/* ---- Aurora color + motion-phase variations (appearance-named) ----
   Each shifts the gradient tint AND the two blobs' start positions + animation
   phase, so cards using different variants don't drift in lockstep. */
.mk-panel--aurora-coral {
  --aurora-top:    oklch(0.965 0.007 47);
  --aurora-bottom: oklch(0.93 0.015 45);
  --aurora-blob-b:   oklch(0.91 0.024 47);
  --aurora-a-x: 8%;  --aurora-a-y: 18%; --aurora-a-delay: -5s;
  --aurora-b-x: 32%; --aurora-b-y: 52%; --aurora-b-delay: -8s;
}
.mk-panel--aurora-periwinkle {
  --aurora-top:    oklch(0.965 0.0015 278);
  --aurora-bottom: oklch(0.93 0.0035 276);
  --aurora-blob-b:   oklch(0.91 0.014 278);
  --aurora-a-x: 8%;  --aurora-a-y: 18%; --aurora-a-delay: -5s;
  --aurora-b-x: 32%; --aurora-b-y: 52%; --aurora-b-delay: -8s;
}
.mk-panel--aurora-sky {
  --aurora-top:    oklch(0.965 0.0025 258);
  --aurora-bottom: oklch(0.93 0.006 260);
  --aurora-blob-b:   oklch(0.88 0.018 258);
  --aurora-a-x: -22%; --aurora-a-y: 40%; --aurora-a-delay: -9s;
  --aurora-b-x: 56%;  --aurora-b-y: 26%; --aurora-b-delay: -3s;
}
.mk-panel--aurora-amber {
  --aurora-top:    oklch(0.965 0.0025 70);
  --aurora-bottom: oklch(0.93 0.006 65);
  --aurora-blob-b:   oklch(0.91 0.014 278);
  --aurora-a-x: -4%;  --aurora-a-y: 48%; --aurora-a-delay: -7s;
  --aurora-b-x: 40%;  --aurora-b-y: 20%; --aurora-b-delay: -12s;
}
.mk-panel--aurora-sand {
  --aurora-top:    oklch(0.965 0.009 83);
  --aurora-bottom: oklch(0.93 0.019 80);
  --aurora-a-x: 6%;   --aurora-a-y: 22%; --aurora-a-delay: -4s;
  --aurora-b-x: 34%;  --aurora-b-y: 50%; --aurora-b-delay: -10s;
}
.mk-panel--aurora::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 200px 200px;
  opacity: 1; mix-blend-mode: overlay;
  pointer-events: none; z-index: 1;
}
/* Lift real content above the grain overlay (z-index 1) and the blobs
   (z-index -1), so any content placed directly in an aurora panel sits
   correctly — generic, used by both the aurora card and industry-page heroes. */
.mk-panel--aurora > :not(.mk-aurora) { position: relative; z-index: 2; }
/* Aurora atmosphere — two large, heavily-blurred tan blobs on desynced paths,
   kept out of the light top band, drifting behind the panel content. */
.mk-aurora {
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
}
.mk-aurora::before,
.mk-aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.mk-aurora::before {
  width: 92%; height: 92%;
  left: var(--aurora-a-x); top: var(--aurora-a-y);
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--aurora-blob-a) 100%, transparent) 0%,
    color-mix(in oklab, var(--aurora-blob-a) 74%, transparent) 40%,
    transparent 74%);
  filter: blur(70px);
  animation: mk-aurora-a 10s ease-in-out infinite;
  animation-delay: var(--aurora-a-delay);
}
.mk-aurora::after {
  width: 64%; height: 64%;
  left: var(--aurora-b-x); top: var(--aurora-b-y);
  background: radial-gradient(circle at center,
    color-mix(in oklab, var(--aurora-blob-b) 96%, transparent) 0%,
    color-mix(in oklab, var(--aurora-blob-b) 68%, transparent) 42%,
    transparent 72%);
  filter: blur(60px);
  animation: mk-aurora-b 13s ease-in-out infinite;
  animation-delay: var(--aurora-b-delay);
}
@keyframes mk-aurora-a {
  0%   { transform: translate(0%, 0%)    scale(1); }
  33%  { transform: translate(38%, 18%)  scale(1.22); }
  66%  { transform: translate(66%, -12%) scale(0.88); }
  100% { transform: translate(0%, 0%)    scale(1); }
}
@keyframes mk-aurora-b {
  0%   { transform: translate(0%, 0%)     scale(1); }
  30%  { transform: translate(-48%, 16%)  scale(1.26); }
  60%  { transform: translate(-22%, -15%) scale(0.82); }
  100% { transform: translate(0%, 0%)     scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-aurora::before, .mk-aurora::after { animation: none; }
}

/* Section header — 5/6 editorial split: title left (span 5), lead right (span 6) */
.mk-section-head {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter);
  align-items: start;
  margin-bottom: var(--space-16);
}
.mk-section-head__l { grid-column: 1 / span 5; }
.mk-section-head__r { grid-column: 7 / span 6; align-self: start; }
/* Section description column layout. The lead TYPE (size/line-height/color,
   incl. the mobile step-down) is the single .ws-lead definition in
   colors_and_type.css, which this selector shares — so every <p> here renders at
   lead size (bare or .ws-lead) and never mixes sizes. This rule owns only layout. */
.mk-section-head__r p { margin: 0; }
.mk-section-head__r > p + p { margin-top: var(--space-4); }
@media (max-width: 980px) {
  .mk-section-head__l, .mk-section-head__r { grid-column: 1 / -1; }
}

/* Eyebrow utility */
.mk-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mk-eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: currentColor; opacity: 0.5;
}

/* Editorial emphasis helper */
.it { color: var(--ws-purple-600); }

/* Section divider — barely-there hairline */
.mk-rule { height: 1px; background: var(--border-faint); }

/* Buttons (shared with previews; reproduced for kit isolation) */
.mk-btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all var(--dur-fast) var(--ease-out-soft);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.mk-btn--primary { background: var(--ws-red); color: var(--fg-on-red); box-shadow: var(--shadow-sm); }
.mk-btn--primary:hover { background: var(--ws-red-deep); box-shadow: var(--shadow-md); }
.mk-btn--dark { background: var(--ws-tan-900); color: var(--fg-on-dark); }
.mk-btn--dark:hover { background: var(--ws-tan-800); }
.mk-btn--secondary { background: transparent; color: var(--fg); border-color: var(--border-strong); }
.mk-btn--secondary:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); }
.mk-btn--ghost { background: transparent; color: var(--fg); }
.mk-btn--ghost:hover { background: color-mix(in oklab, var(--fg) 5%, transparent); }
/* On dark / colored backgrounds (hero, gap, cta, footer) */
.mk-btn--light { background: var(--ws-tan-50); color: var(--ws-tan-900); box-shadow: var(--shadow-sm); }
.mk-btn--light:hover { background: #fff; box-shadow: var(--shadow-md); }
.mk-btn--outline-light { background: transparent; color: var(--ws-tan-50); border-color: color-mix(in oklab, var(--ws-tan-50) 30%, transparent); }
.mk-btn--outline-light:hover { background: color-mix(in oklab, var(--ws-tan-50) 10%, transparent); }
.mk-btn .arrow { font-family: var(--font-display); font-size: 1.1em; transform: translateY(-1px); transition: transform var(--dur-fast) var(--ease-out-soft); }
.mk-btn:hover .arrow { transform: translate(2px, -1px); }
/* size modifiers */
.mk-btn--lg { font-size: var(--fs-md); padding: 16px 32px; gap: 12px; }

/* Form fields — floating-label pattern. Label sits inside the field as the
   placeholder, then floats to the top on focus / when filled. Token-based, so
   the .ws-dark scope yields the dark version automatically.
   Markup: <div class="mk-field"><input class="mk-input" placeholder=" "/><label class="mk-label">…</label></div> */
.mk-field { position: relative; }
.mk-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);            /* smallest defined radius */
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.2;
  height: 64px;                               /* taller field */
  padding: 26px 16px 8px;                      /* top room for the floated label */
  transition: border-color var(--dur-fast) var(--ease-out-soft), background var(--dur-fast) var(--ease-out-soft);
  outline: none;
  box-sizing: border-box;
}
.mk-input::placeholder { color: transparent; }  /* the label is the visible placeholder */
.mk-input:focus { border-color: var(--accent); background: color-mix(in oklab, var(--fg) 4%, transparent); }
textarea.mk-input { height: auto; min-height: 132px; padding-top: 28px; resize: vertical; }
/* select — placeholder-only dropdown with a custom chevron (right padding so it clears the edge) */
select.mk-input { appearance: none; -webkit-appearance: none; padding-top: 0; padding-bottom: 0; padding-right: 48px; cursor: pointer; }
.mk-field--select { position: relative; }
.mk-field--select::after {
  content: ""; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; pointer-events: none; color: var(--fg-muted);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.mk-label {
  position: absolute; left: 16px; top: 0;
  height: 64px; display: flex; align-items: center;   /* vertically centred at rest */
  margin: 0; pointer-events: none;
  font-family: var(--font-sans); font-size: var(--fs-base);
  color: var(--fg-faint);                      /* resting = placeholder colour (light) */
  transform: translateY(0) scale(1);           /* explicit resting transform so the float interpolates */
  transform-origin: left center;
  transition: color var(--dur-fast) var(--ease-out-soft);  /* transform snaps (engine won't reliably transition it) */
}
/* floated state — focused (focus-within) or filled (.is-filled via JS; selects always).
   Animate TRANSFORM (not top) so it interpolates reliably. */
.mk-field:focus-within .mk-label,
.mk-field.is-filled .mk-label {
  transform: translateY(-18px) scale(0.78);
  color: var(--fg-muted);
}

/* Dark version — used on .ws-dark containers; faded (not gray) placeholder text */
.ws-dark .mk-label { color: color-mix(in oklab, var(--fg) 38%, transparent); }
.ws-dark .mk-field:focus-within .mk-label,
.ws-dark .mk-field.is-filled .mk-label { color: var(--fg-muted); }
/* select showing its placeholder option reads faded like the other fields */
.mk-input.is-placeholder { color: var(--fg-faint); }
.ws-dark .mk-input.is-placeholder { color: color-mix(in oklab, var(--fg) 38%, transparent); }
/* focus ring on dark = light purple (not red) */
.ws-dark .mk-input:focus { border-color: var(--ws-purple-300); }

/* Reveal — scroll entrance. .in is added by the page's IntersectionObserver. */
.mk-reveal { opacity: 0; transform: translateY(40px); transition: opacity 800ms var(--ease-out-soft), transform 800ms var(--ease-out-soft); }
.mk-reveal.in { opacity: 1; transform: none; }

/* Staggered group — children (.mk-reveal-item) cascade in DOM order when the group enters.
   The observer sets --mk-i per item; tune the cadence with --mk-stagger (default 120ms). */
.mk-reveal-group .mk-reveal-item {
  opacity: 0; transform: translateY(40px);
  transition: opacity 760ms var(--ease-out-soft), transform 760ms var(--ease-out-soft);
  transition-delay: calc(var(--mk-i, 0) * var(--mk-stagger, 120ms));
}
.mk-reveal-group.in .mk-reveal-item { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-reveal, .mk-reveal-group .mk-reveal-item { opacity: 1 !important; transform: none !important; transition: none !important; }
}