/* SportsWatch — public marketing pages.
 * Ported from the Claude Design marketing-site UI kit. Pairs with brand.css.
 * Prefixes: mk-* = page layout/sections, sw-* = design-system primitives.
 */

/* Headings use a fluid clamp on marketing pages (kit index.html) */
.sw-root h1 { font-size:clamp(34px,3.8vw,56px); line-height:1.12; }
.sw-root h2 { font-size:clamp(26px,3vw,42px); line-height:1.18; }
.sw-root a { color:inherit; }

/* ---- Primitives (buttons / cards / badges / wordmark) ---- */
.sw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);font-weight:500;white-space:nowrap;border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;text-decoration:none;line-height:1;transition:background-color .2s,border-color .2s,color .2s}
.sw-btn:focus-visible{outline:2px solid var(--color-curious-blue);outline-offset:2px}
.sw-btn--sm{font-size:14px;padding:9px 15px}.sw-btn--md{font-size:16px;padding:12px 19px}.sw-btn--lg{font-size:17px;padding:14px 24px}
.sw-btn--primary{background:var(--color-curious-blue);border-color:var(--color-curious-blue);color:#fff}.sw-btn--primary:hover{background:var(--color-curious-blue-dark);border-color:var(--color-curious-blue-dark);color:#fff}
.sw-btn--secondary{background:transparent;border-color:var(--color-ink-15);color:var(--scheme-text,var(--text));backdrop-filter:blur(10px)}.sw-btn--secondary:hover{background:var(--color-ink-5);color:var(--scheme-text,var(--text))}
.sw-btn--ghost{background:transparent;border-color:transparent;color:var(--scheme-text,var(--text))}.sw-btn--ghost:hover{background:var(--color-ink-5)}
.sw-btn--link{background:transparent;border:0;padding:0;gap:6px;color:var(--scheme-text,var(--text))}.sw-btn--link:hover{color:var(--color-curious-blue)}
.sw-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--scheme-border,var(--border));border-radius:var(--radius-card);overflow:hidden;color:var(--text);height:100%}
.sw-card__media{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--color-neutral-lightest)}
.sw-card__body{display:flex;flex-direction:column;gap:8px;padding:24px}
.sw-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1;padding:5px 10px;border-radius:var(--radius-badge);border:1px solid transparent}
.sw-badge--primary{background:var(--color-curious-blue-lightest);color:var(--color-curious-blue-dark)}
.sw-badge--live{background:#fdecec;color:var(--live)}
.sw-wordmark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1}
.sw-wordmark__mark{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:7px;background:var(--color-curious-blue);color:#fff}
.sw-wordmark__name{font-family:var(--font-logo);font-weight:700;letter-spacing:-.02em;color:var(--text);font-size:24px}
.sw-wordmark__name b{color:var(--color-curious-blue);font-weight:700}
.sw-wordmark--on-dark .sw-wordmark__name{color:#fff}.sw-wordmark--on-dark .sw-wordmark__name b{color:var(--color-curious-blue-light)}

/* ---- Layout primitives ---- */
.mk-container{max-width:1240px;margin:0 auto;padding:0 5%}
.mk-container--narrow{max-width:860px}
.mk-section{padding:clamp(44px,5.5vw,84px) 0}
.mk-section--tight{padding:32px 0}
.mk-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.mk-row--center{justify-content:center}
.mk-lead{font-size:clamp(17px,1.4vw,20px);line-height:1.55;color:var(--text-muted);margin:16px 0 0;max-width:56ch}
.mk-muted{font-size:15px;line-height:1.55;color:var(--text-muted);margin:0}
.mk-fine{font-size:14px;color:var(--text-subtle);margin:20px 0 0}
.mk-h5{font-size:21px;line-height:1.25}
.mk-h6{font-size:19px}
.mk-head{max-width:640px;margin:0 auto clamp(36px,5vw,60px);text-align:center}
.mk-head .sw-eyebrow,.mk-head .mk-lead{margin-left:auto;margin-right:auto}
.mk-head h2{margin-top:12px}

/* nav */
.mk-nav{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--border);backdrop-filter:blur(8px);background:color-mix(in srgb,#fff,transparent 8%)}
.mk-nav__inner{max-width:1240px;margin:0 auto;padding:0 5%;height:68px;display:flex;align-items:center;gap:24px}
.mk-nav__links{display:flex;gap:6px;margin-left:16px}
.mk-nav__links a{padding:8px 12px;font-size:16px;border-radius:6px;text-decoration:none;color:var(--text);transition:background .2s}
.mk-nav__links a:hover{background:var(--color-ink-5)}
.mk-nav__cta{margin-left:auto;display:flex;gap:12px;align-items:center}

/* hero */
.mk-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;background:#fff;border:1px solid var(--border)}
.mk-hero__copy{padding:clamp(24px,3vw,40px)}
.mk-hero__media{position:relative;align-self:stretch}
.mk-hero__media img{width:100%;height:100%;object-fit:cover;display:block;min-height:360px}
.mk-hero__chip{position:absolute;left:20px;bottom:20px;right:20px;display:flex;gap:12px;align-items:center;background:color-mix(in srgb,#fff,transparent 6%);backdrop-filter:blur(10px);border:1px solid var(--border);padding:12px 14px;font-size:14px;line-height:1.35;box-shadow:var(--shadow-card)}
.mk-hero__chipdot{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:999px;background:var(--color-curious-blue);color:#fff}
.mk-hero__chiptext{color:var(--text-muted)}

/* sport strip */
.mk-strip__label{text-align:center;color:var(--text-subtle);font-size:15px;margin:0 0 22px}
.mk-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 18px}
.mk-strip__item{font-family:var(--font-heading);font-size:clamp(18px,2vw,26px);color:var(--text);opacity:.55}

/* grids */
.mk-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.mk-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mk-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.mk-feat__eyebrow{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:13px;color:var(--color-curious-blue);text-transform:uppercase;letter-spacing:.04em}
.mk-feat__eyebrow svg{color:var(--color-curious-blue)}
.sw-card .sw-btn--link{margin-top:6px;align-self:flex-start}

/* steps */
.mk-step__top{display:flex;align-items:center;justify-content:space-between}
.mk-step__n{font-family:var(--font-heading);font-size:26px;color:var(--color-curious-blue)}
.mk-step__ic{color:var(--text-muted)}

/* split */
.mk-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.mk-split__media img{width:100%;aspect-ratio:4/3.4;object-fit:cover;display:block;border:1px solid var(--border)}
.mk-checks{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px}
.mk-checks li{position:relative;padding-left:30px;font-size:17px;color:var(--text)}
.mk-checks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:999px;background:var(--color-curious-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}

/* roles */
.mk-rolegrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px;margin-top:30px}
.mk-role{display:flex;gap:14px}
.mk-role__ic{flex:none;width:44px;height:44px;display:grid;place-items:center;background:var(--color-curious-blue-lightest);color:var(--color-curious-blue-dark)}
.mk-role b{font-size:16px}
.mk-role p{margin:4px 0 0;font-size:14px;color:var(--text-muted)}

/* personas */
.mk-personas{text-align:center}
.mk-persona{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px}
.mk-persona__ic{width:60px;height:60px;display:grid;place-items:center;border-radius:999px;background:var(--color-curious-blue-lightest);color:var(--color-curious-blue-dark)}
.mk-persona p{max-width:28ch}

/* accordion */
.mk-acc{border-top:1px solid var(--scheme-border)}
.mk-acc__item{border-bottom:1px solid var(--scheme-border)}
.mk-acc__trigger{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;background:transparent;border:0;cursor:pointer;padding:22px 4px;font-family:var(--font-body);font-weight:600;letter-spacing:-.01em;font-size:clamp(17px,1.5vw,20px);color:var(--text);text-align:left}
.mk-acc__ic{flex:none;color:var(--text-muted);transition:transform .3s var(--ease-standard)}
.mk-acc__item[data-open="true"] .mk-acc__ic{transform:rotate(180deg)}
.mk-acc__panel{overflow:hidden;height:0;transition:height .3s var(--ease-standard)}
.mk-acc__inner{margin:0;padding:0 4px 22px;font-size:16px;line-height:1.6;color:var(--text-muted);max-width:70ch}
.mk-faq__foot{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:40px;font-size:16px;color:var(--text-muted)}

/* pricing */
.mk-price{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--border);padding:32px}
.mk-price--featured{border-color:var(--color-curious-blue);box-shadow:var(--shadow-card)}
.mk-price__amt{font-family:var(--font-heading);font-size:48px;line-height:1.05;margin:8px 0}
.mk-price__amt span{font-family:var(--font-body);font-size:16px;color:var(--text-subtle)}
.mk-price__list{list-style:none;padding:0;margin:18px 0 24px;display:flex;flex-direction:column;gap:12px}
.mk-price__list li{position:relative;padding-left:28px;font-size:15px;color:var(--text)}
.mk-price__list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:999px;background:var(--color-curious-blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}

/* currency toggle */
.mk-curtoggle{display:inline-flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:18px}
.mk-curtoggle button{background:transparent;border:0;padding:8px 18px;font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--text-muted);cursor:pointer;transition:background .2s,color .2s}
.mk-curtoggle button.is-active{background:var(--color-curious-blue);color:#fff}
.mk-price__amt [data-cur]{display:inline}

/* donate band */
.mk-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;background:#fff;border:1px solid var(--border);padding:clamp(28px,4vw,44px)}
.mk-band__ic{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:999px;background:var(--color-curious-blue-lightest);color:var(--color-curious-blue-dark)}

/* cta */
.mk-cta{text-align:center;max-width:720px;margin:0 auto;padding:clamp(40px,5vw,72px) 0}
.mk-cta .mk-lead{margin-left:auto;margin-right:auto}

/* footer */
.mk-footer{padding:64px 0 28px;border-top:1px solid var(--border)}
.mk-footer__top{display:flex;flex-direction:column;align-items:center;gap:26px;padding-bottom:40px}
.mk-footer__links{list-style:none;display:flex;gap:26px;padding:0;margin:0;flex-wrap:wrap;justify-content:center}
.mk-footer__links a{font-weight:600;font-size:15px;text-decoration:none}
.mk-footer__links a:hover{color:var(--color-curious-blue)}
.mk-footer__rule{height:1px;background:var(--border)}
.mk-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px;font-size:14px;color:var(--text-subtle);gap:16px}
.mk-footer__bottom ul{list-style:none;display:flex;gap:22px;padding:0;margin:0;flex-wrap:wrap}
.mk-footer__bottom a{text-decoration:underline}

@media (max-width:900px){
  .mk-hero,.mk-split{grid-template-columns:1fr}
  .mk-split__media--left{order:2}
  .mk-grid-4,.mk-grid-3{grid-template-columns:1fr 1fr}
  .mk-rolegrid{grid-template-columns:1fr}
  .mk-nav__links{display:none}
  .mk-footer__bottom{flex-direction:column-reverse;gap:16px}
}
@media (max-width:560px){ .mk-grid-4,.mk-grid-3,.mk-grid-2{grid-template-columns:1fr} }