/* Phone layout for kaspr.ae. Loaded on every page with media="(max-width: 767px)".
   The pages use inline styles, so these rules target those styles and use !important. */

/* ---------- Page gutter ---------- */
[style*="max-width: 1280px; margin: 0 auto"],
[style*="max-width: 1312px; margin: 0 auto"] { padding-left: 20px !important; padding-right: 20px !important; }

/* ---------- Section spacing ---------- */
[style*="padding: 136px 48px"], [style*="padding: 128px 48px"],
[style*="padding: 120px 48px"], [style*="padding: 96px 48px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
[style*="padding: 136px 48px 0"], [style*="padding: 128px 48px 0"] { padding-bottom: 0 !important; }
[style*="padding: 0 48px 128px"] { padding-bottom: 56px !important; }
[style*="padding: 120px 32px 36px"] { padding-top: 56px !important; padding-bottom: 28px !important; } /* closing CTA + footer */
[style*="padding: 72px 32px"] { padding-top: 40px !important; padding-bottom: 40px !important; }
[style*="padding: 88px 32px"] { padding-top: 48px !important; padding-bottom: 48px !important; }
.hero { padding-top: 32px !important; padding-bottom: 32px !important; gap: 24px !important; }

[style*="margin-top: 112px"], [style*="margin-top: 96px"] { margin-top: 48px !important; }
[style*="margin-top: 48px"] { margin-top: 28px !important; }
[style*="gap: 64px"], [style*="gap: 56px"] { gap: 28px !important; }
[style*="gap: 48px"] { gap: 24px !important; }
[style*="gap: 40px"] { gap: 20px !important; }

/* ---------- Type scale ---------- */
[style*="font-size: clamp(44px, 6.4vw, 84px)"] { font-size: 38px !important; }              /* page heroes */
[style*="font-size: clamp(44px, 6.4vw, 88px)"],
[style*="font-size: clamp(48px, 7vw, 96px)"] { font-size: 32px !important; }                 /* section headings */
[style*="font-size: clamp(48px, 6.4vw, 88px)"] { font-size: 36px !important; }               /* legal + 404 */
[style*="font-size: clamp(48px, 7.4vw, 104px)"] { font-size: 32px !important; }              /* closing "Book a 15-minute call" */
[style*="font-size: clamp(36px, 4.6vw, 64px)"] { font-size: 26px !important; }
[style*="font-size: clamp(30px, 3.8vw, 52px)"] { font-size: 22px !important; }
[style*="font-size: clamp(26px, 3vw, 40px)"], [style*="font-size: clamp(28px, 3vw, 40px)"] { font-size: 22px !important; }
[style*="font-size: clamp(24px, 2.4vw, 32px)"], [style*="font-size: clamp(24px, 2.6vw, 34px)"] { font-size: 20px !important; }
[style*="font-size: 56px"] { font-size: 28px !important; }   /* plan prices */
[style*="font-size: 40px"] { font-size: 28px !important; }   /* 70+ */
[style*="font-size: 34px"] { font-size: 20px !important; }   /* service card titles */
[style*="font-size: 30px"] { font-size: 26px !important; }
[style*="font-size: 28px"] { font-size: 20px !important; }   /* plan names, about values */
[style*="font-size: 26px"] { font-size: 19px !important; }   /* step and card titles */
[style*="font-size: 21px"] { font-size: 17px !important; }   /* lead paragraphs, FAQ questions */
[style*="font-size: 20px"], [style*="font-size:20px"] { font-size: 17px !important; }
[style*="font-size: 18px"], [style*="font-size: 19px"], [style*="font-size:19px"] { font-size: 16px !important; }
[style*="font-size: 17px"] { font-size: 16px !important; }
.hero-lead { font-size: 17px !important; }
h1, h2 { line-height: 1.02 !important; }

/* ---------- Hero proof row: 2 x 2 ---------- */
[style*="border-top: 1px solid rgba(255,255,255,0.45)"][style*="minmax(min(200px, 100%), 1fr)"] {
  grid-template-columns: 1fr 1fr !important; gap: 20px 16px !important; padding-top: 20px !important;
}
[style*="border-top: 1px solid rgba(255,255,255,0.45)"][style*="minmax(min(200px, 100%), 1fr)"] > div { gap: 8px !important; }
[style*="border-top: 1px solid rgba(255,255,255,0.45)"][style*="minmax(min(200px, 100%), 1fr)"] img { max-width: 100%; height: auto !important; max-height: 30px; width: auto !important; }
[style*="border-top: 1px solid rgba(255,255,255,0.45)"][style*="minmax(min(200px, 100%), 1fr)"] [style*="font-size: 15px"] { font-size: 13px !important; line-height: 1.35; }
[style*="border-top: 1px solid rgba(255,255,255,0.45)"][style*="minmax(min(200px, 100%), 1fr)"] [style*="height: 44px"] { height: 32px !important; }

/* ---------- Service and plan cards: 2 x 2 ---------- */
div:has(> a.pcol) { grid-template-columns: 1fr 1fr !important; }
a.pcol { min-height: 0 !important; padding: 18px 14px 16px !important; gap: 10px !important; border-right: 1px solid #D4D6DC !important; }
a.pcol:nth-child(2n) { border-right: 0 !important; }
a.pcol:nth-child(-n+2) { border-bottom: 1px solid #D4D6DC; }
a.pcol p { font-size: 14px !important; line-height: 1.4; }
a.pcol .arw { width: 34px !important; height: 34px !important; }
a.pcol .arw svg { width: 14px; height: 10px; }
a.pcol [style*="font-size: 15px"], a.pcol [style*="font-size: 14px"], a.pcol [style*="font-size: 13px"] { font-size: 12px !important; }
a.pcol:hover .arw { transform: none; }

/* ---------- "Which one is you?" rows ---------- */
a.sit { position: relative; padding: 18px 48px 18px 0 !important; gap: 6px !important; }
a.sit:hover { padding-left: 0 !important; padding-right: 48px !important; }
a.sit h3 { flex-basis: 100% !important; }
a.sit .ans { font-size: 15px !important; flex-basis: 100% !important; }
a.sit .arw { position: absolute; right: 0; top: 50%; margin-top: -17px; width: 34px !important; height: 34px !important; }
a.sit .arw svg { width: 14px; height: 10px; }
a.sit:hover .arw { transform: none; }

/* ---------- How it works: small number beside each step ---------- */
.step { flex-direction: row !important; gap: 16px !important; align-items: flex-start; }
.step .num { font-size: 44px !important; width: 36px; flex: none; line-height: 1 !important; }
.step > div:last-child { flex: 1; padding-top: 12px !important; }

/* ---------- Home videos: swipe row ---------- */
[style*="minmax(min(280px, 100%), 1fr)"] {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important;
  margin-right: -20px; padding-right: 20px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
[style*="minmax(min(280px, 100%), 1fr)"]::-webkit-scrollbar { display: none; }
[style*="minmax(min(280px, 100%), 1fr)"] > * { flex: 0 0 78% !important; scroll-snap-align: start; }

/* ---------- FAQ ---------- */
[style*="padding: 0 40px 26px 0"] { padding-bottom: 18px !important; font-size: 15px !important; }

/* ---------- Footer: two columns ---------- */
[style*="border-top: 1px solid #34363F"][style*="minmax(min(180px, 100%), 1fr)"] {
  grid-template-columns: 1fr 1fr !important; gap: 28px 16px !important; padding-top: 28px !important;
}
[style*="border-top: 1px solid #34363F"][style*="minmax(min(180px, 100%), 1fr)"] > div:first-child { grid-column: 1 / -1; }
[style*="border-top: 1px solid #34363F"][style*="minmax(min(180px, 100%), 1fr)"] > div { gap: 4px !important; }
.flink { padding: 7px 0 !important; margin: 0 !important; font-size: 15px !important; }

/* ---------- Tweaks ---------- */
img[src*="proof/deloitte"] { max-height: 22px !important; }
[style*="font-size: clamp(48px, 7.4vw, 104px)"] svg { width: 56px !important; height: auto !important; }

/* ---------- Pricing comparison table: pinned labels, swipe for plans ---------- */
.tbl { min-width: 600px !important; font-size: 14px !important; }
.tbl th, .tbl td { padding: 12px 10px !important; vertical-align: top; }
.tbl thead th { font-size: 16px !important; }
.tbl th[scope="row"], .tbl thead th:first-child {
  position: sticky; left: 0; z-index: 1; background: #FFFFFF; width: 112px; min-width: 112px; padding-left: 0 !important;
  box-shadow: 1px 0 0 #D4D6DC;
}
div:has(> .tbl) { margin-right: -20px; } /* let the next plan column peek in from the screen edge */