/* The TrueWholesale kit for template case studies (data 'kit' => true adds .cs-kit and this file):
   the highlighted phase, the light rows panel + dark AI card under the phases (extra.kit-panels), the store badges and
   store-style screen cards (extra.kit-screens), the After launch icons, and the contact form exactly as on TrueWholesale.
   The screen cards' curve and headline colours come from --kit-a / --kit-b / --kit-ink (a study may set its own). */
.cs-kit { --kit-a: #34C38F; --kit-b: #00875A; --kit-ink: #00744A; }

/* How the work ran: the phases, then TrueWholesale's two panels (rows + the dark AI card); the app badges. Copied from case-truewholesale.css, scoped */
.cs-kit .cs-badge { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 12px; border-radius: 8px; background: #000; color: #fff; border: 1px solid #A6A6A6; text-decoration: none; transition: transform .2s, border-color .2s; }
.cs-kit .cs-badge:hover { transform: translateY(-1px); border-color: #fff; }
.cs-kit .cs-badge:focus-visible { outline: 2px solid #00B26B; outline-offset: 3px; }
.cs-kit .cs-badge img { width: 24px; height: 26px; flex: none; }
.cs-kit .cs-badge span { display: flex; flex-direction: column; line-height: 1.05; }
.cs-kit .cs-badge small { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: rgba(255, 255, 255, .85); }
.cs-kit .cs-badge b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.cs-kit .cs-step--ai .cs-step__dot { background: #007A4A; border-color: #007A4A; color: #fff; box-shadow: 0 0 0 5px rgba(0, 178, 107, .16); }
.cs-kit .cs-step--ai .cs-step__title { color: #007A4A; }
.cs-kit .cs-panels { display: grid; gap: 16px; margin-top: 16px; }
@media (min-width: 1024px) { .cs-kit .cs-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; } }

/* the two panels under the phases: integrations (light) and the AI layer (dark) */
.cs-kit .cs-panel { position: relative; overflow: hidden; height: 100%; padding: 22px 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); }
@media (min-width: 768px) { .cs-kit .cs-panel { padding: 28px 30px; } }
.cs-kit .cs-panel--ai { display: flex; flex-direction: column; align-items: stretch; background: #050806 radial-gradient(80% 70% at 100% 0%, rgba(0, 178, 107, .28), transparent 70%); border-color: rgba(255, 255, 255, .08); color: #fff; }
.cs-kit .cs-panel__icon { flex: none; width: 36px; height: 36px; border-radius: 12px; background: rgba(0, 178, 107, .16) url("../img/founder/icon-sparkles.svg") center / 22px no-repeat; border: 1px solid rgba(0, 178, 107, .35); }
/* integrations panel: one row per sentence, icon on the left */
.cs-kit .cs-panels .cs-rows { display: grid; margin: 0; padding: 0; list-style: none; }
.cs-kit .cs-panels .cs-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid rgba(0, 0, 0, .08); }
.cs-kit .cs-panels .cs-row:first-child { padding-top: 0; border-top: 0; }
.cs-kit .cs-panels .cs-row:last-child { padding-bottom: 0; }
.cs-kit .cs-panels .cs-row p { font-size: 16px; line-height: 1.6; color: rgba(0, 0, 0, .75); }
.cs-kit .cs-panels .cs-row b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 600; color: #111; }
.cs-kit .cs-panels .cs-row__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #EAF7F0; }
.cs-kit .cs-panels .cs-row__icon img { width: 22px; height: 22px; }
/* the logos of the connected systems, under the first sentence */
.cs-kit .cs-panels .cs-row__logos { display: flex; gap: 8px; margin-top: 12px; }
.cs-kit .cs-panels .cs-row__logos img { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); object-fit: contain; }
@media (max-width: 639px) { .cs-kit .cs-panels .cs-row { grid-template-columns: 1fr; gap: 12px; } }

/* integrations panel (not the after-launch rows): each point its own soft card */
.cs-kit .cs-panels .cs-rows { gap: 10px; }
.cs-kit .cs-panels .cs-row, .cs-kit .cs-panels .cs-row:first-child, .cs-kit .cs-panels .cs-row:last-child { padding: 16px; border: 0; border-radius: 16px; background: #F6F8F7; transition: background-color .2s; }
.cs-kit .cs-panels .cs-row:hover { background: #EFF6F2; }
.cs-kit .cs-panels .cs-row__icon { width: 42px; height: 42px; background: #fff; border: 1px solid rgba(0, 178, 107, .25); box-shadow: 0 6px 14px -10px rgba(0, 60, 35, .4); }
/* the logos of the three connected systems */
.cs-kit .cs-panels .cs-row__logos { position: relative; gap: 10px; margin-top: 14px; }
.cs-kit .cs-panels .cs-row__logos img { position: relative; width: 48px; height: 48px; padding: 10px; border-radius: 12px; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .35); }
.cs-kit .cs-panels .cs-row__logos { width: max-content; }
@media (max-width: 639px) { .cs-kit .cs-panels .cs-row { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px; } .cs-kit .cs-panels .cs-row__icon { width: 38px; height: 38px; } .cs-kit .cs-panels .cs-row__logos { gap: 8px; } .cs-kit .cs-panels .cs-row__logos img { width: 42px; height: 42px; padding: 9px; } }

/* MCP panel: a faint dotted network in the top-right corner, content above it */
.cs-kit .cs-panel--ai::after { content: ""; position: absolute; top: 0; right: 0; width: 60%; height: 70%; pointer-events: none; background-image: radial-gradient(rgba(78, 211, 156, .35) 1.2px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%); }
.cs-kit .cs-panel--ai > * { position: relative; z-index: 1; }
/* MCP panel: label, the definition as a lead, the use, the safeguard, the link */
.cs-kit .cs-mcp__lead { margin-top: 16px; font-size: 20px; font-weight: 600; line-height: 1.35; color: #fff; }
.cs-kit .cs-mcp__lead::first-letter { text-transform: uppercase; }
@media (min-width: 768px) { .cs-kit .cs-mcp__lead { font-size: 24px; } }
.cs-kit .cs-mcp__safe { position: relative; margin-top: 18px; padding: 14px 16px 14px 48px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(78, 211, 156, .3); font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .88); }
.cs-kit .cs-mcp__safe::before { content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px; background: #4ED39C; -webkit-mask: url("../img/ecommerce/icons/ec-step-shield-check.svg") center / contain no-repeat; mask: url("../img/ecommerce/icons/ec-step-shield-check.svg") center / contain no-repeat; }
.cs-kit .cs-mcp__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: auto -4px 0; padding: 18px 4px 0; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15px; font-weight: 600; color: #4ED39C; text-decoration: none; }
.cs-kit .cs-panel--ai .cs-mcp__safe { margin-bottom: 24px; }
.cs-kit .cs-mcp__go { position: relative; display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid rgba(78, 211, 156, .45); background: rgba(0, 178, 107, .12); transition: background-color .2s, border-color .2s; }
.cs-kit .cs-mcp__go::after { content: ""; width: 20px; height: 20px; background: #4ED39C; -webkit-mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; mask: url("../img/ecommerce/icons/arrow-up-right.svg") center / 1.6em no-repeat; transition: transform .2s, background-color .2s; }
.cs-kit .cs-mcp__link:hover .cs-mcp__go { background: #00B26B; border-color: #00B26B; }
.cs-kit .cs-mcp__link:hover .cs-mcp__go::after { background: #04150D; transform: translate(1px, -1px); }
.cs-kit .cs-mcp__link:focus-visible { outline: 2px solid #4ED39C; outline-offset: 3px; border-radius: 4px; }
.cs-kit .cs-label--light { color: rgba(255, 255, 255, .7); }
.cs-kit .cs-panel--ai .cs-label { margin: 0; }
.cs-kit .cs-panels .cs-row__icon::before { content: none; }   /* the shared after-launch check icon; these rows carry their own image */
.cs-kit .cs-panels .cs-row p { margin: 0; }
.cs-kit .cs-panel--ai .cs-mcp__safe { margin-bottom: 0; }
.cs-kit .cs-panel--ai .cs-mcp__safe + .cs-mcp__safe { margin-top: 10px; }
.cs-kit .cs-panel--ai .cs-mcp__safe:last-of-type { margin-bottom: 24px; }
.cs-kit .kit-badges { display: flex; gap: 10px; margin-top: 24px; }
@media (min-width: 640px) { .cs-kit .kit-badges { gap: 12px; } }
@media (max-width: 639px) { .cs-kit .cs-badge { height: 44px; padding: 0 12px 0 10px; gap: 8px; flex: 1 1 0; min-width: 0; justify-content: center; } .cs-kit .cs-badge img { width: 20px; height: 22px; } .cs-kit .cs-badge b { font-size: 14px; } .cs-kit .cs-badge small { font-size: 11px; letter-spacing: 0; white-space: nowrap; } }
/* After launch: a phone and a clock icon on the first two rows, as on TrueWholesale */
.cs-kit .cs-row__icon--mobile::before { -webkit-mask-image: url("../img/case-study/truewholesale/eco-mobile.svg"); mask-image: url("../img/case-study/truewholesale/eco-mobile.svg"); width: 22px; height: 22px; }
.cs-kit .cs-row__icon--clock::before { -webkit-mask-image: url("../img/how-we-work/icon-clock.svg"); mask-image: url("../img/how-we-work/icon-clock.svg"); width: 22px; height: 22px; }

/* The app screens as store-style cards: a phone in a dark frame on a curved gold shape, a headline above or below */
.cs-kit .kit-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
/* phones: a sideways swipe strip, as TrueWholesale's app strip (QA PC-05: no card left alone in a 2-column grid) */
@media (max-width: 639px) {
  .cs-kit .kit-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; margin: 24px -16px 0; padding: 4px 16px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cs-kit .kit-cards::-webkit-scrollbar { display: none; }
  .cs-kit .kit-cards > li { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (min-width: 640px) {
  .cs-kit .kit-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
}
.cs-kit .kit-card { position: relative; display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; aspect-ratio: 9 / 19.5; border-radius: 18px; background: linear-gradient(160deg, #fff 35%, #E9ECF0); border: 1px solid rgba(0, 0, 0, .08); box-shadow: 0 18px 36px -26px rgba(0, 0, 0, .5); cursor: zoom-in; }
.cs-kit .kit-card--above { flex-direction: column-reverse; }
/* one big smooth gold circle segment behind the phone; --below = phone on top, --above = phone at the bottom */
.cs-kit .kit-card::before { content: ""; position: absolute; left: -22%; width: 144%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(160deg, var(--kit-a), var(--kit-b)); }
.cs-kit .kit-card--below::before { top: -10%; }
.cs-kit .kit-card--above::before { bottom: -10%; }
.cs-kit .kit-card__phone { position: relative; z-index: 1; flex: none; box-sizing: border-box; width: 72%; height: 57%; margin: 0 auto; border: 2.4cqw solid #141414; border-radius: 11cqw; background: #141414; overflow: hidden; box-shadow: 0 0 0 1px #3a3a3a, 0 10px 22px -8px rgba(0, 0, 0, .55); }
.cs-kit .kit-card--below .kit-card__phone { margin-top: -12cqw; border-top-width: 0; }
.cs-kit .kit-card--above .kit-card__phone { margin-bottom: -12cqw; }
.cs-kit .kit-card--above .kit-card__phone::after { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 30%; height: 4.2cqw; transform: translateX(-50%); border-radius: 0 0 3cqw 3cqw; background: #141414; }
.cs-kit .kit-card__phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8.5cqw; }
.cs-kit .kit-card__txt { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: 0 6cqw; text-align: center; font-size: max(9px, 5.4cqw); line-height: 1.4; color: #1f2937; }
.cs-kit .kit-card__txt b { display: block; margin-bottom: 1.5cqw; font-size: max(10px, 7.4cqw); line-height: 1.2; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--kit-ink); }

/* Contact form: the same spacing, field sizes and greys as TrueWholesale's form (case-truewholesale.css .cs-form / .cs-field) */
.cs-kit .tw7-form { display: grid; gap: 14px; margin-top: 18px; }
.cs-kit .tw7-form .tw7-pair { display: grid; gap: 14px; }
.cs-kit .tw7-form .tw7-field { display: grid; gap: 6px; align-content: start; margin: 0; }
.cs-kit .tw7-field label { margin: 0; }
.cs-kit .tw7-field label > span:not(.tw7-req-mark) { margin-left: 0; font-weight: 400; color: rgba(0, 0, 0, .55); }
.cs-kit .tw7-req { color: rgba(0, 0, 0, .6); }
.cs-kit .tw7-count { color: rgba(0, 0, 0, .55); }
.cs-kit .tw7-field input, .cs-kit .tw7-field textarea { padding: 11px 14px; font-size: 16px; line-height: 1.4; }
.cs-kit .tw7-field textarea { min-height: 112px; height: auto; }
.cs-kit .tw7-field input::placeholder, .cs-kit .tw7-field textarea::placeholder { font-size: 16px; color: rgba(0, 0, 0, .45); }
@media (max-width: 379px) { .cs-kit .tw7-field input::placeholder { font-size: 14px; } }   /* the full phone hint fits at 360 px (QA PC-11) */
.cs-kit .tw7-submit { margin-top: 4px; }
.cs-kit .tw7-note { margin-top: 0; color: rgba(0, 0, 0, .6); }
.cs-kit .tw7-form .error-help-block { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; line-height: 1.4; color: #B42318; }
.cs-kit .tw7-form .error-help-block::before { content: "!"; display: grid; place-items: center; width: 16px; height: 16px; flex: none; border-radius: 50%; background: #B42318; color: #fff; font-size: 11px; font-weight: 700; }
.cs-kit .tw7-form .error-help-block:empty { display: none; }
.cs-kit .tw7-field input.is-invalid, .cs-kit .tw7-field textarea.is-invalid { border-color: #DE4B47; background: #FFF8F7; }
.cs-kit .tw7-field input.is-invalid:focus, .cs-kit .tw7-field textarea.is-invalid:focus { box-shadow: 0 0 0 4px rgba(222, 75, 71, .14); }
.cs-kit .tw7-field label > span:not(.tw7-req-mark) { margin-left: .28em; }   /* the space TrueWholesale has before "(optional)" */
.cs-kit .tw7-field [aria-invalid="true"] { border-color: #DE4B47 !important; background: #FFF8F7; box-shadow: none; }
.cs-kit .tw7-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(222, 75, 71, .14); }