/* Jettt — mobile layer. Every rule lives inside a max-width media query,
   so the desktop rendering is byte-for-byte untouched. */

@media (max-width: 767px) {
  html, body { overflow-x: hidden !important; }
  img, svg, video, canvas { max-width: 100%; }

  /* ---- page gutters ---------------------------------------------------- */
  section, footer, header { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"],
  [style*="max-width:1100px"],
  [style*="max-width: 1100px"],
  [style*="max-width:1080px"],
  [style*="max-width: 1080px"],
  [style*="max-width:1000px"],
  [style*="max-width: 1000px"],
  [style*="max-width:960px"],
  [style*="max-width: 960px"],
  [style*="max-width:900px"],
  [style*="max-width: 900px"] { max-width: 100% !important; }
  /* ---- vertical rhythm ------------------------------------------------- */
  [style*="padding:150px"],
  /* ---- vertical rhythm ------------------------------------------------- */
  [style*="padding: 150px"] { padding-top: 76px !important; padding-bottom: 76px !important; }
  [style*="padding:130px"],
  [style*="padding: 130px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding:120px"],
  [style*="padding: 120px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding:110px"],
  [style*="padding: 110px"] { padding-top: 68px !important; padding-bottom: 68px !important; }
  [style*="padding:96px"],
  [style*="padding: 96px"] { padding-top: 64px !important; }
  [style*="padding:170px"],
  [style*="padding: 170px"] { padding-top: 116px !important; padding-bottom: 64px !important; }
  [style*="padding:168px"],
  [style*="padding: 168px"] { padding-top: 112px !important; padding-bottom: 56px !important; }

  /* ---- grids collapse -------------------------------------------------- */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  /* ---- gaps ------------------------------------------------------------ */
  [style*="gap:72px"],
  /* ---- gaps ------------------------------------------------------------ */
  [style*="gap: 72px"],
  [style*="gap:64px"],
  [style*="gap: 64px"],
  [style*="gap:60px"],
  [style*="gap: 60px"],
  [style*="gap:56px"],
  [style*="gap: 56px"],
  [style*="gap:48px"],
  [style*="gap: 48px"],
  [style*="gap:44px"],
  [style*="gap: 44px"],
  [style*="gap:40px"],
  [style*="gap: 40px"] { gap: 26px !important; }

  /* ---- type ------------------------------------------------------------ */
  h1 { font-size: clamp(1.75rem, 8.2vw, 2.25rem) !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; }
  h2 { font-size: clamp(1.5rem, 6.6vw, 1.85rem) !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; }
  h3 { font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important; line-height: 1.25 !important; }
  /* body + inline scale: one step down from desktop */
  :is(
    [style*="font-size:clamp(1.5rem"],
    [style*="font-size: clamp(1.5rem"],
    [style*="font-size:clamp(1.6rem"],
    [style*="font-size: clamp(1.6rem"],
    [style*="font-size:clamp(1.7rem"],
    [style*="font-size: clamp(1.7rem"],
    [style*="font-size:clamp(1.9rem"],
    [style*="font-size: clamp(1.9rem"],
    [style*="font-size:clamp(2rem"],
    [style*="font-size: clamp(2rem"],
    [style*="font-size:clamp(2.1rem"],
    [style*="font-size: clamp(2.1rem"],
    [style*="font-size:clamp(2.2rem"],
    [style*="font-size: clamp(2.2rem"],
    [style*="font-size:clamp(2.4rem"],
    [style*="font-size: clamp(2.4rem"],
    [style*="font-size:clamp(2.5rem"],
    [style*="font-size: clamp(2.5rem"]
  ):not(h1):not(h2):not(h3) { font-size: 20px !important; line-height: 1.25 !important; }
  [style*="font-size:24px"],
  [style*="font-size: 24px"],
  [style*="font-size:23px"],
  [style*="font-size: 23px"],
  [style*="font-size:22px"],
  [style*="font-size: 22px"] { font-size: 19px !important; }
  [style*="font-size:21px"],
  [style*="font-size: 21px"],
  [style*="font-size:20px"],
  [style*="font-size: 20px"],
  [style*="font-size:19px"],
  [style*="font-size: 19px"] { font-size: 16px !important; }
  [style*="font-size:18px"],
  [style*="font-size: 18px"],
  [style*="font-size:17px"],
  [style*="font-size: 17px"] { font-size: 15px !important; }
  [style*="font-size:16px"],
  [style*="font-size: 16px"],
  [style*="font-size:15px"],
  [style*="font-size: 15px"] { font-size: 14px !important; }
  [style*="font-size:14px"],
  [style*="font-size: 14px"] { font-size: 13px !important; }
  [style*="font-size:13px"],
  [style*="font-size: 13px"] { font-size: 12px !important; }
  [style*="font-size:58cqw"],
  [style*="font-size: 58cqw"] { font-size: 34cqw !important; }
  [style*="padding-top:40cqw"],
  [style*="padding-top: 40cqw"] { padding-top: 26cqw !important; }
  /* ---- flex rows that must not squeeze --------------------------------- */
  [style*="justify-content:space-between"],
  /* ---- flex rows that must not squeeze --------------------------------- */
  [style*="justify-content: space-between"] { flex-wrap: wrap; }
  [style*="width:max-content"],
  [style*="width: max-content"] { flex-wrap: nowrap !important; }
  [style*="animation:marquee"],
  [style*="animation: marquee"],
  [style*="animation:marquee"] > div,
  [style*="animation: marquee"] > div { flex-wrap: nowrap !important; }
  /* ---- fixed-width blocks --------------------------------------------- */
  [style*="width:280px"][style*="mask-image:url"],
  /* ---- fixed-width blocks --------------------------------------------- */
  [style*="width: 280px"][style*="mask-image: url"] { width: 190px !important; height: 38px !important; margin-bottom: 44px !important; }
  [style*="position:sticky"],
  [style*="position: sticky"] { position: static !important; }

  /* ---- nav ------------------------------------------------------------- */
  nav { gap: 0 !important; justify-content: space-between !important; padding-left: 20px !important; padding-right: 20px !important; }
  [data-nav="links"], [data-nav="cta"] { display: none !important; }
  [data-nav="burger"] { display: flex !important; }

  /* ---- homepage hero --------------------------------------------------- */
  [data-hero-section="1"] { min-height: 0 !important; }
  [data-hero="subject"] { height: 280px !important; margin-top: 8px !important; }
  [data-hero="container"] { transform: rotateX(10deg) rotateY(-26deg) scale(0.58) !important; }
  [data-hero="glow"] { width: 620px !important; height: 520px !important; right: -18% !important; }
  [data-hero-section="1"] h1 { font-size: 40px !important; }
  [data-hero="reflect"] { display: none !important; }

  [data-agent-shot="1"] { display: none !important; }
  [data-agent-grid="1"] { display: none !important; }
  [data-agent-rail="1"] { display: flex !important; margin-inline: -20px !important; padding: 0 20px 6px !important; scroll-padding-left: 20px !important; }
  [data-agent-rail="1"]::-webkit-scrollbar { display: none; }

  /* ---- the full flow: swap pinned scroll for a stacked list ------------ */
  [data-flow="1"] { display: none !important; }
  [data-flow-mobile="1"] { display: flex !important; border-top: 0 !important; }
  [data-flow-mobile="1"] > div { padding: 40px 0 !important; }
  [data-flow-mobile="1"] > div:first-child { padding-top: 0 !important; }
  [data-flow-mobile="1"] > div > div:first-child { margin-bottom: 20px !important; }
  [data-flow-mobile="1"] > div > div:nth-child(2) { font-size: 21px !important; line-height: 1.25 !important; margin-bottom: 16px !important; }
  [data-flow-mobile="1"] p { font-size: 14px !important; line-height: 1.75 !important; margin-bottom: 28px !important; }
  [data-flow-mobile="1"] > div > div:last-child { gap: 10px !important; padding-top: 4px !important; flex-wrap: nowrap !important; align-items: baseline !important; }
  [data-flow-mobile="1"] > div > div:last-child > div:first-child {
    font-family: ui-monospace, Menlo, monospace !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important;
    color: #00A63D !important; -webkit-text-fill-color: #00A63D !important;
    background: none !important; white-space: nowrap !important;
  }
  [data-flow-mobile="1"] > div > div:last-child > div:last-child {
    font-size: 13px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important;
  }
  [data-flow-mobile="1"] > div:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
  [data-flow-mobile="1"] + div { margin-top: 44px !important; padding-top: 44px !important; }

  [data-hero-shot="1"] { margin-top: 34px !important; padding-bottom: 34px !important; }

  [data-geo="map"] { display: none !important; }
  [data-geo="line"] { display: flex !important; }

  /* ---- how we work rows: compact -------------------------------------- */
  [data-howwork="1"][data-cols] { grid-template-columns: 30px 1fr !important; gap: 4px 14px !important; padding: 16px 0 !important; align-items: baseline !important; }
  [data-howwork="1"] > div:first-child { grid-row: 1 !important; font-size: 11px !important; }
  [data-howwork="1"] > div:nth-child(2) { grid-column: 2 !important; font-size: 16px !important; }
  [data-howwork="1"] > p { grid-column: 2 !important; font-size: 13px !important; line-height: 1.6 !important; max-width: none !important; }

  /* ---- principles rows: compact --------------------------------------- */
  [data-principle="1"][data-split] { grid-template-columns: 30px 1fr !important; gap: 4px 14px !important; padding: 16px 0 !important; align-items: baseline !important; }
  [data-principle="1"] > div:first-child { grid-row: 1 !important; font-size: 12px !important; }
  [data-principle="1"] > div:nth-child(2) { grid-column: 2 !important; font-size: 16px !important; }
  [data-principle="1"] > p { grid-column: 2 !important; font-size: 13px !important; line-height: 1.55 !important; }

  /* ---- trusted-by strip ------------------------------------------------ */
  [data-trusted="1"] {
    height: auto !important; flex-direction: column !important;
    align-items: stretch !important; gap: 26px !important;
    padding: 22px 0 !important;
  }
  [data-trusted="label"] { font-size: 12px !important; font-weight: 400 !important; text-align: center !important; padding: 0 16px !important; }
  [data-trusted="track"] {
    width: 100% !important; flex: none !important;
    -webkit-mask-image: none !important; mask-image: none !important;
  }
  [data-trusted="track"] > div,
  [data-trusted="track"] > div > div { gap: 44px !important; }
  [data-trusted="track"] img { height: 26px !important; }
  [data-trusted="track"] img[alt="Tecumseh"] { height: 20px !important; }
  [data-trusted="track"] img[alt="KCA Lines"] { height: 29px !important; }

  /* ---- product pages: compact section blocks --------------------------- */
  /* the problem — tight numbered rows */
  [data-prod-problem="1"] > div { padding: 14px 0 !important; gap: 14px !important; align-items: flex-start !important; }
  [data-prod-problem="1"] > div > div { font-size: 15px !important; line-height: 1.4 !important; max-width: none !important; font-weight: 500 !important; }
  [data-prod-problem="1"] > div > span { font-size: 10px !important; line-height: 1.9 !important; }

  /* why Jettt <product> — icon + title on one line, copy underneath */
  [data-prod-why="1"] > div { display: block !important; padding: 16px 0 !important; }
  [data-prod-why="1"] > div > div { gap: 12px !important; align-items: flex-start !important; }
  [data-prod-why="1"] > div > div > svg { width: 22px !important; height: 22px !important; margin-top: 0 !important; }
  [data-prod-why="1"] > div > p { margin: 8px 0 0 34px !important; font-size: 13px !important; line-height: 1.55 !important; max-width: none !important; }
  [data-prod-why="1"] > div > div > div { font-size: 15px !important; line-height: 1.35 !important; }
  
  /* AI in action — single column of thin rows */
  [data-prod-ai="1"] { display: block !important; }
  [data-prod-ai="1"] > div { padding: 12px 0 !important; gap: 12px !important; font-size: 14px !important; }
  [data-prod-ai="1"] > div > span { font-size: 10px !important; }

  /* getting started / the engagement — 2-up compact cells */
  [data-prod-steps="1"], [data-prod-steps="dark"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-prod-steps="1"] > div, [data-prod-steps="dark"] > div { padding: 20px 14px !important; }
  [data-prod-steps="1"] > div > div:first-child,
  [data-prod-steps="dark"] > div > div:first-child { font-size: 22px !important; margin-bottom: 10px !important; }
  [data-prod-steps="1"] > div > div:nth-child(2),
  [data-prod-steps="dark"] > div > div:nth-child(2) { font-size: 14px !important; margin-bottom: 6px !important; }
  [data-prod-steps="1"] > div > p,
  [data-prod-steps="dark"] > div > p { font-size: 12px !important; line-height: 1.5 !important; max-width: none !important; }

  /* the impact — 2-up metric grid */
  [data-prod-impact="1"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 22px 18px !important; }
  [data-prod-impact="1"] > div > div:first-child { font-size: 30px !important; }
  [data-prod-impact="1"] > div > div:last-child { margin-top: 8px !important; font-size: 12px !important; line-height: 1.45 !important; max-width: none !important; }
  [data-prod-impact="1"] ~ p { margin-top: 26px !important; }

  /* headings directly above these blocks */
  div:has(> [data-prod-why="1"]) > h2,
  div:has(> [data-prod-ai="1"]) > h2,
  div:has(> [data-prod-steps="1"]) > h2,
  div:has(> [data-prod-steps="dark"]) > h2,
  div:has(> [data-prod-impact="1"]) > h2 { margin-bottom: 26px !important; }
  /* uniform eyebrow → title gap (matches homepage's 28px) */
  [data-px="lag"] { margin-bottom: 28px !important; }
  /* core features — uniform: eyebrow, title, description, bullets, image */
  [data-prod-feature="1"],
  [data-prod-feature="flip"] {
    display: flex !important; flex-direction: column !important; gap: 26px !important;
    padding: 0 0 40px !important; margin-bottom: 40px !important;
  }
  [data-prod-feature="flip"] > div:first-child { order: 2; }
  [data-prod-feature="flip"] > div:last-child { order: 1; }
  [data-prod-feature="1"] > div,
  [data-prod-feature="flip"] > div { min-width: 0 !important; }
  [data-prod-feature="1"] > div > div:first-child,
  [data-prod-feature="flip"] > div > div:first-child { margin-bottom: 18px !important; }
  [data-prod-feature="1"] h3,
  [data-prod-feature="flip"] h3 { margin: 0 0 14px !important; max-width: none !important; font-size: 19px !important; line-height: 1.2 !important; }
  [data-prod-feature="1"] > div > p,
  [data-prod-feature="flip"] > div > p { margin: 0 0 22px !important; max-width: none !important; font-size: 14px !important; line-height: 1.55 !important; }
  [data-prod-feature="1"] > div > div:last-child,
  [data-prod-feature="flip"] > div > div:last-child { gap: 12px !important; }
  [data-prod-feature="1"] > div > div:last-child > div,
  [data-prod-feature="flip"] > div > div:last-child > div { font-size: 13px !important; line-height: 1.45 !important; gap: 8px !important; }
  /* headings above the feature list */
  div:has(> [data-prod-feature]) > h2 { margin-bottom: 52px !important; }

}

@media (max-width: 520px) {
  section, footer, header { padding-left: 16px !important; padding-right: 16px !important; }
  [data-agent-rail="1"] { margin-inline: -16px !important; padding: 0 16px 6px !important; scroll-padding-left: 16px !important; }
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 767px) {
  /* ---- on every device: pills stack in flow above the artwork ---------- */
  .anno-wrap { display: none !important; }
  .anno { position: static !important; }
  .anno-line { display: none !important; }
  [data-hand-scene="1"] { min-height: 0 !important; padding-bottom: 0 !important; }
  [data-hand-stage="1"] { height: 866px !important; }
  .anno-pill {
    opacity: 1 !important; transform: none !important; transition: none !important;
    align-items: center !important; text-align: center !important;
    padding: 6px 13px !important; gap: 1px !important; min-width: 0 !important; width: auto !important;
    box-shadow: none !important;
  }
  .anno-pill > span { font-size: 8px !important; letter-spacing: 0.12em !important; }
  .anno-pill > span:last-child { font-size: 11px !important; letter-spacing: 0 !important; white-space: nowrap !important; }
  [data-hand-stage="1"] > [data-land="phone"] { top: 0 !important; transform: none !important; }
  [data-hand-stage="1"] > [data-land="hand"] { top: 56px !important; transform: none !important; }
  [data-hand-stage="1"] > div[style*="top:806px"] { top: 806px !important; }

  /* ---- integrations: category label as its own row, logos 2-up -------- */
  [data-logo-edit] > div { display: block !important; border-bottom: 0 !important; }
  [data-logo-edit] > div > div:first-child {
    border-right: 0 !important; border-bottom: 1px solid #DDDAD4 !important;
    padding: 22px 0 !important;
  }
  [data-logo-edit] { border-left: 1px solid #DDDAD4 !important; border-right: 1px solid #DDDAD4 !important; }
  [data-logo-edit] > div > div:first-child { padding-left: 16px !important; }
  [data-logo-edit] > div > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    background-image:
      repeating-linear-gradient(to bottom, transparent 0 103px, #DDDAD4 103px 104px),
      linear-gradient(to right, transparent calc(50% - 0.5px), #DDDAD4 calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  }
  [data-logo-edit] .logo-cell { height: 104px !important; border: 0 !important; }
  [data-logo-edit] .logo-spacer { display: none !important; }
}

@media (max-width: 767px) {
  /* ---- testimonials: compact card -------------------------------------- */
  [data-tcard="1"] { padding: 26px 22px !important; }
  [data-tcard="head"] { padding-bottom: 18px !important; margin-bottom: 22px !important; gap: 10px !important; }
  [data-tcard="quote"] { margin-bottom: 26px !important; font-size: 18px !important; line-height: 1.4 !important; max-width: none !important; }
  [data-tcard="foot"] { gap: 22px !important; }
  [data-tcard="metrics"] { gap: 18px !important; }
  [data-tcard="metrics"] > div > div:first-child { font-size: 26px !important; }
  [data-tcard="metrics"] > div > div:last-child { margin-top: 6px !important; }

  /* ---- faq: compact rows ---------------------------------------------- */
  [data-faq="head"] { margin-bottom: 32px !important; }
  [data-faq="row"] { padding: 18px 0 !important; }
  [data-faq="q"] { font-size: 16px !important; line-height: 1.35 !important; min-width: 0 !important; }
  [data-faq="bar"] { flex-wrap: nowrap !important; gap: 18px !important; align-items: flex-start !important; }
  [data-faq="icon"] { flex: none !important; font-size: 18px !important; line-height: 1.2 !important; }
  [data-faq="a"] { font-size: 14px !important; margin-top: 12px !important; }
}

@media (max-width: 767px) {
  /* ---- capabilities rows: compact, left-aligned impact ----------------- */
  [data-cap="row"] { padding: 16px 0 !important; gap: 6px !important; }
  [data-cap="impact"] { text-align: left !important; flex: 1 1 100% !important; font-size: 13px !important; line-height: 1.4 !important; padding-top: 4px !important; }
  [data-cap="row"] > div:first-child > div:last-child { margin-top: 5px !important; }
}

@media (max-width: 767px) {
  /* ---- insights case studies: plain stacked cards ---------------------- */
  .case-stack { display: flex !important; flex-direction: column !important; gap: 20px !important; }
  .case-panel { position: static !important; height: auto !important; top: auto !important; transform: none !important; filter: none !important; animation: none !important; }
  .case-gap { display: none !important; }
  .case-panel > div:first-child { aspect-ratio: 16 / 10 !important; }
  .case-panel > div:last-child { padding: 24px 20px !important; }
  .case-panel > div:last-child > div:first-child { margin-bottom: 14px !important; }
  .case-panel h3 { margin-bottom: 14px !important; max-width: none !important; }
  .case-panel p { margin-bottom: 22px !important; max-width: none !important; }
  .case-panel > div:last-child > div:nth-child(2) { margin-bottom: 10px !important; }
  .case-panel [style*="grid-template-columns:repeat(3"],
  .case-panel [style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 12px !important; padding-bottom: 20px !important;
  }
  .case-panel [style*="font-size:34px"],
  .case-panel [style*="font-size: 34px"] { font-size: 22px !important; }
  .case-panel [style*="margin-top:30px"],
  .case-panel [style*="margin-top: 30px"] { margin-top: 18px !important; }
}

@media (max-width: 767px) {
  /* ---- footer: platform + company side by side ------------------------- */
  [data-footer="cols"] { grid-template-columns: 1fr 1fr !important; gap: 30px 20px !important; padding-bottom: 44px !important; }
  [data-footer="cols"] > div { gap: 11px !important; }
  [data-footer="cols"] > div:last-child { grid-column: 1 / -1 !important; }
}

/* ============================================================
   TABLET — 768px to 1180px. Desktop rendering above 1180px is
   untouched; the phone layer now ends at 767px.
   ============================================================ */
@media (min-width: 768px) and (max-width: 1180px) {
  html, body { overflow-x: clip !important; }
  img, svg, video, canvas { max-width: 100%; }

  /* ---- gutters + containers -------------------------------------------- */
  section, footer, header { padding-left: 40px !important; padding-right: 40px !important; }
  [style*="max-width:1180px"],
  [style*="max-width: 1180px"],
  [style*="max-width:1100px"],
  [style*="max-width: 1100px"],
  [style*="max-width:1080px"],
  [style*="max-width: 1080px"],
  [style*="max-width:1000px"],
  [style*="max-width: 1000px"],
  [style*="max-width:980px"],
  [style*="max-width: 980px"],
  [style*="max-width:960px"],
  [style*="max-width: 960px"],
  [style*="max-width:900px"],
  [style*="max-width: 900px"] { max-width: 100% !important; }

  /* ---- vertical rhythm ------------------------------------------------- */
  [style*="padding:150px"],
  [style*="padding: 150px"] { padding-top: 104px !important; padding-bottom: 104px !important; }
  [style*="padding:130px"],
  [style*="padding: 130px"] { padding-top: 96px !important; padding-bottom: 96px !important; }
  [style*="padding:120px"],
  [style*="padding: 120px"] { padding-top: 88px !important; padding-bottom: 88px !important; }
  [style*="padding:110px"],
  [style*="padding: 110px"] { padding-top: 80px !important; padding-bottom: 80px !important; }
  [style*="padding:96px"],
  [style*="padding: 96px"] { padding-top: 76px !important; }
  [style*="padding:170px"],
  [style*="padding: 170px"] { padding-top: 132px !important; padding-bottom: 96px !important; }
  [style*="padding:168px"],
  [style*="padding: 168px"] { padding-top: 128px !important; padding-bottom: 80px !important; }

  /* ---- gaps ------------------------------------------------------------ */
  [style*="gap:80px"],
  [style*="gap: 80px"],
  [style*="gap:72px"],
  [style*="gap: 72px"],
  [style*="gap:64px"],
  [style*="gap: 64px"],
  [style*="gap:60px"],
  [style*="gap: 60px"],
  [style*="gap:56px"],
  [style*="gap: 56px"] { gap: 44px !important; }

  /* ---- type ------------------------------------------------------------ */
  h1 { font-size: clamp(2.4rem, 5.6vw, 3.4rem) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(1.9rem, 4.2vw, 2.7rem) !important; line-height: 1.08 !important; }
  h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem) !important; line-height: 1.2 !important; }

  /* ---- grids ----------------------------------------------------------- */
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [style*="grid-template-columns:repeat(5"],
  [style*="grid-template-columns: repeat(5"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  [style*="position:sticky"],
  [style*="position: sticky"] { position: static !important; }

  /* ---- trusted strip: keep the horizontal marquee, smaller marks ------- */
  [data-trusted="1"] { height: 88px !important; gap: 32px !important; }
  [data-trusted="track"] > div,
  [data-trusted="track"] > div > div { gap: 56px !important; }
  [data-trusted="track"] img { height: 32px !important; }
  [data-trusted="track"] img[alt="Tecumseh"] { height: 24px !important; }
  [data-trusted="track"] img[alt="KCA Lines"] { height: 35px !important; }

  /* ---- product pages --------------------------------------------------- */
  [data-prod-problem="1"] > div { padding: 22px 0 !important; }
  [data-prod-problem="1"] > div > div { max-width: none !important; font-size: 18px !important; }
  [data-prod-why="1"] > div { gap: 32px !important; padding: 26px 0 !important; }
  [data-prod-why="1"] > div > p { max-width: none !important; }
  [data-prod-ai="1"] { column-gap: 44px !important; }
  [data-prod-steps="1"] > div,
  [data-prod-steps="dark"] > div { padding: 32px 24px !important; }
  [data-prod-steps="1"] > div > p,
  [data-prod-steps="dark"] > div > p { max-width: none !important; }
  [data-prod-impact="1"] > div > div:last-child { max-width: none !important; }
  [data-prod-feature="1"],
  [data-prod-feature="flip"] { align-items: start !important; }
  [data-prod-feature="1"] h3,
  [data-prod-feature="flip"] h3 { max-width: none !important; }
  [data-prod-feature="1"] > div > p,
  [data-prod-feature="flip"] > div > p { max-width: none !important; }

  /* ---- ai in action: same swipe rail as mobile, two cards in view ------ */
  [data-agent-shot="1"] { display: none !important; }
  [data-agent-grid="1"] { display: none !important; }
  [data-agent-rail="1"] {
    display: flex !important; gap: 20px !important;
    margin-inline: -40px !important; padding: 0 40px 8px !important;
    scroll-padding-left: 40px !important;
  }
  [data-agent-rail="1"]::-webkit-scrollbar { display: none; }
  [data-agent-rail="1"] > div { flex: 0 0 52% !important; }

  /* ---- three products: single-column rows, art beside the copy -------- */
  [data-products="grid"] { grid-template-columns: 1fr !important; gap: 20px !important; }
  [data-products="grid"] > div {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 300px !important;
    grid-template-rows: auto auto auto 1fr !important;
    column-gap: 32px !important; align-items: start !important;
    padding: 28px 0 28px 28px !important;
  }
  [data-products="grid"] > div > div:first-child { grid-area: 1 / 1 !important; margin-bottom: 18px !important; }
  [data-products="grid"] > div > div:nth-child(2) { grid-area: 2 / 1 !important; }
  [data-products="grid"] > div > p { grid-area: 3 / 1 !important; margin-bottom: 18px !important; font-size: 14px !important; }
  [data-products="grid"] > div > a { grid-area: 4 / 1 !important; align-self: start !important; margin-bottom: 0 !important; }
  [data-products="grid"] > div > div:last-child {
    grid-area: 1 / 2 / -1 / 3 !important; align-self: stretch !important;
    height: auto !important; min-height: 0 !important; margin: 0 0 -28px !important;
  }

  /* ---- solutions cards: 2-up, third spans with a two-column link list -- */
  [data-solutions="grid"] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 20px !important; }
  [data-solutions="grid"] > div { padding: 30px 26px !important; }
  [data-solutions="grid"] > div > div:first-of-type { font-size: 19px !important; margin-bottom: 10px !important; }
  [data-solutions="grid"] > div > p { margin-bottom: 22px !important; font-size: 14px !important; }
  [data-solutions="grid"] > div a { font-size: 14px !important; padding: 13px 0 !important; gap: 12px !important; }
  [data-solutions="grid"] > div:nth-child(3) { grid-column: 1 / -1 !important; }
  [data-solutions="grid"] > div:nth-child(3) > div:last-child {
    display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 32px !important;
  }

  /* ---- faq ------------------------------------------------------------- */
  [data-faq="head"] { margin-bottom: 44px !important; }
  [data-faq="row"] { padding: 24px 0 !important; }
  [data-faq="a"] { max-width: none !important; }

  /* ---- case studies: keep the sticky card stack, scaled for tablet ----- */
  .case-panel { height: auto !important; min-height: 470px !important; }
  .case-gap { height: 34vh !important; }
  .case-track:nth-child(1) .case-panel { top: 80px !important; }
  .case-track:nth-child(2) .case-panel { top: 98px !important; }
  .case-track:nth-child(3) .case-panel { top: 116px !important; }

  /* ---- on every device: pill row in flow, artwork pushed clear of it --- */
  [data-hand-stage="1"] { height: 1050px !important; }
  .anno-wrap {
    position: static !important; display: flex !important; flex-wrap: wrap !important;
    justify-content: center !important; align-items: flex-start !important;
    gap: 18px !important; margin: 0 0 20px !important; inset: auto !important;
    pointer-events: auto !important;
  }
  .anno { position: static !important; }
  .anno-line { display: none !important; }
  .anno-pill {
    opacity: 1 !important; transform: none !important; transition: none !important;
    align-items: center !important; text-align: center !important;
    padding: 10px 26px !important; min-width: 0 !important; width: auto !important;
  }
  .anno-pill > div:first-child { font-size: 10px !important; margin-bottom: 3px !important; }
  .anno-pill > div:last-child { font-size: 14px !important; white-space: nowrap !important; }
  [data-hand-stage="1"] > [data-land="phone"] { top: 170px !important; transform: none !important; }
  [data-hand-stage="1"] > [data-land="hand"] { top: 226px !important; transform: none !important; }
  [data-hand-stage="1"] > div[style*="top:806px"] { top: 976px !important; }
  [data-hand-scene="1"] { min-height: 0 !important; padding-bottom: 0 !important; }

  /* ---- integrations: 3-up logo grid ----------------------------------- */
  /* rules are painted by the grid container, so half-empty rows stay closed */
  [data-logo-edit] { border-left: 1px solid #DDDAD4 !important; border-right: 1px solid #DDDAD4 !important; border-top: 0 !important; border-bottom: 1px solid #DDDAD4 !important; }
  [data-logo-edit] > div { border-bottom: 0 !important; }
  [data-logo-edit] .logo-cell { height: 132px !important; border: 0 !important; }
  [data-logo-edit] .logo-spacer { display: none !important; }
  [data-logo-edit] > div > div:first-child {
    align-self: stretch !important; border-top: 1px solid #DDDAD4 !important;
    border-bottom: 0 !important; padding-left: 16px !important;
  }
  [data-logo-edit] > div > div:last-child {
    background-image:
      repeating-linear-gradient(to bottom, #DDDAD4 0 1px, transparent 1px 132px),
      linear-gradient(#DDDAD4, #DDDAD4),
      linear-gradient(#DDDAD4, #DDDAD4) !important;
    background-size: 100% 100%, 1px 100%, 1px 100% !important;
    background-position: 0 0, 33.333% 0, 66.666% 0 !important;
    background-repeat: no-repeat !important;
  }
}

/* ---- small tablet / portrait: stack the wide two-column blocks -------- */
@media (min-width: 768px) and (max-width: 1023px) {
  nav { gap: 0 !important; justify-content: space-between !important; }
  [data-nav="links"], [data-nav="cta"] { display: none !important; }
  [data-nav="burger"] { display: flex !important; }

  .case-panel { grid-template-columns: 0.85fr 1.15fr !important; }
  [style*="grid-template-columns:0.85fr"],
  [style*="grid-template-columns: 0.85fr"],
  [style*="grid-template-columns:0.9fr"],
  [style*="grid-template-columns: 0.9fr"] { grid-template-columns: 1fr !important; }

  /* pinned / scroll-driven scenes fall back to their stacked variants */
  [data-flow="1"] { display: none !important; }
  [data-flow-mobile="1"] { display: flex !important; border-top: 0 !important; }
  [data-flow-mobile="1"] > div { padding: 26px 0 !important; }
  [data-flow-mobile="1"] > div:first-child { padding-top: 0 !important; }
  [data-flow-mobile="1"] > div > div:first-child { margin-bottom: 14px !important; }
  [data-flow-mobile="1"] > div > div:nth-child(2) { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 10px !important; }
  [data-flow-mobile="1"] p { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 16px !important; max-width: 62ch !important; }
  [data-flow-mobile="1"] > div > div:last-child { gap: 10px !important; padding-top: 0 !important; flex-wrap: nowrap !important; align-items: baseline !important; }
  [data-flow-mobile="1"] > div > div:last-child > div:first-child {
    font-family: ui-monospace, Menlo, monospace !important;
    font-size: 13px !important; font-weight: 600 !important;
    letter-spacing: 0.04em !important; text-transform: uppercase !important;
    color: #00A63D !important; -webkit-text-fill-color: #00A63D !important;
    background: none !important; white-space: nowrap !important;
  }
  [data-flow-mobile="1"] > div > div:last-child > div:last-child {
    font-size: 13px !important; letter-spacing: 0.04em !important; line-height: 1.3 !important;
  }
  [data-flow-mobile="1"] > div > div[style*="aspect-ratio"] { aspect-ratio: 16 / 7 !important; margin-bottom: 16px !important; }
  /* shift the crop upward so faces stay in frame (step 08 keeps its framing) */
  [data-flow-mobile="1"] > div:not(:nth-child(8)) > div[style*="aspect-ratio"] img { object-position: 50% 18% !important; }
  [data-flow-mobile="1"] > div:nth-child(3) > div[style*="aspect-ratio"] img,
  [data-flow-mobile="1"] > div:nth-child(5) > div[style*="aspect-ratio"] img,
  [data-flow-mobile="1"] > div:nth-child(7) > div[style*="aspect-ratio"] img { object-position: 50% 32% !important; }
  [data-flow-mobile="1"] > div:nth-child(6) > div[style*="aspect-ratio"] img { object-position: 50% 83% !important; }
  [data-flow-mobile="1"] > div:nth-child(1) > div[style*="aspect-ratio"] img { object-position: 70% 30% !important; }
  [data-flow-mobile="1"] > div:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; }
  [data-flow-mobile="1"] + div { margin-top: 36px !important; padding-top: 36px !important; }

  [data-hero="container"] { transform: rotateX(10deg) rotateY(-24deg) scale(0.78) !important; }
  [data-hero="subject"] { height: 420px !important; }
  /* keep the reflection's left edge on the scaled container's left edge */
  [data-hero="reflect"] { width: 296px !important; margin-left: -164px !important; }
}