@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:wght@600;700;800&display=swap');

/* ============================================================================
   Marketing site — dark treatment, built to DAWG Landing Dark v2.dc.html.

   SCOPE. Every token below is for the MARKETING pages only. None of it is
   referenced from app.css and none of it may be: the app screens keep the §1
   light palette, and a dark token bleeding into them would repaint the product.
   That is why the dark values live here, declared once, next to --body-copy.

   --body-copy stays LIGHT-page grey on purpose. It is the legal pages' body
   colour (see .legal at the foot of this file), and those are not part of the
   dark treatment. The dark page's body copy is --mk-body. Do not merge the two.

   Orange (--accent) and navy (--navy) come from app.css unchanged — they are the
   same brand values on either ground. What changes on dark is what sits ON the
   orange: dark ink, never white. That is --mk-on-accent.

   Type is a three-role system: Archivo Black for display, Archivo 700 for
   eyebrows/labels/buttons, Open Sans for body. Open Sans is imported by app.css.
   ============================================================================ */

:root {
    /* Light-page body copy. Legal pages only — see the note above. */
    --body-copy: #3f4b52;

    /* ---- Dark marketing palette ---- */
    --mk-base: #04191F;                     /* page ground */
    --mk-band: #072A34;                     /* lifted band sections */
    --mk-footer: #020F13;                   /* footer, the deepest step */
    --mk-surface: var(--navy);              /* #073240 — navy is a SURFACE here, not a background */
    --mk-text: #EDF3F4;                     /* headings, primary text */
    --mk-body: rgba(214, 227, 230, .7);     /* body copy on dark */
    --mk-muted: rgba(237, 243, 244, .6);    /* labels, secondary text */
    --mk-on-accent: #04191F;                /* text ON orange — dark, never white */

    /* Hairlines. Faint on the base, a touch stronger where a rule does real work. */
    --mk-line: rgba(255, 255, 255, .08);
    --mk-line-mid: rgba(255, 255, 255, .12);
    --mk-line-strong: rgba(255, 255, 255, .14);

    /* Structural */
    --mk-cut: 12px;                         /* clipped corner on buttons */
    --mk-cut-lg: 18px;                      /* clipped corner on tiles */
    --mk-max: 1280px;
}

/* The page ground has to reach the ROOT, not just the body. app.css sets a light
   --page on `html, body`, and html is what paints the canvas: any area .mk does
   not cover — below the footer on a short viewport, and the overscroll rubber-band
   — renders light behind the dark design. Both elements are needed; setting only
   body leaves the canvas light. Scoped with :has() so ONLY the landing page is
   affected — the legal pages share this layout and stay light. */
html:has(.mk),
body:has(.mk) { background: var(--mk-base); }

.mk {
    position: relative;
    color: var(--mk-text);
    background: var(--mk-base);
    overflow-x: hidden;
}

/* Fixed grain across the whole page. Overlay blend so it sits in the midtones
   rather than fogging the blacks. Never interactive. */
.mk-noise {
    position: fixed;
    inset: 0;
    z-index: 200;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.mk-wrap { max-width: var(--mk-max); margin: 0 auto; padding: 0 32px; }

/* Eyebrow: Archivo 700, wide tracking, with a short orange rule ABOVE it.
   The rule is generated, so every eyebrow gets one without extra markup. */
.mk-eyebrow {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
}
.mk-eyebrow::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    background: var(--accent);
    margin-bottom: 14px;
}

.mk h2 {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(30px, 3vw, 42px);
    line-height: 1.05;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--mk-text);
    margin: 20px 0 0;
    text-wrap: balance;
}

.mk-copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mk-body);
}
.mk-copy p { margin: 0; }
.mk-copy .lead { font-weight: 700; color: var(--mk-text); }

/* Header */
.mk-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(4, 25, 31, .82);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--mk-line);
}
.mk-header-inner { max-width: var(--mk-max); margin: 0 auto; padding: 0 32px; height: 74px; display: flex; align-items: center; gap: 44px; }
.mk-nav { display: flex; gap: 30px; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mk-nav a { color: rgba(237, 243, 244, .72); }
.mk-nav a:hover { color: var(--accent); text-decoration: none; }
.mk-header .spacer { flex: 1; }
.mk-header-cta { display: flex; align-items: center; gap: 16px; }
.mk-getapp { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(237, 243, 244, .55); }
.mk-getapp:hover { color: var(--accent); text-decoration: none; }

/* Hero */
.mk-hero { position: relative; background: var(--mk-base); overflow: hidden; }
.mk-hero-scrim { position: absolute; inset: 0; background: linear-gradient(96deg, var(--mk-base) 6%, rgba(4, 25, 31, .9) 40%, rgba(7, 50, 64, .42) 100%); }
.mk-hero-fade { position: absolute; inset: auto 0 0 0; height: 220px; background: linear-gradient(180deg, rgba(4, 25, 31, 0), var(--mk-base)); }
.mk-hero-inner { position: relative; max-width: var(--mk-max); margin: 0 auto; padding: 150px 32px 140px; }
/* Effectively the full hero content box. The second line, "COMPETE WITH
   CONFIDENCE.", is the widest thing on the page and needs every pixel. */
.mk-hero-text { max-width: 1200px; }
.mk-hero h1 {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    /* The vw term is measured against the VIEWPORT while the container is capped
       at --mk-max, so above 1280px the type keeps growing and the box does not.
       The design was authored at 1280px, which is why this only showed up wide:
       the old clamp hit its 108px maximum and shattered the headline.

       The maximum is set by arithmetic, not taste. "COMPETE WITH CONFIDENCE."
       measures 1614px at 100px in Archivo Black at this tracking — 16.14px of
       width per 1px of type. The hero content box maxes out at ~1200px, so the
       largest size that still fits the intended two lines is ~74px. 70px is that
       with a margin for font-metric drift across platforms. Raising this back
       toward the design file's 108px cannot work: it would need 1743px of line
       and the container is capped at 1280. */
    font-size: clamp(46px, 5.4vw, 70px);
    line-height: .92;
    letter-spacing: -.035em;
    text-transform: uppercase;
    color: var(--mk-text);
    margin: 26px 0 0;
    text-wrap: balance;
}
.mk-hero h1 .acc { color: var(--accent); }
.mk-hero p { font-size: 19px; line-height: 1.55; color: var(--mk-body); margin: 30px 0 0; max-width: 580px; text-wrap: pretty; }
.mk-hero-actions { display: flex; gap: 12px; margin-top: 42px; flex-wrap: wrap; }

/* Buttons.
   Filled buttons take a clipped diagonal on two opposing corners — no radius.
   Outline buttons stay square: clip-path would slice the border and read as a
   rendering fault rather than a decision. */
.mk-btn {
    display: inline-flex;
    align-items: center;
    height: 58px;
    padding: 0 34px;
    border-radius: 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.mk-cut {
    clip-path: polygon(var(--mk-cut) 0, 100% 0, 100% calc(100% - var(--mk-cut)), calc(100% - var(--mk-cut)) 100%, 0 100%, 0 var(--mk-cut));
}
.mk-btn-accent { background: var(--accent); color: var(--mk-on-accent); }
.mk-btn-accent:hover { background: var(--mk-text); color: var(--mk-on-accent); text-decoration: none; }
.mk-btn-outline-light { border: 1.5px solid rgba(237, 243, 244, .3); color: var(--mk-text); }
.mk-btn-outline-light:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.mk-btn-dark { background: var(--mk-base); color: var(--mk-text); }
.mk-btn-dark:hover { background: var(--mk-surface); text-decoration: none; }
.mk-btn-outline-dark { border: 1.5px solid rgba(4, 25, 31, .4); color: var(--mk-on-accent); }
.mk-btn-outline-dark:hover { border-color: var(--mk-on-accent); text-decoration: none; }

/* Smaller button variants used inside sections */
.mk-btn-sm { height: 54px; padding: 0 32px; margin-top: 34px; }
.mk-btn-xs { height: 50px; padding: 0 28px; margin-top: 34px; font-size: 12px; }
.mk-btn-dash {
    display: flex;
    align-items: center;
    height: 42px;
    padding: 0 22px;
    background: var(--accent);
    color: var(--mk-on-accent);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.mk-btn-dash:hover { background: var(--mk-text); text-decoration: none; }

/* Ticker — one continuous CSS marquee, no script.
   The track holds the run TWICE and travels exactly -50%, so the second copy
   lands where the first began and the loop is seamless. Each category's chip
   scrolls inline ahead of its own items rather than sitting pinned outside. */
.mk-ticker {
    position: relative;
    background: var(--accent);
    color: var(--mk-on-accent);
    overflow: hidden;
    border-top: 1px solid rgba(4, 25, 31, .2);
    border-bottom: 1px solid rgba(4, 25, 31, .2);
}
.mk-ticker-track { display: flex; width: max-content; animation: mk-ticker 46s linear infinite; }
.mk-ticker-run { display: flex; align-items: center; padding: 14px 0; white-space: nowrap; }
@keyframes mk-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .mk-ticker-track { animation: none; }
}
.mk-ticker-chip {
    display: inline-flex;
    align-items: center;
    margin: 0 22px 0 8px;
    padding: 6px 13px;
    background: var(--mk-surface);
    color: var(--accent);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.mk-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    margin-right: 24px;
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
}
.mk-ticker-item::after { content: "\25C6"; opacity: .45; font-size: 11px; }

/* How it works — three columns split by hairlines */
.mk-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 44px;
    border-top: 1px solid var(--mk-line-mid);
}
.mk-how-step { padding: 34px; border-right: 1px solid var(--mk-line-mid); }
.mk-how-step:first-child { padding-left: 0; }
.mk-how-step:last-child { padding-right: 0; border-right: 0; }
.mk-how-num {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 76px;
    line-height: .85;
    letter-spacing: -.05em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(234, 109, 17, .85);
}
/* Where the stroke is unsupported the glyph would vanish, so fall back to solid. */
@supports not (-webkit-text-stroke: 2px red) {
    .mk-how-num { color: var(--accent); }
}
.mk-how-num-solid { color: var(--accent); -webkit-text-stroke: 0; }
.mk-how-t {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: var(--mk-text);
    margin-top: 22px;
}
.mk-how-d { font-size: 15.5px; line-height: 1.6; color: var(--mk-body); margin-top: 12px; }

/* Sections */
.mk-section { max-width: var(--mk-max); margin: 0 auto; padding: 104px 32px; }
.mk-section-tint { background: var(--mk-band); border-top: 1px solid var(--mk-line); border-bottom: 1px solid var(--mk-line); }
.mk-section-inner { max-width: var(--mk-max); margin: 0 auto; padding: 100px 32px; }
.mk-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.mk-split-l { display: grid; grid-template-columns: .85fr 1fr; gap: 72px; align-items: center; }
.mk-split-r { display: grid; grid-template-columns: 1fr .85fr; gap: 72px; align-items: center; }

/* Stat tiles — clipped corners, no radius */
.mk-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mk-tile {
    padding: 28px;
    border: 1px solid var(--mk-line);
    background: rgba(255, 255, 255, .035);
    border-radius: 0;
    clip-path: polygon(var(--mk-cut-lg) 0, 100% 0, 100% calc(100% - var(--mk-cut-lg)), calc(100% - var(--mk-cut-lg)) 100%, 0 100%, 0 var(--mk-cut-lg));
}
.mk-tile-navy { background: var(--mk-surface); border-color: transparent; }
.mk-tile-accent { background: var(--accent); border-color: transparent; }
.mk-tile-n {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -.03em;
    text-transform: uppercase;
    color: var(--mk-text);
}
.mk-tile-n-accent { color: var(--accent); }
.mk-tile-accent .mk-tile-n { color: var(--mk-on-accent); }
.mk-tile-d { font-size: 14px; line-height: 1.5; margin-top: 12px; color: var(--mk-muted); }
.mk-tile-accent .mk-tile-d { color: rgba(4, 25, 31, .75); }

/* D.A.W.G. band — four ruled columns, three letters outlined and the A solid */
.mk-dawg-band { position: relative; background: var(--mk-base); border-top: 1px solid rgba(255, 255, 255, .07); overflow: hidden; }
.mk-dawg-glow { position: absolute; inset: 0; background: radial-gradient(60% 120% at 50% 0%, rgba(234, 109, 17, .14), rgba(4, 25, 31, 0) 70%); }
.mk-dawg-inner { position: relative; max-width: var(--mk-max); margin: 0 auto; padding: 88px 32px 92px; }
.mk-dawg-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid var(--mk-line-strong);
    border-bottom: 1px solid var(--mk-line-strong);
}
.mk-dawg-cell { padding: 40px 24px 36px; border-right: 1px solid var(--mk-line-strong); }
.mk-dawg-cell:first-child { padding-left: 0; }
.mk-dawg-cell:last-child { padding-right: 0; border-right: 0; }
.mk-dawg-letter {
    font-family: 'Archivo Black', 'Archivo', sans-serif;
    font-weight: 400;
    font-size: clamp(72px, 9vw, 132px);
    line-height: .8;
    letter-spacing: -.06em;
    color: transparent;
    -webkit-text-stroke: 2px rgba(237, 243, 244, .5);
}
@supports not (-webkit-text-stroke: 2px red) {
    .mk-dawg-letter { color: var(--mk-text); }
}
.mk-dawg-letter-solid { color: var(--accent); -webkit-text-stroke: 0; }
.mk-dawg-word {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(237, 243, 244, .72);
    margin-top: 26px;
}
.mk-dawg-word-accent { color: var(--accent); }
.mk-dawg-note { font-size: 16px; line-height: 1.5; color: var(--mk-body); margin-top: 30px; max-width: 560px; }

/* Feature figures — corner brackets */
.mk-figure { position: relative; }
.mk-figure-br { position: absolute; width: 70px; height: 70px; }
.mk-figure-br-tr { inset: -1px -1px auto auto; border-top: 3px solid var(--accent); border-right: 3px solid var(--accent); }
.mk-figure-br-bl { inset: auto auto -1px -1px; border-bottom: 3px solid var(--accent); border-left: 3px solid var(--accent); }

/* Every marketing photograph carries this: desaturated and a touch harder, so a
   mixed set of trainer photos reads as one system rather than eight sources.
   Applies to the real <img> the moment it replaces a placeholder. */
.mk-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35) contrast(1.12); }

/* Spotlight */
.mk-dark { background: var(--mk-band); border-top: 1px solid var(--mk-line); }
.mk-spot-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mk-spot-head p { font-size: 16px; line-height: 1.6; color: var(--mk-muted); margin: 18px 0 0; max-width: 620px; text-wrap: pretty; }
.mk-spot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 52px; }
.mk-spot-card {
    display: block;
    background: rgba(4, 25, 31, .62);
    border: 1px solid rgba(255, 255, 255, .1);
    overflow: hidden;
    color: var(--mk-text);
    transition: transform .18s ease, border-color .18s ease;
}
.mk-spot-card:hover { border-color: var(--accent); transform: translateY(-4px); text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
    .mk-spot-card { transition: none; }
    .mk-spot-card:hover { transform: none; }
}
.mk-spot-body { padding: 18px; }
.mk-spot-name { font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; font-size: 15px; line-height: 1.15; letter-spacing: -.02em; text-transform: uppercase; }
.mk-spot-sport { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(237, 243, 244, .5); margin-top: 9px; }
.mk-spot-book { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-top: 16px; }
.mk-seeall { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); padding-bottom: 6px; }

/* Quote */
.mk-quote { max-width: 900px; margin: 0 auto; text-align: center; }
.mk-quote-rule { width: 44px; height: 3px; background: var(--accent); margin: 0 auto 34px; }
.mk-quote blockquote {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.42;
    letter-spacing: -.015em;
    color: var(--mk-text);
    margin: 0;
    text-wrap: pretty;
}
.mk-quote-by { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(237, 243, 244, .5); margin-top: 30px; }

/* Feature cards */
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 38px; }
.mk-card {
    background: rgba(4, 25, 31, .62);
    border: 1px solid rgba(255, 255, 255, .1);
    padding: 30px;
    border-radius: 0;
    clip-path: polygon(var(--mk-cut-lg) 0, 100% 0, 100% calc(100% - var(--mk-cut-lg)), calc(100% - var(--mk-cut-lg)) 100%, 0 100%, 0 var(--mk-cut-lg));
}
.mk-card-t { font-family: 'Archivo Black', 'Archivo', sans-serif; font-weight: 400; font-size: 17px; line-height: 1.2; letter-spacing: -.02em; text-transform: uppercase; color: var(--mk-text); }
.mk-card-d { font-size: 14.5px; line-height: 1.55; color: var(--mk-muted); margin-top: 12px; }
.mk-badge-live {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 10px;
    background: rgba(21, 128, 61, .18);
    color: #6EE7A0;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* Final CTA — the one full-orange field on the page */
.mk-cta { background: var(--accent); color: var(--mk-on-accent); }
.mk-cta-inner { max-width: var(--mk-max); margin: 0 auto; padding: 84px 32px; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mk-cta h2 { color: var(--mk-on-accent); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.02; margin: 0; }
.mk-cta p { font-size: 17px; line-height: 1.5; color: rgba(4, 25, 31, .74); margin: 14px 0 0; }
.mk-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Footer */
.mk-footer { background: var(--mk-footer); color: rgba(237, 243, 244, .58); }
.mk-footer-inner { max-width: var(--mk-max); margin: 0 auto; padding: 60px 32px 44px; }
.mk-footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.mk-footer-social { display: flex; gap: 18px; }
.mk-footer-social a { color: rgba(237, 243, 244, .58); font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.mk-footer-social a:hover, .mk-footer-links a:hover { color: var(--accent); text-decoration: none; }
.mk-footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 38px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.4; }
.mk-footer-links a { color: rgba(237, 243, 244, .58); }
.mk-footer-copy { font-size: 13px; color: rgba(237, 243, 244, .38); margin-top: 26px; }

/* ---------------------------------------------------------------------------
   Image placeholders. Every one names the asset it needs and its shape, so the
   real file can be dropped in without guesswork. Nothing references
   static.wixstatic.com — those URLs die when Wix is cancelled.

   Restyled for the dark ground. When a real photo lands, replace the <span> with
   an <img class="mk-img"> and it inherits the grade automatically.
   --------------------------------------------------------------------------- */
.mk-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, .02) 12px, rgba(255, 255, 255, .05) 12px, rgba(255, 255, 255, .05) 24px);
    border: 2px dashed rgba(237, 243, 244, .28);
    border-radius: 0;
    color: rgba(237, 243, 244, .55);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.5;
}
.mk-ph-logo { height: 40px; width: 140px; font-size: 9px; padding: 4px; }
.mk-ph-logo-footer { height: 50px; width: 160px; font-size: 9px; padding: 4px; }
/* The hero label sits in the bottom-right corner, not centred: centred it ran
   straight through the headline and read as a rendering fault rather than a
   placeholder. Dimmed for the same reason — it must not compete with the type. */
.mk-ph-hero {
    position: absolute;
    inset: 0;
    border: 0;
    opacity: .18;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 28px 32px;
    text-align: right;
}
.mk-ph-45 { aspect-ratio: 4/5; }
.mk-ph-34 { aspect-ratio: 3/4; }
.mk-ph-sq { aspect-ratio: 1/1; border-width: 1px; }

@media (max-width: 1024px) {
    .mk-split, .mk-split-l, .mk-split-r { grid-template-columns: 1fr; gap: 40px; }
    .mk-spot-grid { grid-template-columns: repeat(2, 1fr); }
    .mk-cards { grid-template-columns: 1fr; }
    .mk-how-grid { grid-template-columns: 1fr; border-top: 0; }
    .mk-how-step { border-right: 0; border-top: 1px solid var(--mk-line-mid); padding: 30px 0; }
    .mk-dawg-grid { grid-template-columns: repeat(2, 1fr); }
    .mk-dawg-cell { padding: 30px 20px; }
    .mk-dawg-cell:nth-child(2) { border-right: 0; }
    .mk-dawg-cell:nth-child(3) { padding-left: 0; }
    .mk-hero-inner { padding: 90px 32px 80px; }
    .mk-section, .mk-section-inner, .mk-dawg-inner { padding: 64px 24px; }
}
@media (max-width: 720px) {
    .mk-nav { display: none; }
    .mk-spot-grid { grid-template-columns: 1fr; }
    .mk-tiles { grid-template-columns: 1fr; }
    .mk-cta-inner { padding: 60px 24px; }
}

/* ---------------------------------------------------------------------------
   Legal pages. NOT part of the dark treatment — these stay on the light §1
   palette and keep --body-copy. Same reading measure and hierarchy as before.
   Content is generated from docs/legal/*.md — see Components/Pages/Legal.
   --------------------------------------------------------------------------- */
.legal {
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 32px 96px;
    color: var(--body-copy);
    font-size: 16px;
    line-height: 1.7;
}
.legal h1 {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--navy);
    margin: 0 0 28px;
    text-wrap: balance;
}
.legal h2 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--navy);
    margin: 44px 0 14px;
}
.legal h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--navy);
    margin: 28px 0 10px;
}
.legal p { margin: 0 0 16px; }
.legal ul, .legal ol { margin: 0 0 18px; padding-left: 24px; }
.legal li { margin-bottom: 8px; }
.legal code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--page);
    border: 1px solid var(--hairline);
    border-radius: 5px;
    padding: 1px 5px;
    color: var(--navy);
    white-space: nowrap;
}
@media (max-width: 720px) {
    .legal { padding: 48px 20px 64px; }
    .legal h1 { font-size: 32px; }
}