/*
 * The marketing pages: the homepage and the feature pages. Loaded through
 * head_extra after app.css, so everything here can lean on the shared tokens
 * and override the shared components under the .mk scope without touching the
 * app. Versioned by its own mtime, not ASSET_VER: iterating on these pages
 * must not make every logged-in user re-download the app's stylesheet.
 *
 * The look is getopen.so translated into SellSEO's greens: white ground, off
 * white cards with no border, hairlines, pills, one accent, no gradients and
 * almost no shadow. Depth comes from three flat tones, not from elevation.
 */

body.mk-page { background: var(--ground); }
.mk a { color: var(--brand-deep); }
.mk a:hover { color: var(--deep); }

/* Type. Headings are weight 500 in deep green, not bold black: the reference
   sets its display at 500 and never goes heavier, and it reads calmer. */
.mk h1, .mk h2, .mk h3 { color: var(--deep); letter-spacing: -.025em; line-height: 1.05; margin: 0; }
.mk h1 { font-size: clamp(38px, 5.6vw, 68px); font-weight: 700; line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.mk h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 600; text-wrap: balance; }
.mk h3 { font-size: 20px; font-weight: 600; letter-spacing: -.015em; }
/* The second beat of a two beat heading. Same size, muted, so the sentence
   reads as one thought with a quieter ending. */
.mk-beat { color: var(--ink-2); font-weight: inherit; }
/* Each beat on its own line. Left to text-wrap: balance the break landed
   wherever the lengths evened out, so "Three steps from a cold / city, to a
   booked meeting." read as a typo. Now every heading breaks at its comma. */
.mk h1 .mk-beat, .mk h2 .mk-beat { display: block; }
/* Zero specificity on purpose: as ".mk p" this outranked .mk-sub and .mk-fine
   and threw away their "margin: auto", which is why the hero paragraph and
   the pricing notes sat left of centre under centred headings. */
:where(.mk) p { margin: 0; }

.mk-kicker { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.mk-kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); display: inline-block; }
.mk-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font: 500 11.5px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.mk-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--neon); }
.mk-badge:hover { color: var(--deep); border-color: rgba(14,31,23,.22); }

/* Sections. The shared .section keeps its width for the other pages; here it
   gets the reference's rhythm. */
.mk .section { max-width: 1216px; padding: clamp(48px, 6vw, 88px) clamp(20px, 4vw, 48px); }
.mk-head { max-width: 680px; margin: 0 0 clamp(28px, 4vw, 44px); }
.mk-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.mk-head h2 { margin: 12px 0 10px; }
.mk-head p { font-size: 16.5px; line-height: 1.55; color: var(--ink-2); text-wrap: balance; }

/* Hero: the founder card. Left aligned copy over a photo, brand green
   sweeping in from the left so the words sit on colour and the face stays
   clear. The card is the only picture above the fold; the film comes next. */
/* The hero runs wider than the reading sections: the card should fill most
   of the window, the way the reference does, with the header on the same
   edges. */
.mk .section.mk-hero { max-width: 1520px; text-align: left; padding-top: clamp(8px, 1.5vw, 16px); }
.mk-hero-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: clamp(520px, 66vh, 680px); padding: clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--deep); color: #fff; }
.mk-hero-pic { position: absolute; inset: 0; display: block; }
.mk-hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 74% 28%; display: block; }
/* Two gradients: brand green from the left, deep green from the floor. The
   right 30% is untouched, which is where the face is. */
.mk-hero-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(70% 90% at 8% 0%, rgba(53,226,122,.38), rgba(53,226,122,0) 62%),
  linear-gradient(90deg, rgba(31,168,92,.97) 0%, rgba(31,168,92,.9) 26%, rgba(31,168,92,.5) 50%, rgba(31,168,92,0) 70%),
  linear-gradient(0deg, rgba(7,35,26,.72) 0%, rgba(7,35,26,.3) 34%, rgba(7,35,26,0) 58%); }
.mk-hero-copy { position: relative; z-index: 2; max-width: 700px; }
.mk-hero .mk-badge-glass { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.36); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mk-hero .mk-badge-glass:hover { color: #fff; border-color: rgba(255,255,255,.7); }
.mk-hero .mk-badge-glass i { background: var(--neon); }
.mk-hero h1 { color: #fff; font-size: clamp(36px, 4.3vw, 56px); max-width: none; margin: 0; text-shadow: 0 2px 24px rgba(7,35,26,.18); }
.mk-hero h1 .mk-beat { color: rgba(255,255,255,.86); }
.mk-sub { font-size: clamp(16px, 1.25vw, 18px); line-height: 1.55; color: rgba(255,255,255,.86); max-width: 50ch; margin: 16px 0 0; text-wrap: pretty; }
.mk-sub b { color: #fff; font-weight: 600; }
.mk-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.mk .btn-white { background: #fff; color: var(--deep); border-radius: 999px; padding: 15px 24px; font-size: 16px; box-shadow: 0 8px 24px rgba(7,35,26,.18); }
.mk .btn-white:hover { background: #EEF5F1; color: var(--deep); }
.mk .btn-glass { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.36); border-radius: 999px; padding: 15px 22px; font-size: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mk .btn-glass:hover { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.6); }
.mk-hero .mk-proof { justify-content: flex-start; margin-top: 16px; color: rgba(255,255,255,.62); }
.mk-hero .mk-proof b { color: rgba(255,255,255,.94); }
/* The glass card in the corner: the three steps as a stack of chips and one
   honest, growing number. */
.mk-hero-stat { position: absolute; z-index: 2; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); width: 252px; padding: 20px 20px 22px; border-radius: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); color: #fff; box-shadow: 0 16px 40px rgba(7,35,26,.18); }
.mk-hero-icons { display: flex; margin-bottom: 16px; }
.mk-hero-icons span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--deep); border: 2px solid rgba(31,168,92,.85); margin-left: -9px; }
.mk-hero-icons span:first-child { margin-left: 0; }
.mk-hero-icons span:last-child { background: var(--neon); color: var(--dark); }
.mk-hero-icons span img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; display: block; }
.mk-hero-icons span:has(img) { background: #fff; padding: 4px; }
.mk-hero-stat b { display: block; font: 700 32px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-hero-stat-l { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.82); }
/* The film, in a popup: black frame, dimmed page, one close button. */
.mk-video { width: min(1040px, 94vw); max-width: none; padding: 0; border: 0; border-radius: 16px; background: #000; overflow: hidden; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.mk-video::backdrop { background: rgba(7,35,26,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mk-video video { display: block; width: 100%; height: auto; }
.mk-video-x { position: absolute; top: 10px; right: 10px; z-index: 1; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; display: grid; place-items: center; transition: background .15s ease; }
.mk-video-x:hover { background: rgba(255,255,255,.3); }

/* The email bar runs the full container width. A 620px pill in the middle of
   the page read as decoration; this reads as the one thing to do. */
.mk-cta { display: flex; gap: 6px; width: 100%; margin: 30px 0 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: 0 1px 2px rgba(14,31,23,.04), 0 12px 32px rgba(14,31,23,.06); text-align: left; }
.mk-cta:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(31,168,92,.14); }
.mk-cta input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: 500 17px/1 var(--font-body); padding: 16px 22px; color: var(--ink); outline: none; }
.mk-cta input::placeholder { color: var(--ink-3); }
.mk-cta .btn { border-radius: 999px; padding: 16px 28px; font-size: 16px; }
.mk-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 14px 0 0; font: 400 12.5px/1.5 var(--font-mono); color: var(--ink-3); }
.mk-proof b { color: var(--ink-2); font-weight: 500; }

/* The one picture: the film itself, in a thin white frame. */
.mk-shot { max-width: 1040px; margin: clamp(36px, 4.5vw, 60px) auto 0; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(14,31,23,.04), 0 24px 60px rgba(14,31,23,.08); }
.mk-shot video { display: block; width: 100%; height: auto; border-radius: 9px; background: var(--dark); }
.mk-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); }
.mk-caption b { color: var(--ink-2); font-weight: 600; }

/* Trust strip: what the engine reads, no logos, no vendor names. */
.mk-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin: clamp(28px, 4vw, 44px) 0 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-3); }
.mk-trust span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.mk-trust svg { opacity: .7; }

/* Steps */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.mk-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px 24px 28px; }
.mk-step .mk-kicker { color: var(--deep); background: var(--surface-2); padding: 7px 9px; border-radius: 7px; }
.mk-step h3 { margin: 16px 0 8px; }
.mk-step p { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* Feature cards: the hero's language, one per feature. A full-width photo
   card, brand green sweeping over the photo from the copy side, the copy in
   white on the sweep, the glass stat chip on the photo side. Odd cards carry
   the copy on the right (.is-right), even ones on the left, so the page
   zigzags down. --pos is the photo's object-position, set per card in
   home.php so the subject stays clear of the text. */
.mk-feat-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(440px, 52vh, 560px); padding: clamp(24px, 4vw, 56px); border-radius: 28px; background: var(--deep); color: #fff; margin-top: 28px; }
.mk-feat-card:first-of-type { margin-top: 0; }
.mk-feat-card.is-right { justify-content: flex-end; }
.mk-feat-pic { position: absolute; inset: 0; margin: 0; display: block; }
.mk-feat-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 70% 40%); display: block; }
.mk-feat-pic.is-empty { background: var(--surface-2); }
.mk-feat-card::before { content: ""; position: absolute; inset: 0; z-index: 1; background:
  radial-gradient(70% 90% at 8% 0%, rgba(53,226,122,.38), rgba(53,226,122,0) 62%),
  linear-gradient(90deg, rgba(31,168,92,.97) 0%, rgba(31,168,92,.9) 26%, rgba(31,168,92,.5) 50%, rgba(31,168,92,0) 70%),
  linear-gradient(0deg, rgba(7,35,26,.6) 0%, rgba(7,35,26,.22) 34%, rgba(7,35,26,0) 58%); }
.mk-feat-card.is-right::before { background:
  radial-gradient(70% 90% at 92% 0%, rgba(53,226,122,.38), rgba(53,226,122,0) 62%),
  linear-gradient(270deg, rgba(31,168,92,.97) 0%, rgba(31,168,92,.9) 26%, rgba(31,168,92,.5) 50%, rgba(31,168,92,0) 70%),
  linear-gradient(0deg, rgba(7,35,26,.6) 0%, rgba(7,35,26,.22) 34%, rgba(7,35,26,0) 58%); }
.mk-feat-copy { position: relative; z-index: 2; max-width: 560px; }
.mk-feat-copy .mk-kicker { color: rgba(255,255,255,.88); }
.mk-feat-copy .mk-kicker i { background: var(--neon); }
.mk-feat-copy h2 { margin: 12px 0; font-size: clamp(26px, 2.9vw, 38px); color: #fff; text-shadow: 0 1px 2px rgba(7,35,26,.18); }
.mk-feat-copy h2 .mk-beat { color: rgba(255,255,255,.86); }
.mk-feat-copy > p { font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 52ch; text-wrap: pretty; }
.mk-feat-subs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.28); }
.mk-feat-subs h3 { font-size: 16.5px; font-weight: 600; margin: 0 0 6px; color: #fff; }
.mk-feat-subs p { font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.82); }
.mk-feat-copy .mk-more { color: #fff; }
.mk-feat-copy .mk-more:hover { color: var(--neon); }
.mk-feat-stat { position: absolute; z-index: 2; right: clamp(20px, 3vw, 40px); bottom: clamp(20px, 3vw, 40px); min-width: 150px; max-width: 240px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); color: #fff; }
.mk-feat-card.is-right .mk-feat-stat { right: auto; left: clamp(20px, 3vw, 40px); }
.mk-feat-stat b { display: block; font: 700 28px/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mk-feat-stat span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85); }
.mk-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; font-weight: 600; font-size: 15px; color: var(--deep); }
.mk-more:hover { color: var(--brand-deep); }

/* Pricing: one green. The popular card is outlined in brand green and its
   button filled in it; every tick is a green disc; nothing on the cards is
   deep green or grey-on-grey, so the eye reads price, three numbers, button. */
.mk-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
.mk-plan { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px 24px; }
.mk-plan.is-popular { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), 0 18px 44px rgba(31,168,92,.14); }
.mk-plan-flag { position: absolute; top: -12px; left: 22px; padding: 7px 11px; border-radius: 999px; background: var(--brand); color: #fff; font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.mk-plan-name { font: 500 11.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.mk-plan.is-popular .mk-plan-name { color: var(--brand-deep); }
.mk-price { font: 700 42px/1 var(--font-display); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.mk-price span { font: 400 13px/1 var(--font-mono); color: var(--ink-3); margin-left: 4px; }
.mk-credits { display: inline-flex; align-items: center; gap: 6px; width: max-content; max-width: 100%; align-self: flex-start; margin-top: 12px; padding: 7px 11px; border-radius: 999px; background: var(--mint); color: var(--mint-ink); font: 500 11.5px/1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; }
.mk-credits::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.mk-for { font-size: 13.5px; color: var(--ink-2); margin: 12px 0 0; min-height: 40px; line-height: 1.45; }
.mk-plan-list { list-style: none; margin: 16px 0 22px; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; flex: 1; }
.mk-plan-list li { position: relative; padding: 9px 0 9px 28px; font-size: 14px; line-height: 1.4; color: var(--ink-2); min-height: 56px; }
.mk-plan-list li.mk-plus { min-height: 0; padding: 0 0 8px; }
.mk-plan-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); }
.mk-plan-list li::after { content: ""; position: absolute; left: 6px; top: 15px; width: 6px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.mk-plan-list b { color: var(--ink); font-weight: 700; font-size: 15px; }
.mk-plan-list li.mk-plus { padding-left: 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: -2px; }
.mk-plan-list li.mk-plus::before, .mk-plan-list li.mk-plus::after { display: none; }
.mk-plan-list i { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.mk-plan .btn { margin-top: auto; border-radius: 999px; padding: 14px 20px; font-size: 15px; }
.mk-plan .btn-ghost { border-color: var(--brand); color: var(--brand-deep); }
.mk-plan .btn-ghost:hover { background: var(--mint); color: var(--brand-deep); border-color: var(--brand); }
/* .mk a would paint this text brand green on brand green; say white here. */
.mk-plan.is-popular .btn-deep { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(31,168,92,.28); }
.mk-plan.is-popular .btn-deep:hover { background: var(--brand-deep); color: #fff; }
.mk-fine { text-align: center; font-size: 13px; color: var(--ink-3); max-width: 640px; margin: 18px auto 0; line-height: 1.55; text-wrap: balance; }

/* FAQ, on the shared .faq-item markup other pages use, restyled here only. */
.mk .faq { max-width: 760px; margin: 0 auto; }
.mk .faq-item { border-top: 1px solid var(--line); background: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0; }
.mk .faq-item:last-child { border-bottom: 1px solid var(--line); }
.mk .faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font-weight: 600; font-size: 16.5px; letter-spacing: -.01em; color: var(--deep); }
.mk .faq-item summary::-webkit-details-marker { display: none; }
.mk .faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-weight: 400; font-size: 18px; color: var(--ink-3); transition: transform .2s ease, color .2s ease; }
.mk .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--deep); }
.mk .faq-item p { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; line-height: 1.7; max-width: 66ch; }

/* Reveal on scroll. Only once JS has confirmed it is running, so nothing is
   hidden for a reader without it, and never for someone who asked for less
   motion. */
.mk.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .55s ease-out, transform .6s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--reveal-delay, 0s); }
.mk.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .mk.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 980px) {
  .mk-plans { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mk-steps { grid-template-columns: 1fr; }
  .mk-feat-card { min-height: clamp(400px, 48vh, 500px); }
  .mk-feat-copy { max-width: 480px; }
}
@media (max-width: 760px) {
  .mk-hero-card { display: block; padding: 0; min-height: 0; border-radius: 22px; background: var(--brand); }
  .mk-hero-card::before { display: none; }
  .mk-hero-pic { position: relative; height: 330px; }
  .mk-hero-pic img { object-position: 62% 18%; }
  .mk-hero-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,168,92,0) 52%, rgba(31,168,92,1) 100%); }
  .mk-hero-copy { max-width: none; padding: 0 20px; margin-top: -8px; }
  /* Sized so each beat holds one line on a phone: 7.2vw is 28px at 390. */
  .mk-hero h1 { max-width: none; font-size: clamp(25px, 7.2vw, 32px); text-shadow: none; }
  .mk-hero-feature h1 { font-size: clamp(23px, 6.4vw, 30px); }
  .mk-hero .mk-badge-glass { font-size: 10.5px; letter-spacing: .05em; }
  .mk-hero-actions .btn { width: 100%; }
  .mk-hero-stat { position: static; width: auto; margin: 18px 20px 20px; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
  .mk-hero-icons { grid-row: 1 / 3; }
  .mk-hero-icons { margin: 0; flex: none; }
  .mk-hero-stat b { font-size: 24px; }
  .mk-hero-stat-l { margin-top: 4px; }
  /* Feature cards stack the same way as the hero: photo band, then a solid
     green block with the copy, no gradient seam between the two. */
  .mk-feat-card, .mk-feat-card.is-right { display: block; padding: 0 0 20px; min-height: 0; border-radius: 22px; background: var(--brand); margin-top: 18px; }
  .mk-feat-card::before, .mk-feat-card.is-right::before { display: none; }
  .mk-feat-pic { position: relative; height: 250px; }
  .mk-feat-pic img { object-position: var(--pos-m, 50% 40%); }
  .mk-feat-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,168,92,0) 55%, rgba(31,168,92,1) 100%); }
  .mk-feat-copy { max-width: none; padding: 0 20px; margin-top: -6px; }
  .mk-feat-copy h2 { font-size: clamp(23px, 6.4vw, 30px); text-shadow: none; }
  .mk-feat-stat, .mk-feat-card.is-right .mk-feat-stat { position: static; margin: 18px 20px 0; max-width: none; display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; }
  .mk-feat-stat b { font-size: 22px; }
  .mk-feat-stat span { margin-top: 0; }
}
@media (max-width: 640px) {
  .mk-cta { flex-direction: column; border-radius: 18px; }
  .mk-cta input { text-align: center; padding: 16px; }
  .mk-cta .btn { width: 100%; justify-content: center; }
  /* 42 characters of tracked mono would wrap on a phone; a step smaller keeps the pill one line. */
  .mk-badge { font-size: 10.5px; letter-spacing: .05em; text-align: center; }
  .mk-shot { padding: 4px; border-radius: 10px; }
  .mk-trust { gap: 10px 18px; }
}
@media (max-width: 560px) {
  .mk-plans { grid-template-columns: 1fr; }
  .mk-feat-subs { grid-template-columns: 1fr; gap: 14px; }
}

/* Feature pages. The same hero card as the homepage with a longer heading, a
   row of three cards for what changes and three for how it works, the FAQ,
   and a strip of the other features as photo cards. */
.mk-hero-feature .mk-hero-copy { max-width: 740px; }
.mk-hero-feature h1 { font-size: clamp(31px, 3.5vw, 46px); }
.mk-hero-feature .mk-sub { max-width: 58ch; }
.mk-kicker-light { color: rgba(255,255,255,.78); }
.mk-kicker-light i { background: var(--neon); }
.mk-hero-feature .mk-hero-stat { width: 236px; }
.mk-hero-feature .mk-proof { text-transform: none; letter-spacing: 0; font: 400 13px/1.5 var(--font-body); color: rgba(255,255,255,.72); }
.mk-step-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--mint); color: var(--mint-ink); display: grid; place-items: center; }
.mk-step .mk-step-ic + h3 { margin-top: 16px; }
.mk-cross { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.mk-cross-card { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: var(--deep); color: #fff; text-decoration: none; isolation: isolate; }
.mk-cross-card picture, .mk-cross-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.mk-cross-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(7,35,26,0) 30%, rgba(7,35,26,.5) 62%, rgba(7,35,26,.94) 100%); }
.mk-cross-card:hover img { transform: scale(1.04); }
.mk-cross-card:hover { color: #fff; }
.mk-cross-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 20px; }
.mk-cross-text b { display: block; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -.01em; }
.mk-cross-text > span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.45; color: rgba(255,255,255,.78); }
.mk-cross-text .mk-more { color: var(--neon); margin-top: 12px; font-size: 13.5px; }
.mk-index { grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mk-index .mk-cross-text { padding: 24px; }
.mk-index .mk-cross-text b { font-size: 21px; }
.mk-index .mk-cross-text > span { font-size: 14.5px; }
.mk-h1-index { font-size: clamp(32px, 3.6vw, 48px); }
@media (max-width: 980px) { .mk-cross, .mk-index { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-cross, .mk-index { grid-template-columns: 1fr; } }

/* Pricing page: two side-by-side panels under the plans. */
.mk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mk-two .mk-step h3 { font-size: 22px; margin-top: 14px; }
.mk-two .mk-step .mk-list { margin-top: 14px; }
.mk-list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mk-list li { position: relative; padding-left: 26px; font-size: 15px; color: var(--ink-2); }
.mk-list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--mint); }
.mk-list li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 6px; height: 4px; border-left: 1.8px solid var(--mint-ink); border-bottom: 1.8px solid var(--mint-ink); transform: rotate(-45deg); }
.mk-credit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mk-credit-grid .mk-step { padding: 22px 22px 24px; }
.mk-credit-grid .mk-step b { display: block; font-size: 17px; font-weight: 600; color: var(--deep); margin: 14px 0 6px; }
.mk-credit-grid .mk-step p { font-size: 14px; }
@media (max-width: 900px) { .mk-two { grid-template-columns: 1fr; } .mk-credit-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mk-credit-grid { grid-template-columns: 1fr; } }