/* Service pages, depth pass (2026-11-01), loaded after service-deep.css on every design/service-*.html.
   Two sections the pages were missing, both written to be quoted by search and AI answers:
     .sv-fit  "Is it right for you?": who the service is for, who it isn't for (with a pointer to the right
              service) and what we need from you to start. The TikTok pages already had this intro as
              .tt-fit (tiktok-shop.css); they only gain the .sv-need block inside their card.
     .mx-sec  "Common problems, and how we fix them": six question-led cards (the question as the h3,
              then why it happens and what we do), on the soft-green band the homepage uses.
   Values come from the shell's :root tokens. */

/* ---------- is it right for you? ---------- */
.sv-fit{padding:112px 0 0}
.sv-fit-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start}
.sv-fit .sec-head{margin-bottom:0}
.sv-pain{margin:24px 0 0;padding:18px 20px;border:1px solid rgba(53,115,24,.14);border-radius:16px;background:var(--green-50);
  font:600 19px/1.45 var(--display);letter-spacing:-.01em;color:var(--ink-800)}
.sv-pain small{display:block;margin-top:6px;font:500 13px/1.4 var(--body);letter-spacing:0;color:var(--slate-500)}
.sv-fit-card{display:grid;gap:24px;padding:28px;border-radius:24px;background:var(--white);border:1px solid var(--slate-200);
  box-shadow:0 24px 48px -36px rgba(20,26,34,.35)}
.sv-fit-card h3{font:600 18px/1.3 var(--display);letter-spacing:-.015em;color:var(--ink-800)}
.sv-fit-card .checks{margin:12px 0 0}
.sv-fit-card .checks li{font-size:15px;line-height:1.55;color:var(--slate-500)}
.sv-not,.sv-need{padding-top:24px;border-top:1px solid var(--slate-200)}
.sv-not svg{color:var(--slate-400)}
.sv-a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sv-a:hover{color:var(--ink-800)}

/* what we need to start: small key-icon rows, in both the .sv-fit and the TikTok .tt-fit card */
.sv-need ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.sv-need li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--slate-500)}
.sv-need li>svg{flex:none;width:18px;height:18px;margin-top:3px;color:var(--green-700)}
.sv-need b{font-weight:600;color:var(--ink-800)}
.sv-need p{margin:12px 0 0;font-size:13px;line-height:1.5;color:var(--slate-500)}

/* ---------- common problems, and how we fix them ---------- */
.mx-sec{padding:112px 0;background:#F2F9EC;border-top:1px solid rgba(53,115,24,.1);border-bottom:1px solid rgba(53,115,24,.1)}
.mx-sec .sec-head{max-width:760px}
.mx-chip{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;padding:6px 12px;border-radius:999px;background:var(--white);
  border:1px solid rgba(53,115,24,.16);font:600 13px/1 var(--body);color:var(--green-700)}
.mx-chip svg{width:15px;height:15px}
.mx-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.mx-card{display:flex;flex-direction:column;gap:14px;padding:26px;border-radius:20px;background:var(--white);border:1px solid rgba(20,26,34,.08);
  box-shadow:0 18px 40px -34px rgba(20,26,34,.4)}
.mx-q{display:flex;gap:12px;align-items:flex-start}
.mx-ic{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:#FFF6E6;color:#A35F00}
.mx-ic svg{width:18px;height:18px}
.mx-card h3{margin:0;font:600 18px/1.35 var(--display);letter-spacing:-.015em;color:var(--ink-800);text-wrap:balance}
.mx-card p{margin:0;font-size:15px;line-height:1.6;color:var(--slate-500)}
.mx-card p b{display:block;margin-bottom:2px;font:600 12px/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-800)}
.mx-fix{margin-top:auto!important;padding:14px 16px;border-radius:14px;background:var(--green-50)}
.mx-fix b{color:var(--green-700)!important}
.mx-card a{color:var(--green-700);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.mx-foot{margin:28px 0 0;font-size:15px;color:var(--slate-500)}
.mx-foot a{font-weight:600;color:var(--green-700);text-decoration:underline;text-underline-offset:3px}

@media (max-width:1100px){
  .mx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sv-fit{padding-top:72px}
  .sv-fit-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .mx-sec{padding:72px 0}
}
@media (max-width:640px){
  .sv-fit-card{padding:20px}
  /* six stacked cards ran to ~2,900px on a phone: one card at a time, the next one peeking in (as on the homepage) */
  .mx-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,340px);gap:12px;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:4px 16px 14px;
    scrollbar-width:thin;scrollbar-color:rgba(40,88,15,.3) transparent}
  .mx-card{padding:20px;scroll-snap-align:start}
  .mx-sec .sec-head{margin-bottom:28px}
  .mx-sec .sec-head::after{content:"Swipe for all six \2192";display:block;margin-top:14px;font:500 13px/1.4 var(--body);color:var(--slate-500)}
}

/* ---------- product branding: the Storefront tab lists what a Store includes (no client designs cleared yet) ---------- */
.dv-feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dv-feat li{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:20px;background:var(--white);border:1px solid var(--slate-200)}
.dv-feat .cb-ic{flex:none;width:44px;height:44px;margin:0;border-radius:12px;background:var(--green-50);color:var(--green-700)}
.dv-feat .cb-ic svg{width:22px;height:22px}
.dv-feat h3,.dv-feat h4{margin:2px 0 4px;font:600 16px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink-800)}
.dv-feat p{margin:0;font-size:15px;line-height:1.55;color:var(--slate-500)}
.dv-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--slate-500)}
@media (max-width:640px){ .dv-feat{grid-template-columns:minmax(0,1fr)} }

/* 2026-11-11 copy trim: "Why it happens" folds away; the fix is what you read first */
.mx-card .mx-fix{margin-top:0!important}
.mx-why{margin-top:auto}
.mx-why summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font:600 13px/1.4 var(--body);color:var(--slate-500);border-radius:6px}
.mx-why summary::-webkit-details-marker{display:none}
.mx-why summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s var(--ease)}
.mx-why[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.mx-why summary:hover{color:var(--ink-800)}
.mx-why summary:focus-visible{outline:2px solid var(--green-700);outline-offset:3px}
.mx-why p{margin-top:8px!important}
@media (prefers-reduced-motion:reduce){.mx-why summary::after{transition:none}}