/* marketing.css v2: the public marketing design system.
   Voice: night-game broadcast, scorecard discipline. One variable family
   (Archivo, condensed uppercase display), green-tinted black field, chalk
   text, flat signal green. No gradients, no cards, no icon grids. */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,100..900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --field: #070c09;        /* green-tinted black, not SaaS navy */
  --field-2: #0a120d;
  --chalk: #eef3ee;
  --chalk-60: #a7b3a9;
  --chalk-35: #6b756d;
  --rule: rgba(238, 243, 238, 0.14);
  --rule-soft: rgba(238, 243, 238, 0.08);
  --green: #35d07a;
  --green-ink: #06210f;    /* dark text on green surfaces */
  --maxw: 1200px;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--field); color: var(--chalk);
  -webkit-font-smoothing: antialiased; line-height: 1.65;
  font-size: 1.0rem;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--green); color: var(--green-ink); }

/* the display voice: condensed, heavy, uppercase, tight */
.disp {
  font-stretch: 80%; font-weight: 760; text-transform: uppercase;
  letter-spacing: 0.005em; line-height: 0.96;
}
.label {
  font-stretch: 85%; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.72rem; color: var(--chalk-35);
}
.num { font-variant-numeric: tabular-nums; }

/* ---- top nav: fixed, transparent over the cover, solid once scrolled ---- */
.mk-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px max(28px, calc((100vw - var(--maxw)) / 2 + 28px));
  border-bottom: 1px solid transparent;
  transition: background .35s cubic-bezier(.22,1,.36,1), border-color .35s, padding .35s;
}
.mk-top.scrolled { background: rgba(7, 12, 9, 0.94); border-bottom-color: var(--rule); padding-top: 12px; padding-bottom: 12px; }
.mk-top .logo img { height: 44px; transition: height .35s cubic-bezier(.22,1,.36,1); }
.mk-top.scrolled .logo img { height: 34px; }
.mk-top .links a:not(.signin) { position: relative; }
.mk-top .links a:not(.signin)::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 100%;
  background: var(--green); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.mk-top .links a:not(.signin):hover::after { transform: scaleX(1); }
.mk-top .links { display: flex; align-items: center; gap: 26px; }
.mk-top .links a {
  color: var(--chalk-60); text-decoration: none; font-size: 0.83rem;
  font-stretch: 88%; font-weight: 560; text-transform: uppercase; letter-spacing: 0.09em;
  transition: color .15s;
}
.mk-top .links a:hover, .mk-top .links a.here { color: var(--chalk); }
.mk-top .signin, .mk-top .links a.signin {
  background: var(--green); color: var(--green-ink); font-weight: 750;
  padding: 10px 20px; border-radius: 3px; letter-spacing: 0.06em;
}
.mk-top .links a.signin:hover { color: var(--green-ink); filter: brightness(1.08); }
@media (max-width: 780px) { .mk-top .links a:not(.signin) { display: none; } }

/* ---- hero (landing pages: split; homepage uses .mk-cover) ---- */
.mk-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: calc(clamp(40px, 7vw, 96px) + 80px) 28px clamp(32px, 5vw, 72px);
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 72px); align-items: center;
}
.mk-hero h1 {
  font-stretch: 80%; font-weight: 780; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 0.94; letter-spacing: 0.005em;
}
.mk-hero h1 em { font-style: normal; color: var(--green); }
.mk-hero .lead {
  color: var(--chalk-60); font-size: clamp(1rem, 1.5vw, 1.12rem);
  margin-top: 22px; max-width: 54ch;
}
.mk-hero .ctas { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.mk-hero .photo, .mk-split .photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.mk-hero .photo img, .mk-split .photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: var(--focus, 50% 42%);
  filter: contrast(1.06) saturate(0.8) brightness(0.9);
  transition: transform 1.4s cubic-bezier(.22,1,.36,1);
}
.mk-hero .photo:hover img, .mk-split .photo:hover img { transform: scale(1.035); }
.mk-hero .photo::after, .mk-split .photo::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(7, 12, 9, 0.28); pointer-events: none;
}
@media (max-width: 880px) { .mk-hero { grid-template-columns: 1fr; } .mk-hero .photo, .mk-split .photo { aspect-ratio: 16 / 10; } }

.mk-btn {
  display: inline-block; padding: 14px 28px; border-radius: 3px;
  font-weight: 720; font-stretch: 88%; text-transform: uppercase;
  letter-spacing: 0.07em; text-decoration: none; font-size: 0.88rem;
}
.mk-btn.primary { background: var(--green); color: var(--green-ink); }
.mk-btn { transition: transform .3s cubic-bezier(.22,1,.36,1), filter .2s, border-color .2s, color .2s; }
.mk-btn.primary:hover { filter: brightness(1.08); transform: translateY(-2px); }
.mk-btn.ghost { border: 1px solid var(--rule); color: var(--chalk); }
.mk-btn.ghost:hover { border-color: var(--green); color: var(--green); }

/* ---- scorecard section header: THE structural system ---- */
.mk-section { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px, 6vw, 84px) 28px; }
.mk-section.tight { padding-top: 8px; }
.mk-sechead {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: 18px;
}
.mk-sechead .idx {
  font-stretch: 72%; font-weight: 800; font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--green); line-height: 1; font-variant-numeric: tabular-nums;
}
.mk-section h2, .mk-sechead h2 {
  font-stretch: 80%; font-weight: 760; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.02; max-width: 24ch;
}
.mk-section > p.sub, .mk-sechead + p.sub {
  color: var(--chalk-60); margin-top: 16px; max-width: 64ch;
}

/* split: prose beside full-bleed photo column */
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: center; margin-top: 38px; }
.mk-split.flip > .photo { order: -1; }
.mk-split h3 { font-stretch: 82%; font-weight: 720; text-transform: uppercase; font-size: 1.25rem; letter-spacing: 0.02em; }
.mk-split p { color: var(--chalk-60); margin-top: 12px; max-width: 56ch; }
.mk-split ul { margin: 18px 0 0 0; list-style: none; border-top: 1px solid var(--rule-soft); }
.mk-split li { padding: 11px 0; color: var(--chalk-60); border-bottom: 1px solid var(--rule-soft); }
.mk-split li b { color: var(--chalk); font-weight: 650; }
@media (max-width: 840px) { .mk-split { grid-template-columns: 1fr; } .mk-split.flip > .photo { order: 0; } }

/* numbered rows (steps, rosters): ruled, no cards */
.mk-steps { margin-top: 34px; border-top: 1px solid var(--rule); }
.mk-step {
  display: grid; grid-template-columns: 110px 1fr; gap: 22px;
  padding: 30px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.mk-step .n {
  font-stretch: 72%; font-weight: 800; font-size: 2.6rem; line-height: 1;
  color: var(--green); font-variant-numeric: tabular-nums;
}
.mk-step h3 { font-stretch: 82%; font-weight: 720; text-transform: uppercase; font-size: 1.12rem; letter-spacing: 0.03em; }
.mk-step p { color: var(--chalk-60); margin-top: 8px; max-width: 64ch; }
@media (max-width: 640px) { .mk-step { grid-template-columns: 56px 1fr; } .mk-step .n { font-size: 1.8rem; } }

/* box-score table */
.mk-table { width: 100%; border-collapse: collapse; margin-top: 32px; font-size: 0.96rem; }
.mk-table th {
  text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--rule);
  font-stretch: 85%; font-weight: 620; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.7rem; color: var(--chalk-35);
}
.mk-table td { padding: 15px 16px; border-bottom: 1px solid var(--rule-soft); color: var(--chalk-60); vertical-align: top; }
.mk-table td:first-child { color: var(--chalk); font-weight: 650; white-space: nowrap; font-stretch: 88%; }
.mk-table td b { color: var(--green); font-weight: 700; }
.mk-table tr:hover td { background: var(--field-2); }

/* FAQ: ruled ledger */
.mk-faq { margin-top: 30px; border-top: 1px solid var(--rule); }
.mk-faq details { border-bottom: 1px solid var(--rule-soft); }
.mk-faq summary {
  cursor: pointer; padding: 20px 4px; font-weight: 640; font-size: 1.0rem;
  list-style: none; display: flex; justify-content: space-between; gap: 14px;
}
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; color: var(--green); font-weight: 700; font-size: 1.25rem; flex: none; line-height: 1.2; }
.mk-faq details[open] summary::after { content: "\2212"; }
.mk-faq .a { color: var(--chalk-60); padding: 0 4px 22px; max-width: 70ch; }

/* flat green band: the committed color moment */
.mk-band { background: var(--green); color: var(--green-ink); }
.mk-band .inner { max-width: var(--maxw); margin: 0 auto; padding: clamp(48px, 7vw, 92px) 28px; }
.mk-band h2 {
  font-stretch: 78%; font-weight: 790; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.4vw, 3.4rem); line-height: 0.96; max-width: 22ch;
}
.mk-band p { margin-top: 16px; max-width: 58ch; font-weight: 520; opacity: 0.82; }
.mk-band .mk-btn { background: var(--green-ink); color: var(--green); margin-top: 30px; }
.mk-band .mk-btn:hover { filter: brightness(1.35); }

/* prose (pillar page) */
.mk-prose { max-width: 760px; }
.mk-prose h2 { margin-top: 52px; font-stretch: 80%; font-weight: 760; text-transform: uppercase; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.05; }
.mk-prose h3 { font-stretch: 82%; font-weight: 720; text-transform: uppercase; font-size: 1.1rem; margin-top: 30px; }
.mk-prose p { color: var(--chalk-60); margin-top: 14px; }
.mk-prose p b, .mk-prose li b { color: var(--chalk); }
.mk-prose ul { margin: 14px 0 0 0; list-style: none; border-top: 1px solid var(--rule-soft); }
.mk-prose li { padding: 10px 0; color: var(--chalk-60); border-bottom: 1px solid var(--rule-soft); }
.mk-prose a { color: var(--green); text-decoration: none; }
.mk-prose a:hover { text-decoration: underline; }

/* footer: info-rich ledger */
.mk-foot { border-top: 1px solid var(--rule); margin-top: clamp(30px, 5vw, 64px); }
.mk-foot .grid {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(32px, 5vw, 56px) 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(24px, 4vw, 56px);
}
.mk-foot .brandcol p { color: var(--chalk-35); font-size: 0.88rem; margin-top: 14px; max-width: 40ch; line-height: 1.6; }
.mk-foot .mail {
  display: inline-block; margin-top: 18px; color: var(--green); text-decoration: none;
  font-stretch: 85%; font-weight: 650; letter-spacing: 0.02em; border-bottom: 1px solid transparent;
  transition: border-color .25s;
}
.mk-foot .mail:hover { border-bottom-color: var(--green); }
.mk-foot .col { display: flex; flex-direction: column; gap: 10px; font-size: 0.9rem; }
.mk-foot .col .h {
  color: var(--chalk-35); font-stretch: 85%; font-weight: 620; text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.68rem; margin-bottom: 4px;
}
.mk-foot .col a { color: var(--chalk-60); text-decoration: none; transition: color .2s; }
.mk-foot .col a:hover { color: var(--chalk); }
.mk-foot .bottom {
  border-top: 1px solid var(--rule-soft);
  max-width: var(--maxw); margin: 0 auto; padding: 20px 28px 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--chalk-35); font-size: 0.78rem;
}
@media (max-width: 860px) { .mk-foot .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mk-foot .grid { grid-template-columns: 1fr; } }

/* =========================================================
   Homepage-only primitives
   ========================================================= */

/* full-bleed cover hero */
.mk-cover { position: relative; overflow: hidden; }
.mk-cover .bg { position: absolute; inset: 0; }
.mk-cover .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; filter: contrast(1.05) saturate(0.75) brightness(0.85); }
@media (max-width: 700px) { .mk-cover .bg img { object-position: 70% 25%; } }
.mk-cover .bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(7,12,9,0.94) 30%, rgba(7,12,9,0.55) 70%, rgba(7,12,9,0.35));
}
.mk-cover .inner {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(120px, 15vw, 208px) 28px clamp(64px, 9vw, 136px);
}
.mk-cover .bg img { animation: kb 8s cubic-bezier(.22,1,.36,1) both; }
@keyframes kb { from { transform: scale(1.07); } to { transform: scale(1); } }
.mk-cover h1 {
  font-stretch: 78%; font-weight: 790; text-transform: uppercase;
  font-size: clamp(2.7rem, 7.4vw, 6rem); line-height: 0.92; letter-spacing: 0.004em;
  max-width: 14ch;
}
.mk-cover h1 em { font-style: normal; color: var(--green); }
.mk-cover .lead { color: var(--chalk-60); font-size: clamp(1rem, 1.6vw, 1.18rem); margin-top: 26px; max-width: 52ch; }
.mk-cover .ctas { display: flex; gap: 12px; margin-top: 38px; flex-wrap: wrap; }
.mk-cover .lead, .mk-cover .ctas { animation: rise .8s cubic-bezier(.22,1,.36,1) both; }
.mk-cover .lead { animation-delay: .45s; }
.mk-cover .ctas { animation-delay: .58s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk-cover .lead, .mk-cover .ctas, .mk-cover .bg img { animation: none; }
}

/* ticker strip: the numbers as one ruled line, not stat cards */
.mk-ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.mk-ticker .inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 28px;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.mk-ticker .cell { display: flex; align-items: baseline; gap: 12px; padding: 20px 0; }
.mk-ticker .cell + .cell { border-left: 1px solid var(--rule-soft); padding-left: 24px; }
.mk-ticker .v { font-stretch: 72%; font-weight: 800; font-size: 2rem; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.mk-ticker .k { font-stretch: 85%; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; color: var(--chalk-35); }
@media (max-width: 820px) {
  .mk-ticker .inner { grid-template-columns: 1fr 1fr; }
  .mk-ticker .cell:nth-child(3) { border-left: none; padding-left: 0; }
}

/* broadcast readout chips over a photo */
.mk-readout { position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.mk-readout .chip {
  display: flex; align-items: baseline; gap: 10px;
  background: rgba(7, 12, 9, 0.88); border: 1px solid var(--rule);
  padding: 7px 12px;
}
.mk-readout .chip .k { font-stretch: 85%; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; color: var(--chalk-35); }
.mk-readout .chip .v { font-stretch: 75%; font-weight: 780; font-size: 1.02rem; color: var(--green); font-variant-numeric: tabular-nums; }


/* =========================================================
   Motion layer (driven by marketing.js; all reduced-motion safe)
   ========================================================= */

/* headline word masks */
h1.split .wm { display: inline-block; overflow: hidden; vertical-align: bottom; }
h1.split .w {
  display: inline-block; transform: translateY(112%);
  animation: wup .85s cubic-bezier(.19,1,.22,1) forwards;
  animation-delay: calc(var(--i) * 0.05s);
}
h1.split .w.em { color: var(--green); }
@keyframes wup { to { transform: none; } }

/* scroll reveals */
.rv {
  opacity: 0; transform: translateY(20px);
  transition: opacity .75s cubic-bezier(.22,1,.36,1) var(--d, 0ms),
              transform .75s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
}
.rv.inview { opacity: 1; transform: none; }
tr.rv { transform: none; }

/* marquee strip */
.mk-marquee { overflow: hidden; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; }
.mk-marquee .track { display: flex; width: max-content; animation: mq 30s linear infinite; }
.mk-marquee span {
  font-stretch: 74%; font-weight: 800; text-transform: uppercase; white-space: nowrap;
  font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1; padding-right: 0.6em;
  color: transparent; -webkit-text-stroke: 1px rgba(238, 243, 238, 0.25);
}
.mk-marquee span.solid { color: var(--green); -webkit-text-stroke: 0; }
@keyframes mq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mk-marquee .track { animation: none; } }

/* oversized footer wordmark */
.mk-foot .word {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 5vw, 56px) 28px 0;
  font-stretch: 72%; font-weight: 800; text-transform: uppercase;
  font-size: clamp(3.2rem, 11.5vw, 10.5rem); line-height: 0.88; letter-spacing: 0.004em;
  color: rgba(238, 243, 238, 0.055); user-select: none;
}

/* film grain: the expensive texture */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}