/* ============================================================================
   MEKOZZA · MOBILE HOME PAGE
   ----------------------------------------------------------------------------
   Styles home_mobile.php. Two jobs, both inside @media (max-width: 991px):

     1 · hide the previous mobile markup
     2 · lay out the new page

   At 992px and above this file contributes nothing, so the desktop page is
   untouched. Every selector is prefixed .mkm, which exists nowhere else.

   The palette is the brand's and the desktop's — bright and warm. What is
   deliberately NOT shared is the structure: the desktop is a document read
   top to bottom, this is an app. Full-bleed media, a story hero behind the
   floating header, a dock in the thumb's arc, a swipe deck, a bento of
   unequal tiles, and a stack of cards that pile up as you scroll.

   Type is fluid: every display size is a clamp() against the viewport, so a
   320px phone and a 430px phone each get type in proportion rather than one
   size chosen for a 390px screen and tolerated everywhere else.
   ========================================================================= */

/* Mobile-only. Hidden unconditionally first, so a wide viewport never renders
   it even for the instant before the media query is evaluated. */
.mkm { display: none; }


@media (max-width: 991px) {

  /* ==========================================================================
     0 · SWAP
     The old blocks are shared with the desktop layout and cannot be deleted,
     so they are hidden at this width and the new page takes their place.
     Scoped to body.mkd-on, which only index.php carries.
     ====================================================================== */
  body.mkd-on .banner-desktop,
  body.mkd-on .banner-mobile,
  body.mkd-on .petcare-section,
  body.mkd-on .animated-banner,
  body.mkd-on .top-category-section,
  body.mkd-on .pet-layout-container,
  body.mkd-on .pet-section-container,
  body.mkd-on main.category-showcase,
  body.mkd-on .bg-orbs,
  body.mkd-on .premium-badge,
  body.mkd-on .floating-heart {
    display: none !important;
  }

  /* A bare <br> sits between two of those blocks and would otherwise leave a
     20px gap where the old page used to be. */
  body.mkd-on > br { display: none; }

  body.mkd-on .mkm { display: block; }
  body.mkd-on { background: #fffdfb !important; }

  /* ---- making position:sticky possible at all --------------------------
     mobile.css sets `overflow-x: hidden` on body for every page, as a guard
     against anything widening the document. That also makes body a scroll
     container, and a scroll container that never scrolls silently disables
     position:sticky for everything inside it: the stack in section 7
     computed as `sticky` and behaved exactly like `static`, pinning for one
     frame at the threshold and then scrolling away.

     The guard is not dropped, it is moved up one level. The viewport clips
     sideways instead, body goes back to visible, and sticky works again —
     measured at 0px of horizontal scroll from 320px to 991px.

     Only index.php loads this stylesheet, so the html rule cannot reach any
     other page even though it is not scoped to a class. */
  html { overflow-x: clip; }
  body.mkd-on { overflow: visible !important; }


  /* ==========================================================================
     1 · TOKENS
     ====================================================================== */
  .mkm {
    --paper:  #fffdfb;   /* the page ground, warm rather than white */
    --paper-2:#fff4ea;
    --sand:   #ffe8d6;

    /* Deeper than the desktop's ink: the display sizes here are large enough
       that #2c1c13 reads washed out at weight 800. */
    --ink:    #1a1109;
    --ink-2:  #6b544a;
    --ink-3:  #9b847a;

    --brand:  #ff6b35;
    --brand-2:#ff9350;
    --brand-d:#e2542a;
    --brand-s:#fff0e8;
    --pink:   #ff4f8b;

    --line:   rgba(26, 17, 9, .09);
    --line-2: rgba(26, 17, 9, .15);

    --pad:  20px;                       /* side gutter */
    --beat: clamp(46px, 12vw, 70px);    /* space between sections */

    --r:    26px;
    --r-sm: 18px;

    --sh:    0 4px 18px rgba(26, 17, 9, .06);
    --sh-2:  0 12px 34px rgba(26, 17, 9, .12);
    --sh-3:  0 22px 50px rgba(26, 17, 9, .18);

    /* A spring, not a fade. Every press and slide in here uses it. */
    --ease:  cubic-bezier(.22, 1, .36, 1);

    /* The floating header pill's height, measured by home-mobile.js. The
       fallback is close enough that a script failure is not visible. */
    --hdr: 70px;

    position: relative;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* clip, not hidden: `hidden` would make this a scroll container, and a
       scroll container here would disable the sticky cards in section 7 the
       same way body's did. `clip` guards the width without that cost. */
    overflow-x: clip;
  }

  .mkm *,
  .mkm *::before,
  .mkm *::after { box-sizing: border-box; }

  .mkm-pad {
    padding-inline: var(--pad);
    max-width: 680px;     /* tablets get the same page, not a stretched one */
    margin-inline: auto;
  }

  .mkm-sec { padding-block: var(--beat); position: relative; }

  /* ---- aurora ------------------------------------------------------------
     Two soft blooms drifting behind the pale sections, so the background is
     lit rather than flat. Both are pre-blurred and only ever transformed, so
     the whole thing is one compositor animation — no repaint, no layout, and
     nothing for the main thread to do while you scroll.

     Behind the content (z-index: 0 on a positioned ancestor, content lifted
     to 1) and non-interactive, so it can never intercept a tap. */
  .mkm-sec--lit::before,
  .mkm-sec--lit::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    will-change: transform;
  }
  .mkm-sec--lit::before {
    width: 260px; height: 260px;
    top: 6%; left: -110px;
    background: rgba(255, 147, 80, .30);
    animation: mkmDriftA 26s ease-in-out infinite;
  }
  .mkm-sec--lit::after {
    width: 220px; height: 220px;
    bottom: 8%; right: -100px;
    background: rgba(255, 79, 139, .20);
    animation: mkmDriftB 32s ease-in-out infinite;
  }
  .mkm-sec--lit > * { position: relative; z-index: 1; }

  @keyframes mkmDriftA {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(48px, 34px, 0) scale(1.14); }
  }
  @keyframes mkmDriftB {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(-42px, -30px, 0) scale(1.1); }
  }

  /* Stated with their states so Bootstrap's a:hover at (0,1,1) cannot
     repaint them. */
  .mkm a,
  .mkm a:link,
  .mkm a:visited,
  .mkm a:hover,
  .mkm a:active { color: inherit; text-decoration: none; }

  .mkm button { font: inherit; -webkit-tap-highlight-color: transparent; }


  /* ---- the type scale --------------------------------------------------- */
  .mkm-display {
    margin: 10px 0 0;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(30px, 9.6vw, 46px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -.045em;
    color: var(--ink);
  }
  .mkm-display--sm { font-size: clamp(25px, 7.6vw, 36px); }
  .mkm-display--inv { color: #fff; }

  .mkm-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--brand-d);
  }
  .mkm-kicker::before {
    content: '';
    width: 18px; height: 2px;
    border-radius: 2px;
    background: var(--brand);
  }

  .mkm-intro { margin-bottom: 24px; }
  .mkm-intro p {
    margin: 12px 0 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink-2);
  }
  .mkm-intro--row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
  }

  .mkm-ghost {
    flex: 0 0 auto;
    padding: 11px 16px;
    border-radius: 999px;
    background: var(--white, #fff);
    border: 1px solid var(--line-2);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink) !important;
    box-shadow: var(--sh);
  }

  .mkm-price {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
  }

  .mkm-live {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #b8241b;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .mkm-live__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #e5342a;
    animation: mkmPulse 1.8s ease-in-out infinite;
  }
  @keyframes mkmPulse {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .35; transform: scale(.65); }
  }


  /* ==========================================================================
     2 · STORY HERO
     Runs full bleed and up behind the floating header. The header is
     position:sticky with a 10px margin and z-index 950, so pulling this up by
     its height puts the photograph under a frosted glass bar — the way a
     phone app looks — instead of below a white strip.
     ====================================================================== */
  .mkm-story {
    position: relative;
    z-index: 1;                    /* under the header's 950 */
    margin-top: calc(-1 * var(--hdr));
    height: 78svh;
    min-height: 500px;
    max-height: 700px;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
    overflow: hidden;
    background: var(--ink);
    /* The dock overlaps the bottom edge, so the last 46px are decorative. */
    isolation: isolate;
  }
  /* svh is not understood everywhere; a vh fallback comes first. */
  @supports not (height: 78svh) {
    .mkm-story { height: 78vh; }
  }

  .mkm-story__frames { position: absolute; inset: 0; }

  .mkm-story__frame {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .55s var(--ease), visibility .55s var(--ease);
  }
  .mkm-story__frame.is-on { opacity: 1; visibility: visible; }

  .mkm-story__frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  /* Per-frame crops. Centring every photograph puts the subject of two of
     them outside the frame. */
  .mkm-story__frame--1 img { object-position: center 30%; }
  .mkm-story__frame--2 img { object-position: 40% center; }
  .mkm-story__frame--3 img { object-position: center 35%; }
  .mkm-story__frame--4 img { object-position: center 45%; }

  /* A slow push on whichever frame is showing, so a still photograph is not
     sitting dead on the screen for five seconds. */
  .mkm-story__frame.is-on img { animation: mkmPush 6.4s linear both; }
  @keyframes mkmPush {
    from { transform: scale(1.12); }
    to   { transform: scale(1.01); }
  }

  .mkm-story__scrim {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to top, rgba(14, 8, 3, .92) 0%,
                              rgba(14, 8, 3, .55) 30%,
                              rgba(14, 8, 3, .12) 58%,
                              rgba(14, 8, 3, .38) 100%);
  }

  .mkm-story__copy {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    /* clear of the dock that overlaps the bottom edge */
    bottom: 76px;
    z-index: 2;
    /* home-mobile.js drives this as the hero scrolls away. It multiplies
       with the per-word and per-line animations on the children rather than
       fighting them, and defaults to 1 so the copy is fully visible with the
       script missing or under reduced motion. */
    opacity: var(--mkm-fade, 1);
  }

  .mkm-story__title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(34px, 11.2vw, 54px);
    line-height: .95;
    font-weight: 800;
    letter-spacing: -.05em;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
  }

  /* ---- the headline deals itself onto the screen -------------------------
     One word at a time, 55ms apart. The animation lives on .is-on, and a
     frame is only .is-on while it is showing — so switching frames takes the
     class off and puts it back, which is what restarts the animation. No
     reflow trick needed, unlike the timer bar, because the element genuinely
     leaves and re-enters the state. */
  .mkm-w {
    display: inline-block;
    /* The words start below their line and are clipped by it. */
    opacity: 0;
    transform: translate3d(0, .5em, 0);
  }
  .mkm-story__frame.is-on .mkm-w {
    animation: mkmWord .6s var(--ease) both;
    animation-delay: calc(var(--w, 0) * 55ms + 120ms);
  }
  @keyframes mkmWord {
    from { opacity: 0; transform: translate3d(0, .5em, 0); }
    to   { opacity: 1; transform: none; }
  }

  .mkm-story__sub,
  .mkm-story__cta {
    opacity: 0;
  }
  /* The supporting line and the button follow the last word in. */
  .mkm-story__frame.is-on .mkm-story__sub {
    animation: mkmRiseIn .6s var(--ease) .34s both;
  }
  @keyframes mkmRiseIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* Opacity only, deliberately: `both` fill would otherwise pin this
     button's transform at `none` once the animation finished, and the
     :active press below — which is the only feedback a tap gets on a
     touchscreen — would never show. */
  .mkm-story__frame.is-on .mkm-story__cta {
    animation: mkmFadeIn .55s var(--ease) .44s both;
  }
  @keyframes mkmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .mkm-story__sub {
    margin: 12px 0 0;
    max-width: 30ch;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, .88);
  }

  .mkm-story__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--ink) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .3);
    transition: transform .25s var(--ease);
  }
  .mkm-story__cta:active { transform: scale(.96); }
  .mkm-story__cta svg {
    width: 17px; height: 17px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ---- the segmented timer ---------------------------------------------- */
  .mkm-story__bars {
    position: absolute;
    left: var(--pad);
    right: var(--pad);
    /* below the floating header, which is 10px down plus its own height */
    top: calc(var(--hdr) + 8px);
    z-index: 4;
    display: flex;
    gap: 5px;
  }
  .mkm-story__bar {
    flex: 1;
    /* 3px of bar, 16px of touch target, centred on it */
    height: 22px;
    padding: 0;
    border: 0;
    background: none;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .mkm-story__bar::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .34);
  }
  .mkm-story__bar { position: relative; }
  .mkm-story__fill {
    position: absolute;
    left: 0;
    height: 3px;
    width: 0;
    border-radius: 3px;
    background: #fff;
  }
  /* The frame that has already been seen stays filled. */
  .mkm-story__bar.is-done .mkm-story__fill { width: 100%; }
  .mkm-story__bar.is-on .mkm-story__fill {
    animation: mkmBar var(--dwell, 5s) linear forwards;
  }
  @keyframes mkmBar { from { width: 0; } to { width: 100%; } }

  /* ---- the tap zones ----------------------------------------------------- */
  .mkm-story__tap {
    position: absolute;
    top: calc(var(--hdr) + 30px);
    bottom: 150px;                /* above the copy, so the CTA stays tappable */
    width: 32%;
    z-index: 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .mkm-story__tap--prev { left: 0; }
  .mkm-story__tap--next { right: 0; }


  /* ==========================================================================
     3 · DOCK
     Overlaps the hero's rounded corner. Five round targets, each 60px, which
     is the whole point of putting them here rather than in a menu.
     ====================================================================== */
  .mkm-dock {
    position: relative;
    z-index: 5;
    margin-top: -46px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    padding: 14px 10px 16px;
    margin-inline: var(--pad);
    border-radius: 24px;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: var(--sh-3);
  }
  /* A phone that cannot frost gets an opaque bar rather than a see-through
     one with unreadable labels over the photograph. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mkm-dock { background: #fff; }
  }

  .mkm-dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    transition: transform .25s var(--ease);
  }
  .mkm-dock__item:active { transform: scale(.92); }

  .mkm-dock__ring {
    width: 46px; height: 46px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--brand-s), #fff);
    border: 1px solid var(--line);
    box-shadow: 0 3px 10px rgba(26, 17, 9, .07);
  }
  .mkm-dock__ring svg {
    width: 21px; height: 21px;
    fill: none;
    stroke: var(--brand-d);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mkm-dock__label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--ink-2);
  }


  /* ==========================================================================
     4 · SERVICE DECK
     ====================================================================== */
  .mkm-deck__rail {
    display: flex;
    gap: 14px;
    padding-inline: var(--pad);
    padding-block: 4px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mkm-deck__rail::-webkit-scrollbar { display: none; }
  .mkm-deck__rail::after {
    content: '';
    flex: 0 0 calc(var(--pad) - 14px);
  }

  .mkm-deck__card {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Not the full width: the sliver of the next card is what says the row
       moves, on a surface with no hover and no scrollbar. */
    width: min(76vw, 320px);
    aspect-ratio: 3 / 4;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--sand);
    box-shadow: var(--sh-2);
    transition: transform .3s var(--ease);
  }
  .mkm-deck__card:active { transform: scale(.975); }

  /* ---- the card under the thumb comes forward ---------------------------
     A scroll-driven animation: the timeline is the rail's own inline scroll,
     so this runs on the compositor with no scroll handler and no jank. Where
     it is not supported the cards simply stay the same size, which is the
     layout that already tested well — nothing is lost.

     Inside this block the press feedback moves off transform, because an
     animation owns transform here and would beat a :active rule on it. */
  @supports (animation-timeline: view()) {
    .mkm-deck__card {
      animation: mkmDeckFocus linear both;
      animation-timeline: view(inline);
      animation-range: entry 0% exit 100%;
      transition: filter .2s var(--ease);
    }
    .mkm-deck__card:active { filter: brightness(.94); }

    @keyframes mkmDeckFocus {
      0%   { transform: scale(.88); opacity: .5; }
      50%  { transform: scale(1);   opacity: 1; }
      100% { transform: scale(.88); opacity: .5; }
    }
  }

  .mkm-deck__card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .mkm-deck__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(14, 8, 3, .9) 0%,
                rgba(14, 8, 3, .45) 38%,
                rgba(14, 8, 3, .05) 66%);
  }
  .mkm-deck__no {
    position: absolute;
    top: 12px; right: 16px;
    z-index: 3;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -.04em;
    color: rgba(255, 255, 255, .34);
  }
  .mkm-deck__body {
    position: absolute;
    left: 16px; right: 16px; bottom: 16px;
    z-index: 2;
    display: block;
  }
  .mkm-deck__body strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
  }
  .mkm-deck__body small {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .84);
  }
  .mkm-deck__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 14px;
  }
  .mkm-deck__go {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-2), var(--brand));
    box-shadow: 0 6px 16px rgba(255, 107, 53, .45);
  }
  .mkm-deck__go svg {
    width: 17px; height: 17px;
    fill: none; stroke: #fff;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ---- the counter ------------------------------------------------------- */
  .mkm-deck__meter {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
  }
  .mkm-deck__count {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }
  .mkm-deck__count b { color: var(--ink); }
  .mkm-deck__track {
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: var(--line);
    overflow: hidden;
  }
  .mkm-deck__bar {
    display: block;
    height: 100%;
    width: 10%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--brand), var(--pink));
    transition: width .3s var(--ease);
  }


  /* ==========================================================================
     5 · BENTO
     Six categories at four different weights. Equal squares would have been
     a grid to scan; unequal ones are a composition to look at, and the
     largest tile is the one people actually come for.
     ====================================================================== */
  .mkm-bento { background: var(--paper-2); }

  .mkm-bento__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 104px;
    gap: 12px;
  }
  .mkm-tile--1 { grid-row: span 2; }   /* Dogs, the tall one */
  .mkm-tile--6 { grid-column: span 2; } /* Mini Cows, the wide one */

  .mkm-tile {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    background: var(--sand);
    box-shadow: var(--sh);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .mkm-tile:active {
    transform: scale(.97);
    box-shadow: var(--sh-2);
  }
  .mkm-tile img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .mkm-tile__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
                rgba(14, 8, 3, .84) 0%,
                rgba(14, 8, 3, .3) 46%,
                rgba(14, 8, 3, 0) 70%);
  }
  .mkm-tile__body {
    position: absolute;
    left: 13px; right: 13px; bottom: 12px;
  }
  .mkm-tile__body strong {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
  }
  .mkm-tile__body small {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    color: rgba(255, 255, 255, .82);
  }
  .mkm-tile--1 .mkm-tile__body strong { font-size: 22px; }


  /* ==========================================================================
     6 · LISTINGS REEL
     ====================================================================== */
  .mkm-reel__rail {
    display: flex;
    gap: 12px;
    padding-inline: var(--pad);
    padding-block: 4px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mkm-reel__rail::-webkit-scrollbar { display: none; }
  .mkm-reel__rail::after {
    content: '';
    flex: 0 0 calc(var(--pad) - 12px);
  }

  /* 150px, not 172. At 172 with a square photo and a three-line body the card
     stood ~250px tall and two of them filled most of a 430px screen — the
     reel read as a wall rather than something to flick through. At 150 you
     see two and a half, which is what tells you it scrolls. */
  .mkm-pet {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 150px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh);
    transition: transform .25s var(--ease);
  }
  .mkm-pet:active { transform: scale(.975); }

  .mkm-pet__pic {
    position: relative;
    display: block;
    /* Slightly wider than tall: a pet photograph is usually a landscape crop
       and the square was adding height for no extra subject. */
    aspect-ratio: 5 / 4;
    background: var(--sand);
  }
  .mkm-pet__pic img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .mkm-pet__rate {
    position: absolute;
    top: 8px; right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    font-size: 11px;
    font-weight: 800;
    color: var(--ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
  }
  .mkm-pet__rate svg { width: 11px; height: 11px; fill: #ffb020; }

  .mkm-pet__body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 10px 11px;
  }
  .mkm-pet__body strong {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--ink);
    /* Breed names run from "Pug" to "Bernese Mountain Dog" and a rail cannot
       grow to fit the longest. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .mkm-pet__body small {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-3);
  }
  .mkm-pet__body b {
    margin-top: 3px;
    font-family: 'Poppins', sans-serif;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--brand-d);
  }


  /* ==========================================================================
     7 · THE STACK
     Each card sticks a few pixels lower than the one before it, so scrolling
     deals them into a pile instead of running them past. The parent must not
     be a scroll container or sticky does nothing inside it — which is why
     .mkm uses overflow-x: clip rather than hidden.
     ====================================================================== */
  .mkm-stack__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mkm-stack__card {
    position: sticky;
    /* clear the floating header, then step each card down by 12px */
    top: calc(var(--hdr) + 14px + (var(--n) * 12px));
    margin-bottom: 14px;
    padding: 22px 20px 24px;
    border-radius: var(--r);
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--sh-2);
  }
  /* The last card has nothing to be covered by, so it carries the weight. */
  .mkm-stack__card:last-child { margin-bottom: 0; }

  .mkm-stack__n {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--brand-s);
    color: var(--brand-d);
    font-family: 'Poppins', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .mkm-stack__card strong {
    display: block;
    margin-top: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--ink);
  }
  .mkm-stack__card p {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
  }


  /* ==========================================================================
     8 · CLOSER
     ====================================================================== */
  /* The closer kept the original rhythm while every section above it moved to
     the tighter one, so it sat in noticeably more space than its neighbours. */
  .mkm-close {
    padding-top: calc(var(--beat) * .62);
    padding-bottom: calc(var(--beat) * .62 + 8px);
  }

  .mkm-close__panel {
    position: relative;
    padding: 30px 22px 26px;
    border-radius: 30px;
    overflow: hidden;
    color: #fff;
    background:
      radial-gradient(100% 120% at 12% 0%, var(--brand-2) 0%, transparent 58%),
      linear-gradient(145deg, var(--brand) 0%, var(--brand-d) 55%, #c9401f 100%);
    box-shadow: 0 20px 44px rgba(226, 84, 42, .36);
  }
  .mkm-close__tag {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .mkm-close__panel > p {
    margin: 20px 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .9);
  }

  .mkm-close__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 22px 0 0;
    padding: 16px 6px;
    list-style: none;
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
  }
  .mkm-close__stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
  }
  .mkm-close__stats li + li { border-left: 1px solid rgba(255, 255, 255, .22); }
  .mkm-close__stats b {
    font-family: 'Poppins', sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.03em;
    /* The count-up must not make the row jump as digits change width. */
    font-variant-numeric: tabular-nums;
  }
  .mkm-close__stats span {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
  }

  .mkm-close__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-d) !important;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .2);
    transition: transform .25s var(--ease);
  }
  .mkm-close__cta:active { transform: scale(.97); }
  .mkm-close__cta svg {
    width: 18px; height: 18px;
    fill: none; stroke: currentColor;
    stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
  }
  .mkm-close__panel small {
    display: block;
    margin-top: 13px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .82);
  }


  /* ==========================================================================
     9 · SCROLL REVEALS
     Opt-in: the hiding rule needs .mkm-js, which home-mobile.js adds on the
     first line it runs. With the script missing or broken nothing is ever
     hidden, and the page reads exactly as it does with it.

     AOS is deliberately not used. index.php loads it, but home-desktop.js
     only calls AOS.init() at 992px and above — on a phone it is never
     initialised, so anything carrying data-aos would stay at opacity 0.
     ====================================================================== */
  .mkm-js [data-mkm-rise] {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: var(--mkm-d, 0ms);
  }
  .mkm-js [data-mkm-rise].is-in {
    opacity: 1;
    transform: none;
  }

  /* The dock lands one item at a time once the hero has settled. */
  .mkm-js .mkm-dock__item {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    animation: mkmDock .5s var(--ease) forwards;
    animation-delay: calc(360ms + var(--i) * 60ms);
  }
  @keyframes mkmDock {
    to { opacity: 1; transform: none; }
  }


  /* ==========================================================================
     10 · REDUCED MOTION
     Everything above still reads without movement; only the movement goes.
     ====================================================================== */
  @media (prefers-reduced-motion: reduce) {
    .mkm *,
    .mkm *::before,
    .mkm *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
    }
    .mkm-js [data-mkm-rise] { opacity: 1; transform: none; }
    .mkm-js .mkm-dock__item { opacity: 1; transform: none; }
    .mkm-story__frame.is-on img { animation: none; }

    /* The hero still advances under reduced motion, it just does not animate
       while it does. With no timer to draw, the bars become a plain "which
       one of four" indicator: the current frame filled, every other empty.
       Without resetting .is-done they would all end up filled and stop
       telling you anything. */
    .mkm-story__bar.is-done .mkm-story__fill { width: 0; }
    .mkm-story__bar.is-on .mkm-story__fill { width: 100%; }

    /* The word-by-word reveal starts its words invisible, so it needs an
       explicit resting state here rather than just a cancelled animation. */
    .mkm-w,
    .mkm-story__sub,
    .mkm-story__cta { opacity: 1; transform: none; animation: none !important; }
    .mkm-sec--lit::before,
    .mkm-sec--lit::after { animation: none; }
    .mkm-deck__card { animation: none; transform: none; opacity: 1; }
    .mkm-deck__rail,
    .mkm-reel__rail { scroll-behavior: auto; }
  }

  /* ========================================================================
     SEARCH

     Sits between the dock and the service deck: the first thing under the
     thumb after the hero. There was no search on this page and none in the
     phone header either, so 175 listings had no entrance except scrolling.

     The field is a real <input type="search"> inside a form-less box; results
     drop below it and the page does not move while they are open.
     ===================================================================== */
  .mkm-find {
    position: relative; z-index: 6; margin-top: 4px;
    /* The header is sticky at top:10px and 60px tall. Without this, focusing
       the field — or any scroll that brings it into view — parks it and the
       first result underneath the bar. */
    scroll-margin-top: 84px;
  }

  .mkm-find__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    height: 52px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: var(--m-sh-2, 0 6px 20px -10px rgba(16,24,40,.22));
    transition: border-color .16s ease, box-shadow .16s ease;
  }
  .mkm-find__box:focus-within {
    border-color: var(--brand, #ff6b35);
    box-shadow: 0 0 0 4px rgba(255,107,53,.13);
  }

  .mkm-find__ic {
    flex: 0 0 19px; width: 19px; height: 19px;
    fill: none; stroke: #98a2b3; stroke-width: 2.2; stroke-linecap: round;
  }

  /* mobile.css styles every input[type="search"] below 992px as a bordered
     46px field — background, border, radius and padding all !important. That
     is right for the booking forms it was written for and wrong here, where
     the field sits inside its own box: the result was a rounded box inside a
     rounded box. Overridden by specificity, and !important because the rule
     being overridden is itself !important. */
  .mkm-find .mkm-find__box input[type="search"] {
    flex: 1; min-width: 0;
    width: auto !important;
    min-height: 0 !important;
    height: 100%;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0;
    background: none !important;
    box-shadow: none !important;
    font: inherit; font-size: 15px !important; color: #101828 !important;
    /* 16px or more, or iOS zooms the whole page on focus. 15px is safe
       because the viewport tag disables that scaling; anything smaller is
       not, so this does not go below 15. */
  }
  .mkm-find .mkm-find__box input::placeholder { color: #98a2b3; }
  .mkm-find .mkm-find__box input::-webkit-search-cancel-button { display: none; }

  .mkm-find__x {
    flex: 0 0 26px; width: 26px; height: 26px; padding: 0;
    border: 0; border-radius: 50%; cursor: pointer;
    background: #eaecf0; display: grid; place-items: center;
  }
  .mkm-find__x svg {
    width: 13px; height: 13px;
    fill: none; stroke: #475467; stroke-width: 2.4; stroke-linecap: round;
  }

  /* ---- results ---- */
  .mkm-find__out {
    margin-top: 10px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 16px 40px -12px rgba(16,24,40,.22);
    overflow: hidden;
    max-height: 58vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mkm-find__out[hidden] { display: none; }

  .mkm-find__row {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 13px;
    text-decoration: none; color: #101828;
    border-bottom: 1px solid var(--line);
  }
  .mkm-find__row:last-child { border-bottom: 0; }
  .mkm-find__row:active { background: #fff2ec; }
  .mkm-find__row img,
  .mkm-find__ph {
    flex: 0 0 44px; width: 44px; height: 44px;
    border-radius: 11px; object-fit: cover; background: #f2f4f7;
  }
  .mkm-find__ph { display: grid; place-items: center; color: #98a2b3; font-size: 15px; }
  .mkm-find__row b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
  .mkm-find__row span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #067647; }
  .mkm-find__none { padding: 18px 14px; text-align: center; font-size: 13.5px; color: #667085; }

  /* ---- the shortcuts under it ---- */
  .mkm-find__chips {
    display: flex; gap: 8px; margin-top: 11px;
    overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .mkm-find__chips::-webkit-scrollbar { display: none; }
  .mkm-find__chip {
    flex: 0 0 auto;
    padding: 8px 14px; border-radius: 99px;
    background: #fff; border: 1px solid var(--line);
    font-size: 13px; font-weight: 700; color: #475467;
    text-decoration: none; white-space: nowrap;
  }
  .mkm-find__chip:active { background: #fff2ec; color: #e14f14; border-color: #ffd9c7; }

  @media (prefers-color-scheme: dark) {
    .mkm-find__box, .mkm-find__out, .mkm-find__chip { background: #131a29; border-color: #1f2937; }
    .mkm-find__box input { color: #f2f4f7; }
    .mkm-find__row { color: #f2f4f7; border-color: #1f2937; }
    .mkm-find__chip { color: #98a2b3; }
  }


  /* ========================================================================
     THE REDESIGN

     Every section on this page used to be the same shape: a kicker, a
     two-line display heading, an optional paragraph, then a rail or a grid.
     Five of those in a row read as five identical slabs, and it was why the
     page ran to 5148px for not very much content.

     Headings are one line and small now, with the link that belongs to them
     on the same row. The space goes to the things you can tap.
     ===================================================================== */
  .mkm-grid-sec { padding-block: calc(var(--beat) * .62); }

  .mkm-head {
    display: flex; align-items: baseline; gap: 10px;
    margin-bottom: 14px;
  }
  .mkm-head h2 {
    font-family: Poppins, Inter, system-ui, sans-serif;
    font-size: 20px; font-weight: 800; letter-spacing: -.5px;
    line-height: 1.15; margin: 0; color: var(--m-ink, #0f1c26);
  }
  .mkm-head span,
  .mkm-head a {
    margin-left: auto; font-size: 12.5px; font-weight: 700;
    color: var(--m-ink-3, #8b9bab); text-decoration: none; white-space: nowrap;
  }
  .mkm-head a { color: #e14f14; }

  /* ---- 4 · the emergency row -------------------------------------------- */
  .mkm-now { margin-top: 18px; }
  .mkm-now__row {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 15px; border-radius: 18px;
    background: linear-gradient(135deg, #ff5a4d, #e03127);
    box-shadow: 0 12px 26px -12px rgba(224,49,39,.8);
    text-decoration: none; color: #fff;
  }
  .mkm-now__pulse {
    flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.7);
    animation: mkm-now-beat 1.8s ease-out infinite;
  }
  @keyframes mkm-now-beat {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
    70%  { box-shadow: 0 0 0 11px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  }
  .mkm-now__txt { flex: 1; min-width: 0; }
  .mkm-now__txt strong { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
  .mkm-now__txt small {
    display: block; margin-top: 2px; font-size: 11.5px;
    color: rgba(255,255,255,.82); line-height: 1.4;
  }
  .mkm-now__go {
    flex: 0 0 18px; width: 18px; height: 18px;
    fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* ---- 5 · services, all ten visible ------------------------------------
     Each card is its own photograph with the label over it. The icon stays,
     small, in the corner: it says which service at a glance where a cropped
     photo alone can be ambiguous. */
  .mkm-svcs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  @media (min-width: 560px) { .mkm-svcs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* The colour has to be forced. mobile.css paints every link inside .mkm a
     dark ink colour at a specificity this cannot beat by inheritance, so the
     titles came out near-black on the photograph — legible on the dark crops
     and invisible on the pale ones. */
  .mkm .mkm-svcs .mkm-svc,
  .mkm .mkm-svcs .mkm-svc__txt strong { color: #fff !important; }

  .mkm-svc {
    display: block; text-decoration: none; color: #fff;
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 8px 22px -12px rgba(16,24,40,.5);
    transition: transform .18s var(--ease, ease);
  }
  .mkm-svc:active { transform: scale(.975); }

  .mkm-svc__pic {
    position: relative; display: block;
    /* Square. At 4:5 the card stood 238px tall and two rows filled the
       screen; the extra height was sky and floor, not subject. */
    aspect-ratio: 1 / 1; background: var(--sand, #f2f4f7);
  }
  .mkm-svc__pic img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  .mkm-svc__scrim {
    position: absolute; inset: 0;
    /* Heavier at the foot than it looks like it needs to be: the grooming and
       boarding photographs are pale and high-key, and a gentle scrim left the
       title floating on white. */
    background: linear-gradient(to top,
      rgba(10,14,22,.94) 0%, rgba(10,14,22,.78) 26%, rgba(10,14,22,.34) 52%,
      rgba(10,14,22,.05) 78%, transparent 100%);
  }

  .mkm-svc__ic {
    position: absolute; top: 9px; left: 9px;
    display: grid; place-items: center;
    width: 28px; height: 28px; border-radius: 9px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
  }
  .mkm-svc__ic svg {
    width: 15px; height: 15px;
    fill: none; stroke: #ff6b35; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .mkm-svc.is-live .mkm-svc__ic svg { stroke: #e03127; }

  .mkm-svc__live {
    position: absolute; top: 9px; right: 9px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px; border-radius: 99px;
    background: rgba(224,49,39,.95); color: #fff;
    font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  }
  .mkm-svc__live span {
    width: 5px; height: 5px; border-radius: 50%; background: #fff;
    animation: mkm-now-beat 1.8s ease-out infinite;
  }

  .mkm-svc__txt {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 10px 11px 12px;
  }
  .mkm-svc__txt strong {
    display: block; font-size: 13.5px; font-weight: 800;
    line-height: 1.25; letter-spacing: -.2px;
    text-shadow: 0 1px 6px rgba(0,0,0,.45);
  }
  .mkm-svc__txt small {
    display: inline-block; margin-top: 5px;
    padding: 3px 8px; border-radius: 7px;
    background: rgba(255,255,255,.94); color: #067647;
    font-size: 10.5px; font-weight: 800;
  }

  /* ---- the cartoon breaks between service rows ---------------------------

     Two stickers across the full width, after the fourth and eighth card. The
     first version of these was a flat tinted strip with a line of text, which
     did break the run of photographs but looked like a cookie notice.

     Cartoon here is the honest register: this is a site about pets, the
     nearest thing it has to a mascot is the paw in the logo, and the two
     things these say — "it is free" and "ask if you are stuck" — are exactly
     the things a nervous first-time visitor needs said warmly rather than
     formally.

     Built the way stickers are: a heavy ink outline, a hard offset shadow
     with no blur so it reads as printed rather than lit, flat fills, and a
     degree or two of rotation so they sit on the page rather than in it.
     ===================================================================== */
  .mkm-toon {
    grid-column: 1 / -1;
    position: relative;
    display: flex; align-items: center; gap: 12px;
    margin: 3px 2px 5px;
    padding: 13px 14px;
    border: 2.5px solid #14202c;
    border-radius: 18px;
    box-shadow: 4px 4px 0 #14202c;
    text-decoration: none;
    font-size: 12px; line-height: 1.45;
    color: #14202c;
  }
  .mkm-toon--free { background: #ffe9a8; transform: rotate(-1deg); }
  .mkm-toon--ai   { background: #dcd4ff; transform: rotate(.9deg); }

  /* Pressing a sticker should squash it onto the page. */
  .mkm-toon:active {
    transform: rotate(0deg) translate(2px, 2px);
    box-shadow: 2px 2px 0 #14202c;
  }

  /* ---- the characters ---- */
  .mkm-toon__pal {
    flex: 0 0 46px; width: 46px; height: 46px;
    display: grid; place-items: center;
  }
  .mkm-toon__pal svg { width: 46px; height: 46px; overflow: visible; }

  .mkm-toon__pal .fur   { fill: #f6b352; stroke: #14202c; stroke-width: 2.6; stroke-linejoin: round; }
  .mkm-toon__pal .snout { fill: #ffe0b8; stroke: #14202c; stroke-width: 2.4; }
  .mkm-toon__pal .tin   { fill: #a5f3e0; stroke: #14202c; stroke-width: 2.6; }
  .mkm-toon__pal .ink   { fill: #14202c; }
  .mkm-toon__pal .shine { fill: #fff; }
  .mkm-toon__pal .tongue{ fill: #ff7a8a; stroke: #14202c; stroke-width: 2; stroke-linejoin: round; }
  .mkm-toon__pal .bolt  { fill: #ffd84d; stroke: #14202c; stroke-width: 2.2; stroke-linejoin: round; }
  .mkm-toon__pal .line  {
    fill: none; stroke: #14202c; stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
  }

  /* A slow wag on the dog and a bob on the robot. Both are transforms only,
     so they run on the compositor and cost nothing while you scroll. */
  .mkm-toon--free .mkm-toon__pal svg { animation: mkm-toon-wag 2.6s ease-in-out infinite; transform-origin: 50% 80%; }
  .mkm-toon--ai   .mkm-toon__pal svg { animation: mkm-toon-bob 3s   ease-in-out infinite; }
  @keyframes mkm-toon-wag {
    0%,100% { transform: rotate(-5deg); }
    50%     { transform: rotate(5deg); }
  }
  @keyframes mkm-toon-bob {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-3px); }
  }

  /* ---- the speech ---- */
  .mkm-toon__bubble {
    flex: 1; min-width: 0;
    position: relative;
    padding: 9px 11px;
    background: #fff;
    border: 2.2px solid #14202c;
    border-radius: 14px;
  }
  .mkm-toon__bubble b {
    display: block; margin-bottom: 2px;
    font-family: Poppins, Inter, system-ui, sans-serif;
    font-size: 13px; font-weight: 800; letter-spacing: -.2px;
  }
  /* The tail, pointing back at whoever is talking. */
  .mkm-toon__bubble::before,
  .mkm-toon__bubble::after {
    content: ''; position: absolute; left: -9px; top: 17px;
    width: 0; height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 9px solid #14202c;
  }
  .mkm-toon__bubble::after {
    left: -5.6px;
    border-right-color: #fff;
  }

  /* ---- the free stamp ---- */
  .mkm-toon__stamp {
    position: absolute; top: -13px; right: 10px;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    transform: rotate(13deg);
  }
  .mkm-toon__stamp svg { position: absolute; inset: 0; width: 46px; height: 46px; }
  .mkm-toon__stamp .burst {
    fill: #ff5a4d; stroke: #14202c; stroke-width: 2.4; stroke-linejoin: round;
  }
  .mkm-toon__stamp em {
    position: relative;
    font-style: normal; font-weight: 900; font-size: 12px; color: #fff;
    font-family: Poppins, Inter, system-ui, sans-serif;
  }

  /* ---- the arrow on the AI sticker ---- */
  .mkm-toon__go {
    flex: 0 0 28px; width: 28px; height: 28px;
    display: grid; place-items: center;
    border: 2.2px solid #14202c; border-radius: 50%;
    background: #ffd84d;
  }
  .mkm-toon__go svg {
    width: 15px; height: 15px;
    fill: none; stroke: #14202c; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
  }

  @media (prefers-color-scheme: dark) {
    /* The ink line stays dark in both themes — a sticker with a pale outline
       stops looking printed. Only the paper changes. */
    .mkm-toon--free { background: #f2c96b; }
    .mkm-toon--ai   { background: #c3b6ff; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mkm-toon__pal svg { animation: none; }
  }

  /* ---- 6 · families ------------------------------------------------------ */
  .mkm-fams {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px;
  }
  .mkm-fam { display: block; text-decoration: none; color: var(--m-ink, #0f1c26); }
  .mkm-fam__pic {
    display: block; position: relative; overflow: hidden;
    aspect-ratio: 1 / 1; border-radius: 16px; background: #f2f4f7;
    box-shadow: 0 4px 14px -8px rgba(16,24,40,.2);
  }
  .mkm-fam__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mkm-fam strong {
    display: block; margin-top: 7px; font-size: 13px; font-weight: 800;
    line-height: 1.2; letter-spacing: -.2px;
  }
  .mkm-fam small {
    display: block; margin-top: 1px; font-size: 11px;
    color: var(--m-ink-3, #8b9bab); font-weight: 600;
  }

  /* ---- 8 · why ----------------------------------------------------------- */
  .mkm-why {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px;
  }
  .mkm-why__item {
    padding: 14px 12px; border-radius: 16px; background: #fff;
    border: 1px solid var(--m-line, rgba(15,28,38,.075));
  }
  .mkm-why__ic {
    display: grid; place-items: center;
    width: 32px; height: 32px; margin-bottom: 9px;
    border-radius: 10px; background: #ecfdf3;
  }
  .mkm-why__ic svg {
    width: 17px; height: 17px;
    fill: none; stroke: #067647; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .mkm-why__item strong {
    display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.2px;
  }
  .mkm-why__item small {
    display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.45;
    color: var(--m-ink-2, #55677a);
  }

  @media (prefers-color-scheme: dark) {
    .mkm-svc, .mkm-why__item { background: #131a29; border-color: #1f2937; }
    .mkm-svc, .mkm-fam, .mkm-why__item strong { color: #f2f4f7; }
    .mkm-head h2 { color: #f2f4f7; }
    .mkm-svc__ic { background: #2a1710; }
    .mkm-why__ic { background: #0d2018; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mkm-now__pulse { animation: none; }
  }

}