/* Stacksole homepage: page-specific additions.
 * Builds on stacksole-seo.css (shared design system), stacksole-shopify.css
 * (shared components), stacksole-wp-dev.css (service rows, hero sizing) and
 * stacksole-magento.css (extra icons). Adds the storefront + phone hero
 * visual, trust bar, service cards, numbered differentiators, solutions
 * visual, technology grid and industry tiles. */

.sk {
	--i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='14' rx='2' ry='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3C/svg%3E");
	--i-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z'/%3E%3Cpath d='M7 21h10'/%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
	--i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2'/%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Cpath d='M9 17h6'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3C/svg%3E");
	--i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4M10 10h4M10 14h4M10 18h4'/%3E%3C/svg%3E");
	--i-landmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7M10 18v-7M14 18v-7M18 18v-7'/%3E%3Cpath d='m12 2 8 5H4z'/%3E%3C/svg%3E");
}

.sk-i-briefcase { --ic: var(--i-briefcase); }
.sk-i-scale { --ic: var(--i-scale); }
.sk-i-wrench { --ic: var(--i-wrench); }
.sk-i-car { --ic: var(--i-car); }
.sk-i-building { --ic: var(--i-building); }
.sk-i-landmark { --ic: var(--i-landmark); }

body.page-id-5366 .page-title-wrapper {
	display: none;
}

body.page-id-5366 .convis-content-area,
body.page-id-5366 .convis-content-area > .container,
body.page-id-5366 .convis-content-area .content-area,
body.page-id-5366 .convis-content-area .page-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: #ffffff;
}

/* Hero visual: storefront + phone */
.sk .sk-hm { padding: 18px 20px 22px; font-size: 12px; color: var(--sk-navy); }
.sk .sk-hm-hero { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 14px; margin-top: 16px; padding: 22px; border-radius: 16px; background: var(--sk-blue-t); }
.sk .sk-hm-hero small { display: block; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sk-blue); }
.sk .sk-hm-hero strong { display: block; margin: 6px 0 12px; font-size: 19px; font-weight: 600; line-height: 1.15; letter-spacing: -.025em; }
.sk .sk-hm-hero i { display: block; height: 92px; border-radius: 12px; background: #ffffff; box-shadow: inset 0 0 0 1px #dbe6fb; }
.sk .sk-hm-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.sk .sk-phone { position: absolute; right: -8px; bottom: -6px; width: 152px; overflow: hidden; border: 1px solid var(--sk-line); border-radius: 26px; background: #ffffff; box-shadow: 0 1px 2px rgba(11, 27, 58, .05), 0 30px 60px -28px rgba(11, 27, 58, .38); }
.sk .sk-phone-bar { width: 44px; height: 5px; margin: 8px auto 4px; border-radius: 3px; background: #e4e9f2; }
.sk .sk-phone-body { display: grid; gap: 9px; padding: 8px 12px 14px; font-size: 11px; color: var(--sk-navy); }
.sk .sk-phone-hero { height: 56px; border-radius: 12px; background: var(--sk-blue-t); }
.sk .sk-phone-card { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; font-weight: 500; }
.sk .sk-phone-card i { display: block; width: 34px; height: 34px; border-radius: 9px; background: #eef2f8; }
.sk .sk-phone-card b { font-weight: 600; color: var(--sk-muted); }
.sk .sk-phone .sk-atc { justify-self: stretch; margin: 2px 0 0; text-align: center; }

/* Trust bar */
.sk.sk-trust { padding: 0; }
.sk .sk-trust-box { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sk-line); border-radius: 24px; background: #ffffff; box-shadow: var(--sk-shadow); }
.sk .sk-trust-item { display: grid; gap: 2px; padding: 22px 24px; border-right: 1px solid var(--sk-line); }
.sk .sk-trust-item:last-child { border-right: 0; }
.sk .sk-trust-item b { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--sk-navy); }
.sk .sk-trust-item span { font-size: 13px; color: var(--sk-muted); }
.sk .sk-built { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 22px; font-size: 13px; color: var(--sk-muted); }
.sk .sk-built em { margin-right: 4px; font-style: normal; font-weight: 500; color: var(--sk-navy); }
.sk .sk-built span { padding: 5px 12px; border: 1px solid var(--sk-line); border-radius: 999px; background: #ffffff; font-weight: 500; color: var(--sk-navy); }

/* Services */
.sk .sk-svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sk .sk-svc { display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--sk-line); border-radius: var(--sk-r); background: #ffffff; box-shadow: var(--sk-shadow); text-decoration: none; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.sk .sk-svc:hover { transform: translateY(-3px); border-color: #cfe0fb; box-shadow: var(--sk-shadow-h); }
.sk .sk-svc h3 { margin: 22px 0 8px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; color: var(--sk-navy); }
.sk .sk-svc p { margin: 0 0 20px; font-size: 15px; line-height: 1.65; color: var(--sk-text); }
.sk .sk-svc span { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; font-size: 14px; font-weight: 600; color: var(--sk-blue); }
.sk .sk-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; margin-top: 28px; font-size: 14px; color: var(--sk-muted); }
.sk .sk-more em { font-style: normal; font-weight: 500; color: var(--sk-navy); }
.sk .sk-more a, .sk .sk-more span { padding: 7px 14px; border: 1px solid var(--sk-line); border-radius: 999px; background: #ffffff; font-weight: 500; color: var(--sk-navy); text-decoration: none; }
.sk .sk-more a:hover { border-color: #b7cff7; color: var(--sk-blue); }
.sk .sk-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 40px; padding: 26px 30px; border: 1px solid var(--sk-line); border-radius: 22px; background: var(--sk-soft); }
.sk .sk-callout p { margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--sk-text); }
.sk .sk-callout p b { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; color: var(--sk-navy); }

/* Why Stacksole: numbered list */
.sk .sk-why2 { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 6vw, 5rem); }
.sk .sk-why2-copy { position: sticky; top: 110px; }
.sk .sk-nlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sk-line); }
.sk .sk-nlist li { display: grid; grid-template-columns: 44px 1fr; gap: 6px 18px; margin: 0; padding: 24px 0; border-bottom: 1px solid var(--sk-line); }
.sk .sk-nlist li > span { grid-row: span 2; padding-top: 3px; font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--sk-blue); }
.sk .sk-nlist h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; color: var(--sk-navy); }
.sk .sk-nlist p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sk-text); }

/* Solutions visual */
.sk .sk-sol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sk .sk-sol-col { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--sk-line); border-radius: 24px; background: #ffffff; box-shadow: var(--sk-shadow); }
.sk .sk-sol-vis { height: 190px; margin-bottom: 22px; padding: 16px; overflow: hidden; border-radius: 16px; background: var(--sk-soft); box-shadow: inset 0 0 0 1px var(--sk-line); }
.sk .sk-sol-col h3 { margin: 0 10px 6px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; color: var(--sk-navy); }
.sk .sk-sol-col p { margin: 0 10px 16px; font-size: 15px; line-height: 1.65; color: var(--sk-text); }
.sk .sk-sol-col .sk-tags { justify-content: flex-start; max-width: none; margin: auto 10px 10px; gap: 8px; }
.sk .sk-sol-col .sk-tags li { padding: 7px 12px; font-size: 12.5px; }
.sk .sk-v-page { display: grid; gap: 8px; }
.sk .sk-v-page i { display: block; height: 8px; border-radius: 4px; background: #dfe5ef; }
.sk .sk-v-page .h { height: 58px; border-radius: 10px; background: var(--sk-blue-t); box-shadow: inset 0 0 0 1px #dbe6fb; }
.sk .sk-v-page .r { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk .sk-v-page .r i { height: 44px; border-radius: 9px; background: #eef2f8; }
.sk .sk-v-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sk .sk-v-shop div i { display: block; height: 64px; border-radius: 10px; background: #eef2f8; }
.sk .sk-v-shop div span { display: block; width: 70%; height: 6px; margin-top: 7px; border-radius: 3px; background: #dfe5ef; }
.sk .sk-v-shop div:nth-child(2n) i { background: #e6eefc; }
.sk .sk-v-serp { display: grid; gap: 9px; }
.sk .sk-v-serp .q { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid var(--sk-line); border-radius: 999px; background: #ffffff; font-size: 11px; color: var(--sk-muted); }
.sk .sk-v-serp .r1 { padding: 9px 10px; border-radius: 10px; background: #ffffff; box-shadow: inset 0 0 0 1px #dbe6fb; }
.sk .sk-v-serp .r1 b { display: block; font-size: 12px; color: var(--sk-blue-d); }
.sk .sk-v-serp .r1 i, .sk .sk-v-serp .r2 i { display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: #dfe5ef; }
.sk .sk-v-serp .r2 i:first-child { width: 60%; }

/* Technologies */
.sk .sk-tech-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.sk .sk-tech { display: grid; gap: 2px; padding: 18px; border: 1px solid var(--sk-line); border-radius: 18px; background: #ffffff; }
.sk .sk-tech b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--sk-navy); }
.sk .sk-tech span { font-size: 13px; color: var(--sk-muted); }
.sk .sk-tech-note { margin: 22px 0 0; text-align: center; font-size: 14px; color: var(--sk-muted); }

/* Why Stacksole: full-width differentiators grid (7 items + CTA cell) */
.sk .sk-diffs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; overflow: hidden; border: 1px solid var(--sk-line); border-radius: 24px; background: #ffffff; box-shadow: var(--sk-shadow); }
.sk .sk-diffs li { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 30px 28px; border-right: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
.sk .sk-diffs li:nth-child(4n) { border-right: 0; }
.sk .sk-diffs li:nth-child(n+5) { border-bottom: 0; }
.sk .sk-diffs li > span { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: var(--sk-blue); }
.sk .sk-diffs h3 { margin: 6px 0 0; font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; color: var(--sk-navy); }
.sk .sk-diffs p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--sk-text); }
.sk .sk-diffs .sk-diff-cta { justify-content: flex-start; background: var(--sk-blue-t); }
.sk .sk-diffs .sk-diff-cta b { font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; color: var(--sk-navy); }
.sk .sk-diffs .sk-diff-cta .sk-link { margin-top: auto; padding-top: 8px; }

@media (max-width: 1100px) {
	.sk .sk-diffs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk .sk-diffs li, .sk .sk-diffs li:nth-child(4n), .sk .sk-diffs li:nth-child(n+5) { border-right: 1px solid var(--sk-line); border-bottom: 1px solid var(--sk-line); }
	.sk .sk-diffs li:nth-child(2n) { border-right: 0; }
	.sk .sk-diffs li:nth-child(n+7) { border-bottom: 0; }
}

@media (max-width: 767px) {
	.sk .sk-diffs { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-diffs li, .sk .sk-diffs li:nth-child(2n), .sk .sk-diffs li:nth-child(4n) { border-right: 0; border-bottom: 1px solid var(--sk-line); }
	.sk .sk-diffs li:nth-child(n+7) { border-bottom: 1px solid var(--sk-line); }
	.sk .sk-diffs li:last-child { border-bottom: 0; }
	.sk .sk-diffs li { padding: 24px 22px; }
}

/* Industries (16 tiles) */
.sk .sk-link.sk-center { display: flex; justify-content: center; margin-top: 32px; text-align: center; }
.sk .sk-ind-grid.sk-ind-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sk .sk-ind small { display: block; margin-top: -8px; font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--sk-muted); }

@media (max-width: 1100px) {
	.sk .sk-trust-box { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sk .sk-trust-item:nth-child(3) { border-right: 0; }
	.sk .sk-trust-item:nth-child(-n+3) { border-bottom: 1px solid var(--sk-line); }
	.sk .sk-svc-grid, .sk .sk-sol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk .sk-why2 { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-why2-copy { position: static; }
	.sk .sk-tech-grid, .sk .sk-ind-grid.sk-ind-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sk .sk-callout { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 767px) {
	.sk .sk-trust-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk .sk-trust-item { border-right: 0 !important; border-bottom: 1px solid var(--sk-line); }
	.sk .sk-trust-item:nth-child(odd) { border-right: 1px solid var(--sk-line) !important; }
	.sk .sk-trust-item:last-child { grid-column: span 2; border-bottom: 0; }
	.sk .sk-svc-grid, .sk .sk-sol { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-tech-grid, .sk .sk-ind-grid.sk-ind-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk .sk-hm-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sk .sk-hm-hero { grid-template-columns: minmax(0, 1fr); }
	.sk .sk-hm-hero i { display: none; }
	.sk .sk-phone { right: 0; width: 128px; }
	.sk .sk-store-nav nav { display: none; }
	.sk .sk-callout { padding: 22px; }
	.sk .sk-callout .sk-btn { width: 100%; }
}