/* ═══════════════════════════════════════════════════════════
   TABLET (761–1000px) — line breaks + measure
   Desktop copy carries hand-placed <br>s and narrow ch/px
   measures tuned for 1440px. On tablet those break lines early
   and leave text in a column much narrower than its section.
   This layer drops the manual breaks and lets copy fill the
   section width. Load LAST.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:521px) and (max-width:1000px){

/* ── 1 · No hand-placed line breaks in headings, leads or CTA copy ── */
.hero-title br, .hero-sub br, .hero-overlay .hero-sub br,
.bf-title br, .bf-sub br, .bf-copy h3 br, .bf-copy p br, .bf-lead h3 br, .bf-lead p br,
.p-title br, .p-lead p br, .p-row-copy p br, .p-head p br,
.di-h2 br, .di-lead br, .di-split-head .di-lead br, .di-split-body p br,
.di-cta-card h2 br, .di-cta-card p br, .di-mission h2 br, .di-mission .mission-lead br,
.ab-pat-title br, .ab-pat-heading br, .ab-pat-desc br, .ab-pat-foot br,
.ab-prose p br, .ab-mission .mission-lead br, .ab-goal p br, .ab-team-desc p br,
.aomt-title br, .aomt-heading br, .aomt-body p br, .aomt-quote br,
.arch-h1 br, .arch-lead br, .dsrc-h1 br, .dsrc-lead br, .dsrc-foot p br,
.itfaq-title br, .itfaq-sub br, .blog-title br, .blog-sub br,
.included-title br, .included-sub br, .inc-feature h2 br, .inc-feature p br,
.intg-heading br, .intg-sub br, .intg-desc br,
.oc-title br, .oc-heading br, .oc-lead br, .oc-clarity h3 br, .oc-clarity p br,
.tb-solo-title br, .tbento-title br, .tb-cta-card h2 br, .tb-card-solo blockquote br,
.rollout-cta h3 br, .rollout-cta p br,
.pulse-cta-copy h2 br, .pulse-cta-copy p br,
.pulse-discover-copy h2 br, .pulse-discover-copy p br,
.pulse-hero-inner > h1 br, .pulse-hero-inner > .lede br,
.mod-feature-title br, .mod-feature-desc br, .mod-detail-desc br,
.bolton-block h3 br, .bolton-block p br, .bolton-panel-desc p br,
.bl-hero h1 br, .bl-hero p br, .bl-feat-body p br, .bl-card p br, .bl-news-card p br,
.faq-hero h1 br, .faq-hero p br, .faq-still p br,
.ct-hero-copy h1 br, .ct-hero-copy p br, .ct-step p br, .ct-col-body p br,
.ar-head h1 br, .ar-head .ar-dek br,
.logos-lead br, .fm-lead br{ display:none !important; }

/* ── 2 · Copy fills its section instead of sitting in a 1440px-tuned column ── */
.hero-overlay .hero-title, .hero-overlay .hero-sub, .hero-title, .hero-sub,
.bf-head, .bf-sub, .bf-lead, .bf-lead p, .bf-lead h3, .bf-copy p,
.beacon-fit .bf-sub, .beacon-fix .bf-lead p, .beacon-fix .bf-copy p,
.di .beacon-fit .bf-sub, .di .beacon-fit .bf-head,
.p-head, .p-lead, .p-row-copy p, .p-ph-sub,
.di-lead, .ct-direct .di-lead, .ct-hero-copy p, .ct-step p,
.ab-prose p, .ab-tl-panel p, .ab-pat-title, .ab-pat-heading, .ab-pat-desc, .ab-goal p,
.di .ab-hero .hero-sub,
.modules h2, .modules-headline, .glance h2, .glance .fm-lead,
.module p, .mod-feature-desc, .mod-detail .mod-feature-desc,
.arch-lead, .dsrc-lead, .dsrc-foot p, .itfaq-sub, .blog-sub, .blog .blog-sub,
.intg-desc, .integrated .intg-desc, .intg-head, .integrated .intg-head,
.oc-title, .oc-clarity p, .tbento-title, .test .quote,
.cta-card h2, .cta-card p, .pulse-cta-copy, .pulse-cta-copy p, .pulse-discover-copy,
.bolton .bf-sub, .bolton .bolton-panel-desc p,
.bl-hero h1, .bl-hero p, .bl-feat-body p, .bl-news-card p,
.faq-hero p, .faq-still p, .logos-lead, .di-logos .logos-lead{
  max-width:none !important;
}
/* long-form article copy keeps a readable measure, just wider */
.ar-body > p, .ar-body .lead, .ar-body ul li, .ar-body ol li, .ar-head .ar-dek{ max-width:68ch !important; }

/* ── 3 · Nicer rag now that the breaks are automatic ── */
.hero-title, .bf-title, .p-title, .di-h2, .di-cta-card h2, .aomt-title, .arch-h1,
.dsrc-h1, .itfaq-title, .blog-title, .included-title, .intg-heading, .oc-title,
.tb-solo-title, .tbento-title, .modules-headline, .ab-pat-title, .ab-pat-heading,
.pulse-cta-copy h2, .pulse-discover-copy h2, .mod-feature-title,
.bl-hero h1, .faq-hero h1, .ct-hero-copy h1, .ar-head h1{ white-space:normal !important; text-wrap:balance !important; }
/* desktop keeps these on one line with nowrap — tablet must let them wrap */
.hero-overlay .hero-title, .hero-overlay .hero-sub, .hero-title, .hero-sub,
.pulse-hero-inner > h1, .pulse-hero-inner > .lede,
.modules-headline, section.modules h2.modules-headline,
.bf-title, .beacon-fit .bf-title, .beacon-fix .bf-title{ white-space:normal !important; }
.hero-sub, .bf-sub, .bf-copy p, .bf-lead p, .di-lead, .p-lead p, .arch-lead, .dsrc-lead,
.itfaq-sub, .blog-sub, .oc-lead, .oc-clarity p, .included-sub, .intg-sub, .intg-desc,
.pulse-cta-copy p, .pulse-discover-copy p, .mod-feature-desc, .bolton-block p,
.ab-prose p, .ab-mission .mission-lead, .di-mission .mission-lead,
.bl-hero p, .faq-hero p, .ct-hero-copy p, .ar-body > p{ white-space:normal !important; text-wrap:pretty !important; }

}

/* ═══════════════════════════════════════════════════════════
   TABLET title scale — one size for every hero H1 and one for
   every section title (desktop mixes 34/36/40/54/62/74px, which
   at 761–1000px reads as five different scales).
   ═══════════════════════════════════════════════════════════ */
@media (min-width:521px) and (max-width:1000px){
  /* hero H1 */
  .hero-title, .hero-overlay .hero-title, .di .hero .hero-title, .di .ab-hero .hero-title,
  .pulse-hero h1, .pulse-hero-inner > h1, .sf-hero h1,
  .bl-hero h1, .faq-hero h1, .ct-hero-copy h1, .ar-head h1{
    font-size:46px !important; line-height:1.08 !important;
  }
  /* section titles */
  .bf-title, .p-title, .tb-solo-title, .tbento-title, .aomt-title, .aomt-heading,
  .arch-h1, .dsrc-h1, .blog-title, .itfaq-title, .included-title, .intg-heading,
  .oc-heading, .oc-title, .modules-headline, .ab-pat-heading, .ab-pat-title,
  .beacon-fit .bf-title, .beacon-fix .bf-title, .bolton .bf-title,
  .pulse-problem-tabs .bf-title, .di .beacon-fit .bf-title, .di .beacon-fix .bf-title,
  .p-works .p-title, .p-scale .p-title, .p-compare .p-title, .integrated .intg-heading,
  .modules h2, section.modules h2.modules-headline, .tests h2, .glance h2,
  .oc-clarity h3, .inc-feature h2, .tb-cta-card h2, .rollout-cta h3,
  .blog .blog-title, .ab-ua-copy .di-h2, .ab-mission h2,
  section .pulse-cta-card .pulse-cta-copy h2, section.pulse-discover .pulse-discover-copy h2,
  .pulse-cta-copy h2,
  .di-h2, .ab-pat-title, .di-mission h2, .di-outcomes .do-title, .di-cta-card h2,
  .pa-reveal-title, .di-rev h2, .di-rev .di-rev-left h2, .ar-rel h2{
    font-size:40px !important; line-height:1.1 !important;
  }
  /* deliberate sub-tier: panel / module headings sit one clear step below */
  .di .ab-time .ab-tl-panel h3, .ab-time .in h3, .mod-feature-title{
    font-size:32px !important; line-height:1.15 !important;
  }
}

/* ── Tablet: the outcomes grid goes single-column across the whole tablet
      range, so each card title fits on one line without its desktop break. ── */
@media (min-width:521px) and (max-width:1000px){
  .oc-scene .oc-grid{ grid-template-columns:1fr !important; grid-template-rows:none !important; }
  .oc-scene .oc-x{ transform:none !important; min-height:0 !important; grid-row:auto !important; grid-template-rows:auto 1fr auto auto !important; }
  .oc-scene .oc-x h3 .oc-br-d, .oc-scene .oc-x h3 .oc-br-m{ display:none !important; }
  .oc-scene .oc-x h3 .oc-sp-m{ display:inline !important; white-space:pre !important; }
  .oc-scene .oc-x h3{ white-space:nowrap !important; max-width:none !important; }
}

/* ── Tablet: breathing room under the product shot, and a smaller
      oversized lead title ("Meet Lizzie" / "Start with Beacon" / p-meet). ── */
@media (min-width:521px) and (max-width:1000px){
  .beacon-fix .bf-shot, .di .beacon-fix .bf-shot{ margin-bottom:56px !important; }
  .p-works .p-shot, .p-works .p-panel > figure{ margin-bottom:56px !important; }
  .bf-lead--meet .bf-num,
  .beacon-fix .bf-lead--meet .bf-num,
  .di .beacon-fix .bf-lead--meet .bf-num,
  .p-works .p-lead .p-meet .lizzie-bento{ font-size:clamp(32px,7.5vw,46px) !important; }
}

/* ── Tablet: CTA banner titles sit a step below section titles ── */
@media (min-width:521px) and (max-width:1000px){
  .rollout-cta h3, .tb-cta-card h2, .di-cta-card h2,
  .pulse-cta-copy h2, .pulse-discover-copy h2,
  section .pulse-cta-card .pulse-cta-copy h2,
  section.pulse-discover .pulse-discover-copy h2,
  .cta-card h2, .bf-cta-card h2{ font-size:clamp(30px,4.6vw,36px) !important; line-height:1.14 !important; }
}

/* ── Tablet: hero titles fill the card width and wrap naturally
      (greedy wrap, no balanced short lines, no hand-placed breaks) ── */
@media (min-width:521px) and (max-width:1000px){
  .hero-title, .hero-overlay .hero-title, .di .hero .hero-overlay .hero-title,
  .di .ab-hero .hero-title, .pulse-hero-inner > h1, .pulse-hero h1, .sf-hero h1,
  .bl-hero h1, .faq-hero h1, .ct-hero-copy h1, .ar-head h1{
    width:100% !important; max-width:none !important;
    white-space:normal !important; text-wrap:wrap !important; overflow-wrap:break-word;
  }
  .hero-title br, .hero-overlay .hero-title br,
  .di .hero .hero-overlay .hero-title br, .di .ab-hero .hero-title br,
  .pulse-hero-inner > h1 br, .bl-hero h1 br, .faq-hero h1 br,
  .ct-hero-copy h1 br, .ar-head h1 br{ display:none !important; }
}

/* ── Tablet: "Start with Beacon" / "Meet Lizzie" lead block reads left-aligned ── */
@media (min-width:521px) and (max-width:1000px){
  .bf-lead--meet, .bf-lead--meet *,
  .beacon-fix .bf-lead--meet, .beacon-fix .bf-lead--meet *,
  .di .beacon-fix .bf-lead--meet, .di .beacon-fix .bf-lead--meet *{ text-align:left !important; }
  .bf-lead--meet .bf-meet-l, .beacon-fix .bf-lead--meet .bf-meet-l, .di .beacon-fix .bf-lead--meet .bf-meet-l{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:16px !important; }
  .bf-lead--meet .bf-num, .beacon-fix .bf-lead--meet .bf-num, .di .beacon-fix .bf-lead--meet .bf-num{ width:100% !important; max-width:none !important; margin-inline:0 !important; }
}

/* ── Tablet: bolt-on block titles match the animated feature-row titles ── */
@media (min-width:521px) and (max-width:1000px){
  .bolton .bolton-block h3{ font-size:24px !important; line-height:1.2 !important; }
}

/* ── Tablet: "What's Included" bento titles read larger (feature card unchanged) ── */
@media (min-width:521px) and (max-width:1000px){
  .inc-bento .t-feat h3{ font-size:26px !important; line-height:1.15 !important; }
  .inc-bento .t-feat h3 br, .inc-bento .t-cust h3 br{ display:none !important; }
  .inc-bento .t-api h3{ white-space:nowrap !important; }
  .inc-bento .inc-tile:not(.t-feat) h3{ font-size:26px !important; line-height:1.15 !important; }
  .inc-bento .inc-sub{ font-size:14px !important; }
}

/* ── Tablet: timeline year numerals read larger ──
      (specificity must beat mobile-hero-about.css's .di .ab-time … rules) */
@media (min-width:521px) and (max-width:760px){
  /* folded into the single tablet scale below */
  .di .ab-time .ab-tl-panel .ab-tl-year, .ab-tl-panel .ab-tl-year{ font-size:clamp(72px,11vw,96px) !important; }
  .di .ab-time .ab-tl-panel h3, .ab-tl-panel h3{ font-size:clamp(36px,5.6vw,48px) !important; line-height:1.1 !important; }
}
@media (min-width:521px) and (max-width:1000px){
  .di .ab-time .ab-tl-panel .ab-tl-year, .ab-tl-panel .ab-tl-year{ font-size:clamp(96px,13vw,124px) !important; }
  .di .ab-time .ab-tl-panel h3, .ab-tl-panel h3{ font-size:clamp(48px,6.4vw,62px) !important; line-height:1.08 !important; }
}

/* ── Tablet: nudge the Barcelona map label left so it isn't clipped ── */
@media (min-width:521px) and (max-width:1000px){
  #abWorldMap .ab-map-label--barcelona{ transform:translateX(-34px); }
}

/* ── Tablet: the CIO illustration sits flush on the Integration block, with
      more air above it (stacked / reduced-motion rendering of the scene) ── */
@media (min-width:521px) and (max-width:1000px){
  .aomt-scene:not(.is-scenified) .aomt-sticky{ padding-bottom:0 !important; overflow:visible !important; }
  .aomt-scene:not(.is-scenified) .aomt-quote-img{ position:static !important; display:flex !important; justify-content:center !important; width:100% !important; transform:none !important; opacity:1 !important; margin:56px 0 0 !important; }
  .aomt-scene:not(.is-scenified) .aomt-quote-img img{ width:min(100%,380px) !important; }
}

/* ── Tablet: drop the standalone scene title and the air it sat in ── */
@media (min-width:521px) and (max-width:1000px){
  .aomt-scene:not(.is-scenified) .aomt-sticky{ padding-top:clamp(48px,6vw,72px) !important; min-height:0 !important; }
  /* the scene never plays its dark→light transition here, so start light */
  .aomt-scene .aomt-sticky{ background:#ffffff !important; }
  .aomt-scene:not(.is-scenified) .aomt-sticky{ padding-bottom:clamp(88px,10vw,128px) !important; }
  .aomt-scene .aomt-quote-img{ opacity:1 !important; }
}

/* ── Tablet: About page brand logos step down a size ── */
@media (min-width:521px) and (max-width:1000px){
  .ab-brands-row{ gap:20px !important; }
  .ab-logo-sony img{ height:54px !important; }
  .ab-logo-lh img{ height:27px !important; }
  .ab-logo-groupon img{ height:18px !important; }
  .ab-logo-xerox img{ height:18px !important; }
}

/* ═══ Article page — tablet ═══ */
@media (min-width:521px) and (max-width:1000px){
  /* cover image fills the section width */
  .ar-hero-img{ width:100% !important; max-width:none !important; height:auto !important; overflow:visible !important; margin:clamp(24px,4vw,40px) auto 0 !important; padding:0 var(--page-gutter) !important; box-sizing:border-box !important; }
  .ar-hero-img image-slot{ display:block !important; width:100% !important; aspect-ratio:16/9 !important; height:auto !important; border-radius:var(--r-xl,20px) !important; overflow:hidden !important; }
  .ar-hero-img image-slot::part(ring){ display:none !important; }
  .ar-cover{ width:100% !important; max-width:none !important; }

  /* "Keep reading" — same card treatment as the Blog page grid */
  .ar-rel.ar-wide{ max-width:none !important; padding-left:max(var(--page-gutter),24px) !important; padding-right:max(var(--page-gutter),24px) !important; }
  .ar-rel-grid{ grid-template-columns:repeat(3,1fr) !important; gap:clamp(20px,2.2vw,30px) !important; }
  .ar-rcard{ background:#f9f9f9 !important; border-radius:24px !important; overflow:hidden !important; box-shadow:none !important; }
  .ar-rcard-media{ margin:12px 12px 0 !important; border-radius:14px !important; aspect-ratio:16/11 !important; }
  .ar-rcard-body{ padding:16px 12px 18px 20px !important; gap:9px !important; }
  .ar-rcard h3{ font-size:24px !important; line-height:1.2 !important; }
  .ar-rcard .rmeta{ padding-top:16px !important; font-size:14px !important; }
}
/* ── Tablet: Discover band → inset rounded banner (same as mobile) ── */
@media (min-width:521px) and (max-width:1000px){
  section.pulse-discover{ background:transparent !important; min-height:0 !important; padding:clamp(28px,4vw,44px) var(--page-gutter) !important; }
  section.pulse-discover .pulse-discover-inner{ background:linear-gradient(100deg,#ff7a33 0%,#e5142a 68%,#ff6a1f 100%) !important; border-radius:24px !important; padding:clamp(28px,4vw,40px) clamp(24px,3.4vw,36px) !important; gap:22px !important; }
}

/* ── Tablet: product-page "How it works" rows stack — animation first, copy below ── */
@media (min-width:521px) and (max-width:1000px){
  .p-works .p-lead .p-lead-aside,
  .p-works .p-lead .p-lead-aside p{ text-align:left !important; }
  .p-works .p-rows .p-row{ display:grid !important; grid-template-columns:1fr !important; gap:clamp(18px,2.6vw,28px) !important; align-items:start !important; }
  .p-works .p-rows .p-row .p-row-art,
  .p-works .p-rows .p-row:nth-child(even) .p-row-art{ order:0 !important; width:100% !important; max-width:none !important; margin:0 !important; }
  .p-works .p-rows .p-row .p-row-copy,
  .p-works .p-rows .p-row:nth-child(even) .p-row-copy{ order:1 !important; max-width:none !important; }
}

/* ── Tablet: "Why not bolt on an AI" → stacked sections, image above copy, dividers ── */
@media (min-width:521px) and (max-width:1000px){
  .bolton .bolton-layout{ display:none !important; }
  .bolton .bolton-scroll{ height:auto !important; }
  .bolton .bolton-sticky{ position:static !important; min-height:0 !important; }
  .bolton .bolton-data{ display:flex !important; flex-direction:column !important; gap:0 !important; padding:8px 0 0 !important; max-width:860px; margin:0 auto; }
  .bolton .bolton-block{ display:flex !important; flex-direction:column !important; gap:14px !important; padding:clamp(32px,4.5vw,48px) 0 !important; }
  .bolton .bolton-block + .bolton-block{ border-top:1px solid rgba(17,17,17,.10) !important; }
  .bolton .bolton-block .bolton-block-img{ display:block !important; width:min(100%,300px); height:auto; margin:0 auto 4px !important; }
  .bolton .bolton-block h3{ font-size:26px !important; line-height:1.18 !important; margin:0 !important; }
  .bolton .bolton-block p{ font-size:17px !important; line-height:1.6 !important; margin:0 !important; color:var(--tx-2,#5a5a5a); }
  .bolton .bolton-block p strong{ color:var(--tx-1,#171717); }
}

/* ── Tablet: "Meet Lizzie" rows stack — animation first, its copy below ── */
@media (min-width:521px) and (max-width:1000px){
  .beacon-fix .bf-row{ grid-template-columns:1fr !important; gap:clamp(18px,2.6vw,28px) !important; align-items:start !important; }
  .beacon-fix .bf-rows .bf-row .bf-art,
  .beacon-fix .bf-rows .bf-row:nth-child(even) .bf-art{ width:100% !important; max-width:none !important; order:0 !important; }
  .beacon-fix .bf-rows .bf-row .bf-copy,
  .beacon-fix .bf-rows .bf-row:nth-child(even) .bf-copy{ order:1 !important; }
  .beacon-fix .bf-copy p{ max-width:none !important; }
}

/* ── Tablet: dividers between the "Meet Lizzie" panel rows ── */
@media (min-width:521px) and (max-width:1000px){
  .beacon-fix .bf-rows .bf-row + .bf-row,
  .p-works .p-rows .p-row + .p-row{ border-top:1px solid rgba(17,17,17,.10) !important; padding-top:clamp(32px,4.5vw,48px) !important; }
}

/* 3-up card grids across the whole tablet band (Keep Reading + Blog index) */
@media (min-width:521px) and (max-width:1000px){
  .blog-grid{ grid-template-columns:repeat(3,1fr) !important; gap:clamp(16px,2vw,24px) !important; }
}
/* narrow tablets: keep the 3-up structure, scale the card content to fit */
@media (min-width:521px) and (max-width:759px){
  .blog-card h3, .ar-rcard h3{ font-size:19px !important; line-height:1.18 !important; }
  .blog-excerpt{ font-size:14px !important; line-height:1.5 !important; }
  .blog-card-body{ padding:14px 14px 16px !important; }
  .blog-meta{ flex-wrap:wrap !important; gap:6px !important; padding-top:12px !important; font-size:12px !important; }
  .blog-meta .blog-av{ width:22px !important; height:22px !important; }
  .blog-meta .dot{ display:none !important; }
  .ar-rcard-body{ padding:14px 14px 16px !important; gap:7px !important; }
  .ar-rcard .rmeta{ padding-top:12px !important; font-size:12px !important; }
  .ar-rcard-media{ margin:10px 10px 0 !important; }
}

/* ── Article reading column: copy spans the full title measure ── */
@media (max-width:1200px){
  .ar-body > p, .ar-body .lead, .ar-body ul li, .ar-body ol li, .ar-head .ar-dek{ max-width:none !important; }
}
@media (max-width:760px){
  .ar-head .ar-dek{ font-size:20px !important; line-height:1.55 !important; }
  .ar-body > p, .ar-body .lead, .ar-body ul li, .ar-body ol li, .ar-author p{ font-size:18px !important; line-height:1.68 !important; letter-spacing:0 !important; }
  .ar-body > h3{ font-size:21px !important; }
}

/* ── Tablet: "What's Included" bento — every card in a two-column grid ── */
@media (min-width:521px) and (max-width:1040px){
  section.included .inc-bento, .included .inc-bento{
    grid-template-columns:repeat(2,1fr) !important;
    grid-template-rows:none !important;
    grid-auto-rows:minmax(170px,auto) !important;
    grid-template-areas:
      "feat veri"
      "brand api"
      "brand cust"
      "cust2 mnth"
      "comp mnth" !important;
    display:grid !important;
  }
  .included .inc-bento .t-lang{ grid-area:cust2 !important; }
  /* Brand-voice tile is double-height on tablet — give its wave room to grow */
  .included .inc-bento .t-brand{ padding-bottom:48px !important; }
  .included .inc-bento .t-brand .t-brand-wave{ width:100% !important; max-width:264px !important; height:auto !important; }
  .included .inc-bento .inc-tile{ min-width:0 !important; }
  /* mobile.css stacks .t-mnth with a big left pad — reset inside the 2-col grid */
  .included .inc-bento .t-mnth{ min-height:0 !important; padding-left:0 !important; padding-right:18px !important; }
}
@media (min-width:521px) and (max-width:1040px){
  /* API tile: title + body first, illustration below them */
  .included .inc-bento .t-api{ justify-content:flex-start !important; padding-top:18px !important; padding-bottom:6px !important; padding-right:18px !important; }
  .included .inc-bento .t-api h3{ max-width:none !important; }
  .included .inc-bento .t-api-deco{ position:static !important; order:3 !important; top:auto !important; left:auto !important; right:auto !important; align-self:center !important; display:block !important; margin-top:auto !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:0 !important; max-height:76px !important; width:auto !important; max-width:56% !important; object-fit:contain !important; }
  .included .inc-bento .t-api h3{ order:1 !important; }
  .included .inc-bento .t-api .inc-sub{ order:2 !important; }
  .included .inc-bento .t-api h3, .included .inc-bento .t-api .inc-sub{ position:relative; z-index:1; }
  /* Monthly tile: title + body full-width on top, illustration centered below */
  .included .inc-bento .t-mnth{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; padding:18px 0 0 0 !important; }
  .included .inc-bento .t-mnth h3{ order:1 !important; width:100% !important; max-width:none !important; padding:0 18px !important; }
  .included .inc-bento .t-mnth .inc-sub{ order:2 !important; width:100% !important; max-width:none !important; margin-top:6px !important; padding:0 18px !important; }
  .included .inc-bento .t-mnth-illo{ order:3 !important; position:static !important; transform:none !important; top:auto !important; bottom:auto !important; left:auto !important; right:auto !important; object-position:center bottom !important; margin:auto 0 -10px -4px !important; align-self:flex-start !important; width:auto !important; max-width:100% !important; max-height:250px !important; object-fit:contain !important; display:block !important; }
}

/* ── 05 Modules: one-at-a-time swipe carousel on tablet + mobile ── */
.mod-swipe{ display:none; }
.mod-mcards{ display:none; }
@keyframes archSwipeHint{ 0%,12%{ transform:translateX(0) } 55%,72%{ transform:translateX(163%) } 100%{ transform:translateX(0) } }
@media (max-width:1040px){
  .modules-scene.is-scenified{ height:auto !important; }
  .modules .ms-sticky{ position:static !important; height:auto !important; overflow:visible !important; background:transparent !important; }
  .modules .ms-spiral{ display:none !important; }
  .modules .ms-title{ position:static !important; left:auto !important; top:auto !important; transform:none !important; opacity:1 !important; filter:none !important; width:auto !important; }
  .modules .ms-stage{ position:static !important; left:auto !important; top:auto !important; transform:none !important; opacity:1 !important; width:auto !important; max-width:100% !important; }
  .modules .mod-stage{ flex-direction:column !important; gap:16px !important; margin-top:22px !important; touch-action:pan-y; overflow:hidden; cursor:grab; }
  .modules .mod-stage[data-swiping="1"]{ cursor:grabbing; }
  .modules .mod-rail, .modules .mod-controls{ display:none !important; }
  .modules .mod-feature, .modules .mod-detail .mod-feature-desc, .modules .mod-detail .mod-feature-fact{ transform:translateX(var(--sx,0px)); transition:transform .34s cubic-bezier(.22,.61,.36,1); }
  .modules .mod-stage[data-swiping="1"] .mod-feature, .modules .mod-stage[data-swiping="1"] .mod-feature-desc, .modules .mod-stage[data-swiping="1"] .mod-feature-fact{ transition:none; }
  .modules .mod-detail{ margin-bottom:0 !important; }
  .modules .mod-stage *{ touch-action:pan-y; }
  .modules .mod-stage img, .modules .mod-stage video{ -webkit-user-drag:none; user-select:none; }
  .modules .mod-stage[data-swiping="1"]{ user-select:none; }
  /* swipe affordance — same language as the integration scheme's .arch-swipe */
  .modules .mod-swipe{ display:flex !important; align-items:center; justify-content:center; margin:12px 0 2px; }
  .modules .mod-swipe-dots{ display:flex; align-items:center; gap:7px; flex:none; }
  .modules .mod-swipe-dot{ appearance:none; border:0; padding:0; width:7px; height:7px; border-radius:1000px; background:rgba(10,10,10,.18); cursor:pointer; transition:width .28s cubic-bezier(.22,.61,.36,1), background .28s ease; }
  .modules .mod-swipe-dot.is-on{ width:22px; background:#ff7a33; }
  /* one card per module: its animation + its copy, shared CTA under the dots */
  .modules .mod-left, .modules .mod-right{ display:none !important; }
  .modules .mod-stage{ display:block !important; overflow:visible !important; }
  .modules .mod-mcards{ display:block !important; }
  /* full-bleed track: cards run to the screen edge instead of being clipped by the section gutter */
  .mod-mtrack{ display:flex; align-items:stretch; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px var(--page-gutter); margin-left:calc(-1 * var(--page-gutter)); margin-right:calc(-1 * var(--page-gutter)); scroll-padding-left:var(--page-gutter); scroll-padding-right:var(--page-gutter); }
  .mod-mtrack::-webkit-scrollbar{ display:none; }
  /* the stage-wide `touch-action:pan-y` above would swallow the horizontal swipe */
  .modules .mod-mcards, .modules .mod-mcards *{ touch-action:auto !important; }
  .modules .mod-mtrack{ touch-action:pan-x pan-y !important; cursor:grab; }
  .modules .mod-mtrack.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
  .mod-mcard{ flex:0 0 100%; scroll-snap-align:start; display:flex; flex-direction:column; background:#f9f9f9; border-radius:24px; overflow:hidden; }
  .mod-mcard-art{ flex:none; width:100%; aspect-ratio:1500/1126; background:#f9f9f9; }
  .mod-mcard-art video{ display:block; width:100%; height:100%; object-fit:cover; }
  .mod-mcard-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:8px; padding:16px 22px 22px; }
  .mod-mcard-cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-3); }
  .mod-mcard-title{ font-size:30px; font-weight:500; line-height:1.1; letter-spacing:-.01em; color:var(--tx-1); margin:0; }
  .mod-mcard-desc{ font-size:14px; line-height:1.55; color:var(--tx-2); margin:0; }
  .mod-mcard-desc b{ font-weight:600; color:var(--tx-1); }
  .mod-mcard-fact{ margin-top:2px; }
  .modules .mod-mcards .mod-swipe{ display:flex !important; align-items:center; justify-content:center; margin:16px 0 0 !important; }
  /* card CTA reads as a bold brand-orange text link, not a filled pill */
  .modules .mod-mcard-cta{ display:inline-flex !important; align-items:center; gap:8px; align-self:flex-start !important; width:auto !important; justify-content:flex-start !important; margin-top:auto !important; padding:14px 0 0 !important; height:auto !important; background:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#ff6a1f !important; -webkit-text-fill-color:#ff6a1f !important; font-weight:700 !important; font-size:15px !important; letter-spacing:-.01em; text-decoration:none; transition:gap .2s ease, opacity .2s ease; }
  .modules .mod-mcard-cta i{ font-size:17px !important; font-weight:700; color:#ff6a1f !important; }
  .modules .mod-mcard-cta:hover, .modules .mod-mcard-cta:active{ background:none !important; transform:none !important; opacity:.7; gap:12px; }
}

/* headline: the source already carries a space around the highlight — drop the injected pseudo spaces */
section.modules h2.modules-headline .mh-mark::before,
section.modules h2.modules-headline .mh-mark::after{ content:none !important; }

@media (max-width:520px){
  .included .t-mnth{ min-height:170px !important; padding-left:min(150px,42%) !important; }
  .included .t-mnth-illo{ width:min(156px,43%) !important; max-width:43% !important; }
}

/* ── Mobile: "Keep Reading" gets the standard page gutter (the .ar-rel padding
      shorthand zeroes the .ar-wide gutter, so restore it here) ── */
@media (max-width:520px){
  .ar-rel.ar-wide{ padding-left:var(--page-gutter) !important; padding-right:var(--page-gutter) !important; }
}


/* ═══════════════════════════════════════════════════════════
   TABLET HEROES (761–1000px) — same stacked structure as mobile:
   media on top, copy below it on black, everything left-aligned.
   Above 1000px the desktop overlay hero is untouched.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:1000px){
  /* ── Module pages (Pulse / Coach / Storefront) ── */
  .pulse-hero{ padding:clamp(90px,7.5vh,104px) var(--page-gutter) 24px !important; }
  .pulse-hero-inner{ height:auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; gap:0 !important; padding:0 0 clamp(28px,3.4vw,36px) !important; border-radius:28px !important; overflow:hidden !important; text-align:left !important; }
  .pulse-hero-inner::after{ display:none !important; }

  /* media block, flush to the card edges, first in the stack */
  .pulse-hero-video{ position:relative !important; inset:auto !important; order:-2 !important; width:144% !important; margin-left:-22% !important; height:calc(100vw * 0.5) !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:50% 100% !important; z-index:0 !important; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 84%,transparent 100%) !important; mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 84%,transparent 100%) !important; }
  section.pulse-hero .pulse-hero-inner .pulse-laptop{ order:-2 !important; position:relative !important; box-sizing:border-box !important; width:100% !important; max-width:none !important; margin:0 !important; padding:20px 20px 0 !important; border-radius:0 !important; height:auto !important; }
  .pulse-laptop img{ width:100% !important; height:auto !important; display:block !important; }
  .pulse-laptop::after{ display:none !important; }

  /* copy, left-aligned under the media */
  .pulse-hero-inner > .hero-module-name,
  .pulse-hero-inner > h1,
  .pulse-hero-inner > .lede{ padding-left:clamp(24px,3.4vw,34px) !important; padding-right:clamp(24px,3.4vw,34px) !important; text-align:center !important; }
  .pulse-hero-inner > .pulse-hero-footer{ padding-left:clamp(24px,3.4vw,34px) !important; padding-right:clamp(24px,3.4vw,34px) !important; text-align:left !important; }
  .pulse-hero-inner > .lede::after{ content:'' !important; display:block !important; width:100% !important; height:1px !important; margin:22px 0 0 !important; background:rgba(255,255,255,.28) !important; }
  .pulse-hero-inner > .hero-module-name{ order:1 !important; font-size:14px !important; letter-spacing:.16em !important; margin:clamp(24px,3vw,30px) 0 8px !important; }
  .pulse-hero-inner > h1{ order:2 !important; margin:0 auto !important; max-width:none !important; white-space:normal !important; text-align:center !important; }
  .pulse-hero-inner > h1 br{ display:none !important; }
  .pulse-hero-inner > .lede{ order:3 !important; font-size:19px !important; line-height:1.5 !important; max-width:none !important; margin:14px 0 0 !important; }
  .pulse-hero-inner > .lede br{ display:none !important; }
  .pulse-hero-cta{ order:4 !important; padding:0 clamp(24px,3.4vw,34px) !important; margin-top:20px !important; display:flex !important; justify-content:center !important; }

  /* highlights + live badge stack under the copy */
  .pulse-hero-footer{ order:5 !important; position:static !important; inset:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:18px !important; margin-top:22px !important; }
  .pulse-hero-footer .pf-list{ gap:0 !important; }
  .pulse-hero-footer .pf-rail{ display:none !important; }
  .pulse-hero-footer .pf-item{ opacity:1 !important; transform:none !important; border:0 !important; padding:10px 0 0 !important; }
  .pulse-hero-footer .pf-item .label{ font-size:17px !important; line-height:1.35 !important; }
  .pulse-hero-live-badge{ align-self:flex-start !important; font-size:15px !important; }

  /* ── Home page hero ── */
  .hero .hero-media{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; display:flex !important; flex-direction:column !important; background:#000 !important; border:0 !important; border-radius:28px !important; overflow:hidden !important; }
  .hero .hero-video{ position:relative !important; inset:auto !important; width:144% !important; margin-left:-22% !important; height:calc(100vw * 0.5) !important; aspect-ratio:auto !important; object-fit:cover !important; object-position:50% 100% !important; -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 84%,transparent 100%) !important; mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.55) 84%,transparent 100%) !important; }
  .hero .hero-overlay{ position:static !important; inset:auto !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; background:#000 !important; padding:clamp(28px,3.4vw,38px) clamp(24px,3.4vw,34px) clamp(30px,3.6vw,40px) !important; gap:14px !important; }
  .hero .hero-overlay > *{ order:0 !important; }
  .hero .hero-overlay .hero-module-name{ font-size:14px !important; letter-spacing:.16em !important; text-align:center !important; margin:0 !important; }
  .hero .hero-overlay .hero-title,
  .hero .hero-overlay .hero-sub{ text-align:center !important; max-width:none !important; margin:0 auto !important; white-space:normal !important; }
  .hero .hero-overlay .hero-sub{ font-size:19px !important; line-height:1.5 !important; }
  /* hairline closing the centered copy block (mobile pattern) */
  .hero .hero-overlay .hero-sub::after{ content:'' !important; display:block !important; width:100% !important; height:1px !important; margin:22px 0 0 !important; background:rgba(255,255,255,.28) !important; }
  .hero .hero-overlay .hero-outcomes{ position:static !important; left:auto !important; right:auto !important; bottom:auto !important; width:auto !important; display:flex !important; flex-direction:column !important; gap:0 !important; padding:2px 0 0 !important; margin:0 !important; border-top:0 !important; }
  .hero .hero-overlay .hero-outcomes .oc-rail{ display:none !important; }
  .hero .hero-overlay .outcome{ border:0 !important; padding:10px 0 0 !important; margin:0 !important; opacity:1 !important; transform:none !important; }
  .hero .hero-overlay .outcome .label{ font-size:17px !important; line-height:1.35 !important; }
  .hero .hero-overlay .hero-live-badge{ position:static !important; align-self:flex-start !important; margin:6px 0 0 !important; font-size:15px !important; }
  .hero .hero-art{ display:none !important; }
}


/* ── Tablet (761–1000px): industry hero keeps the desktop flow-map media,
      restacked as a compact grid above the copy inside the black card ── */
@media (min-width:761px) and (max-width:1000px){
  .di .hero .hero-overlay{ gap:0 !important; }
  .di .hero .hero-overlay .hero-flow{ display:block !important; order:-1 !important; position:static !important; flex:0 0 auto !important; width:100% !important; min-height:0 !important; margin:0 0 22px !important; }
  .di .hero .hero-overlay .hero-flow .hm{ opacity:1 !important; position:static !important; left:auto !important; top:auto !important; width:100% !important; height:auto !important; transform:none !important; display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:12px !important; }
  .di .hero .hero-overlay .hero-flow .hm-lines{ display:none !important; }
  .di .hero .hero-overlay .hero-flow .hm-node{ position:static !important; left:auto !important; top:auto !important; width:auto !important; border-radius:14px !important; box-shadow:none !important; transform:none !important; opacity:1 !important; }
  .di .hero .hero-overlay .hero-flow .hm-core{ grid-column:1 / -1 !important; order:-1 !important; width:auto !important; padding:14px 20px !important; border-radius:14px !important; }
  .di .hero .hero-overlay .hero-flow .hm-core .hm-orb{ width:28px !important; height:28px !important; }
  .di .hero .hero-overlay .hero-flow .hm-core .hm-name{ font-size:24px !important; }
  .di .hero .hero-overlay .hero-module-name,
  .di .hero .hero-overlay .hero-title{ margin:0 0 12px !important; }
  .di .hero .hero-overlay .hero-sub{ margin:0 0 4px !important; }
}


/* ── Tablet (761–900px): the "four problems" scene is static here, so the
      black band must own the section's own padding — no white gaps ── */
@media (min-width:761px) and (max-width:900px){
  .di .ab-pat-scene, .di .ab-pat-scene.is-scenified{ padding-top:clamp(64px,8vw,88px) !important; padding-bottom:clamp(88px,11vw,124px) !important; }
  .di .ab-pat-scene[data-bg="dark"], .di .ab-pat-scene[data-bg="dark"].is-scenified{ background:#000000 !important; }
  .di .ab-pat-scene[data-bg="light"], .di .ab-pat-scene[data-bg="light"].is-scenified{ background:var(--surface) !important; }
  .di .ab-pat-sticky, .di .ab-pat-scene.is-scenified .ab-pat-sticky{ min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; }
  .di .ab-pat-scene + section{ padding-top:clamp(56px,7vw,80px) !important; }
}


/* ── Tablet/mobile: pages whose modules scene has no swipe-card markup
      (industry pages) keep the real carousel, stacked — the .mod-mcards
      rules above would otherwise hide the whole stage and leave the
      headline sitting over empty space. ── */
@media (max-width:1040px){
  .modules .mod-stage:not(:has(.mod-mcards)){ display:flex !important; flex-direction:column !important; gap:18px !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-left,
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-right{ display:flex !important; flex-direction:column !important; width:100% !important; max-width:none !important; gap:14px !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-controls{ display:none !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-rail{ display:flex !important; flex-direction:column !important; overflow:visible !important; gap:10px !important; padding-bottom:0 !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-rail .mod-card{ flex:0 0 auto !important; min-height:0 !important; flex-direction:row !important; align-items:center !important; gap:14px !important; padding:16px 20px !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-rail .mod-card-title{ font-size:20px !important; flex:1 1 auto !important; min-width:0 !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-rail .mod-card-illo{ position:static !important; right:auto !important; bottom:auto !important; width:64px !important; height:64px !important; flex:0 0 64px !important; object-position:center !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-rail .mod-card-go{ margin-top:0 !important; align-self:center !important; flex:0 0 auto !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-detail{ margin-bottom:0 !important; gap:14px !important; }
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-feature,
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-feature-desc,
  .modules .mod-stage:not(:has(.mod-mcards)) .mod-feature-fact{ transform:none !important; }
  .modules:not(:has(.mod-mcards)) .mod-swipe{ display:none !important; }
}


/* ── Tablet: article pages — the wide-layout rules zero the prose gutters,
      so the body text ran edge-to-edge. Restore the page gutter. ── */
@media (min-width:521px) and (max-width:1000px){
  .ar .ar-head, .ar .ar-body, .ar .ar-end{ box-sizing:border-box !important; padding-left:var(--page-gutter) !important; padding-right:var(--page-gutter) !important; }
  .ar .ar-end{ width:100% !important; }
}


/* ── Tablet: About timeline → full-width sections stacked vertically,
      hairline divider between each, no horizontal scroller ── */
@media (min-width:761px) and (max-width:1000px){
  .di .ab-time .ab-tl-pin{ height:auto !important; }
  .di .ab-time .ab-tl-stage{ position:static !important; height:auto !important; display:block !important; padding:0 !important; }
  .di .ab-time .ab-tl-viewport{ position:static !important; overflow:visible !important; display:block !important; padding:0 !important; -webkit-mask-image:none !important; mask-image:none !important; }
  .di .ab-time .ab-tl-track{ display:flex !important; flex-direction:column !important; gap:0 !important; height:auto !important; transform:none !important; padding:0 var(--page-gutter) !important; }
  .di .ab-time .ab-tl-panel{ position:relative !important; flex:0 0 auto !important; width:auto !important; display:flex !important; flex-direction:column !important; gap:18px !important; padding:clamp(36px,5vw,56px) 0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; align-items:stretch !important; opacity:1 !important; transform:none !important; }
  .di .ab-time .ab-tl-panel + .ab-tl-panel{ border-top:1px solid rgba(17,17,17,.10) !important; }
  .di .ab-time .ab-tl-panel .ab-tl-media{ order:0 !important; width:100% !important; aspect-ratio:16/9 !important; max-height:none !important; border-radius:18px !important; overflow:hidden !important; }
  .di .ab-time .ab-tl-panel .in{ order:1 !important; max-width:none !important; display:flex !important; flex-direction:column !important; gap:10px !important; }
  .di .ab-time .ab-tl-panel .ab-tl-year,
  .di .ab-time .ab-tl-panel h3,
  .di .ab-time .ab-tl-panel p{ opacity:1 !important; transform:none !important; margin:0 !important; min-height:0 !important; }
  .di .ab-time .ab-tl-panel p{ font-size:17px !important; line-height:1.6 !important; max-width:none !important; }
  .di .ab-time .ab-tl-hint{ display:none !important; }
}


/* ── Tablet: team map fills the section width (columns stack) ── */
@media (min-width:761px) and (max-width:1000px){
  .di .ab-team .ab-team-grid{ grid-template-columns:1fr !important; }
  .di .ab-team .ab-team-col--right{ width:100% !important; }
  .di .ab-team .ab-team-map{ width:100% !important; }
  .di .ab-team .ab-map{ width:100% !important; overflow:visible !important; }
  .di .ab-team #abWorldMap{ width:100% !important; height:auto !important; }
  #abWorldMap .ab-map-label--barcelona{ transform:none !important; }
}

/* ── First-level scene titles (the desktop-centered reveal H2s) read one step
      above the standard section title on mobile + tablet; the second-level
      heading inside the scene keeps the shared section-title size. ── */
@media (max-width:520px){
  .ab-pat-title, .pa-reveal-title, .di .ab-pat-title, .di .pa-reveal-title{ font-size:clamp(32px,8.8vw,40px) !important; line-height:1.08 !important; }
}
@media (min-width:521px) and (max-width:1000px){
  .ab-pat-title, .pa-reveal-title, .di .ab-pat-title, .di .pa-reveal-title{ font-size:52px !important; line-height:1.06 !important; }
}


/* ═══════════════════════════════════════════════════════════
   TABLET NAV (768–1000px) — mobile-style burger + sheet, but the
   "Book a…" CTA stays in the header on the right (no floating bar).
   ═══════════════════════════════════════════════════════════ */
@media (min-width:768px) and (max-width:1000px){
  .site-header{ justify-content:flex-start !important; gap:14px !important; }
  .site-header--brand-left .nav-left, .nav-left, .nav-mega{ display:none !important; }
  .site-header .nav-right{ display:flex !important; margin-left:auto !important; }
  .site-header .nav-right .nav-link-book{ display:inline-flex !important; height:42px !important; padding:0 18px !important; font-size:14px !important; white-space:nowrap !important; }

  .nav-burger,
  .site-header.is-light .nav-burger,
  body.menu-open .site-header .nav-burger,
  body.menu-open .site-header.is-light .nav-burger{ display:inline-flex !important; background:rgba(23,23,23,.06) !important; color:#171717 !important; }
  .nav-burger:hover, .site-header.is-light .nav-burger:hover{ background:rgba(23,23,23,.12) !important; }
  .nav-burger span, body.menu-open .site-header .nav-burger span{ background:#171717 !important; }

  body.menu-open .site-header, body.menu-open .site-header.is-light{ background:#ffffff !important; color:#171717 !important; }
  body.menu-open .site-header .treel-mark--white,
  body.menu-open .site-header.is-light .treel-mark--white{ display:none !important; }
  body.menu-open .site-header .treel-mark--dark,
  body.menu-open .site-header.is-light .treel-mark--dark{ display:block !important; }

  .mobile-menu{ display:flex !important; justify-content:flex-start !important; align-items:stretch !important; padding:104px 0 56px !important; overscroll-behavior:contain; }
  .mobile-menu > *{ width:100% !important; max-width:640px !important; margin-inline:auto !important; padding-inline:24px; box-sizing:border-box; }
  .mobile-menu-link{ font-size:28px !important; line-height:1.2 !important; padding:16px 14px !important; border-radius:10px !important; }
  .mobile-menu-trigger{ padding:16px 14px !important; border-radius:10px !important; }
  .mobile-menu-sub{ display:block !important; grid-template-rows:none !important; max-height:0 !important; overflow:hidden !important; padding-left:0 !important; transition:max-height 280ms cubic-bezier(.2,.8,.2,1) !important; }
  .mobile-menu-group.is-open .mobile-menu-sub{ max-height:460px !important; }
  .mobile-menu-sublink{ font-size:18px !important; padding:12px 14px !important; }
  .mobile-cta-bar{ display:none !important; }
}

/* 1001–1099px: desktop nav still fits, but the header CTA was hidden — keep it */
@media (min-width:1001px) and (max-width:1099px){
  .site-header .nav-right{ display:flex !important; }
  .site-header .nav-right .nav-link-book{ display:inline-flex !important; height:42px !important; padding:0 16px !important; font-size:13px !important; white-space:nowrap !important; }
  .site-header--brand-left .nav-left{ gap:14px !important; }
}

/* ═══════════════════════════════════════════════════════════
   INTEGRATION SCHEME ("How Data, Identity & Actions Move")
   Keep the full 3-zone matrix with its connectors at every width;
   when it doesn't fit the container it scrolls horizontally
   (same treatment as mobile) instead of stacking or compressing.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:1080px){
  .arch .scheme{ display:grid !important; grid-template-columns:max(360px,46vw) 76px max(360px,46vw) 76px max(360px,46vw) !important; grid-template-rows:auto auto auto auto auto !important; column-gap:0 !important; row-gap:0 !important; overflow-x:auto !important; overflow-y:hidden; padding:0 0 14px !important; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
  .arch .scheme > .zone{ display:grid !important; grid-template-rows:subgrid !important; grid-template-columns:minmax(0,1fr) !important; grid-row:1 / 6 !important; gap:0 !important; min-width:0 !important; scroll-snap-align:center; margin:0 !important; padding:6px 18px 18px !important; background:none !important; border-radius:0 !important; }
  .arch .scheme > .zone.z1{ grid-column:1 !important; }
  .arch .scheme > .zone.z2{ grid-column:3 !important; }
  .arch .scheme > .zone.z3{ grid-column:5 !important; }
  .arch .scheme > .seam{ display:grid !important; grid-template-rows:subgrid !important; grid-row:1 / 6 !important; gap:0 !important; padding:0 !important; margin:0 !important; border:0 !important; }
  .arch .scheme > .seam.s1{ grid-column:2 !important; }
  .arch .scheme > .seam.s2{ grid-column:4 !important; }
  .arch .scheme > .seam::before{ display:block !important; }
  .arch .scheme .snum{ grid-row:1 !important; align-self:start !important; justify-self:center; margin:22px auto 0 !important; }
  .arch .scheme .sar{ flex-direction:column !important; padding:0 !important; }
  .arch .scheme .sar.r-read{ grid-row:2 !important; }
  .arch .scheme .sar.r-id{ grid-row:4 !important; }
  .arch .scheme .sar.r-action{ grid-row:5 !important; }
  .arch .scheme .sar .cl{ display:none !important; }
  .arch .scheme .zhead{ grid-row:1 !important; padding:18px 0 2px !important; }
  .arch .scheme .cell.r-read{ grid-row:2 !important; }
  .arch .scheme .cell.r-id{ grid-row:4 !important; }
  .arch .scheme .cell.r-action{ grid-row:5 !important; }
  .arch .scheme .cell{ display:flex !important; flex-direction:column !important; gap:0 !important; align-self:start !important; padding:16px 0 40px !important; }
  .arch .scheme .cell, .arch .scheme .card, .arch .scheme .zhead{ width:auto !important; max-width:100% !important; min-width:0 !important; }
  /* connectors live in the SVG layer — the in-flow arrow stubs stay hidden */
  .arch .scheme .vstep .varrow{ background:transparent !important; height:46px !important; }
  .arch .scheme .vstep .varrow::before, .arch .scheme .vstep .varrow::after{ display:none !important; }
  .arch .scheme .vstep .cl{ display:none !important; }
  .arch .scheme > .arch-mid{ display:none !important; }
}
/* narrow desktop: the matrix keeps a real minimum column width and scrolls
   rather than squeezing the cards and connectors */
@media (min-width:1081px){
  .arch .scheme{ grid-template-columns:minmax(380px,1fr) 96px minmax(380px,1fr) 96px minmax(380px,1fr); overflow-x:auto; overflow-y:hidden; }
}
/* scroll affordance for every non-mobile width */
@media (min-width:761px){
  .arch .scheme{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.28) rgba(255,255,255,.08); }
  .arch .scheme::-webkit-scrollbar{ height:4px; }
  .arch .scheme::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.28); border-radius:2px; }
  .arch .scheme::-webkit-scrollbar-track{ background:rgba(255,255,255,.08); border-radius:2px; }
  .arch .arch-swipe{ display:none !important; }
  .arch .arch-swipe.is-live{ display:flex !important; position:sticky !important; bottom:0 !important; z-index:30; align-items:center; gap:10px; margin:14px calc(-1 * var(--page-gutter,20px)) 0 !important; padding:34px var(--page-gutter,20px) 14px !important; background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.85) 100%) !important; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); pointer-events:none; }
  .arch .arch-swipe.is-live.is-settled{ background:none !important; }
  .arch .arch-swipe.is-live::before{ content:"" !important; display:block !important; position:absolute; left:0; right:0; top:100%; height:80px; background:linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.9) 100%); }
  .arch .arch-swipe.is-live.is-settled::before{ display:none !important; }
  .arch .arch-swipe .arch-swipe-rail{ position:relative; flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,.14); overflow:hidden; }
  .arch .arch-swipe .arch-swipe-rail::after{ content:""; position:absolute; top:0; left:0; width:38%; height:100%; border-radius:2px; background:#ff7a33; animation:archSwipeHint 2.6s cubic-bezier(.4,0,.2,1) infinite; }
}

/* Scheme scroll track runs edge-to-edge on mobile + tablet (no page gutter) */
@media (max-width:1080px){
  .arch .scheme{ margin-left:calc(-1 * var(--page-gutter)) !important; margin-right:calc(-1 * var(--page-gutter)) !important; width:calc(100% + 2 * var(--page-gutter)) !important; scroll-padding-inline:var(--page-gutter); }
  .arch .scheme > .zone.z1{ padding-left:var(--page-gutter) !important; }
  .arch .scheme > .zone.z3{ padding-right:var(--page-gutter) !important; }
}

/* Sticky title bar's black fill runs full-bleed so the scrolling track
   never shows through beside it */
@media (max-width:1080px){
  .arch .arch-sticky{ margin-left:calc(-1 * var(--page-gutter)) !important; margin-right:calc(-1 * var(--page-gutter)) !important; padding-left:var(--page-gutter) !important; padding-right:var(--page-gutter) !important; }
}

/* ═══════════════════════════════════════════════════════════
   "About the AI You Already Built.." — static fallback layout.
   Runs at every width where the scroll scene isn't active
   (reduced motion, tablets, mobile): title above the card on
   white, single-column copy, illustration below.
   ═══════════════════════════════════════════════════════════ */
.aomt-scene:not(.is-scenified) .aomt-sticky{ display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; height:auto !important; min-height:0 !important; background:#ffffff !important; overflow:visible !important; padding:clamp(56px,7vw,96px) var(--page-gutter) 0 !important; }
.aomt-scene:not(.is-scenified) .aomt-title{ display:block !important; position:static !important; width:auto !important; max-width:none !important; margin:0 0 clamp(28px,3.6vw,44px) !important; color:var(--fg-1,#393939) !important; text-align:left !important; transform:none !important; opacity:1 !important; }
.aomt-scene:not(.is-scenified) .aomt-stage{ position:static !important; left:auto !important; top:auto !important; width:min(1460px,100%) !important; margin:0 auto !important; transform:none !important; opacity:1 !important; }
.aomt-scene:not(.is-scenified) .aomt-quote-img{ position:static !important; left:auto !important; bottom:auto !important; width:100% !important; display:flex !important; justify-content:flex-start !important; transform:none !important; opacity:1 !important; margin:clamp(32px,4vw,52px) 0 0 !important; }
.aomt-scene:not(.is-scenified) .aomt-quote-img img{ display:block !important; width:min(100%,420px) !important; margin-bottom:0 !important; }
/* the two-column quote/copy split needs real width — stack it wherever the
   scroll scene doesn't run (≤1040px); above that the desktop split stays */
@media (max-width:1040px){
  .aomt-grid{ grid-template-columns:1fr !important; gap:clamp(20px,2.6vw,28px) !important; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT page — tablet + narrow desktop (761–1080px)
   Hero follows the mobile structure: title first, description
   under it, spiral below; no fixed 720px card height.
   ═══════════════════════════════════════════════════════════ */
@media (min-width:761px) and (max-width:1080px){
  .di .ab-hero .hero-media{ height:auto !important; min-height:0 !important; aspect-ratio:auto !important; }
  .di .ab-hero .hero-overlay{ position:static !important; inset:auto !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; padding:clamp(30px,4vw,44px) 0 0 !important; overflow:hidden !important; }
  .di .ab-hero .ab-hero-grid{ display:flex !important; flex-direction:column !important; grid-template-columns:none !important; gap:18px !important; padding:0 clamp(24px,3.4vw,34px) !important; }
  .di .ab-hero .ab-hero-grid .hero-title{ order:0 !important; grid-column:auto !important; grid-row:auto !important; }
  .di .ab-hero .ab-hero-grid .ab-hero-right{ order:1 !important; grid-column:auto !important; grid-row:auto !important; }
  .di .ab-hero .hero-title{ display:block !important; text-align:left !important; max-width:none !important; margin:0 !important; }
  .di .ab-hero .hero-title br{ display:none !important; }
  .di .ab-hero .hero-title .ab-h-top{ display:block !important; }
  .di .ab-hero .hero-title .ab-h-bot{ display:block !important; margin-top:.3em !important; }
  .di .ab-hero .ab-hero-right{ display:flex !important; flex-direction:column !important; gap:14px !important; padding-top:0 !important; }
  .di .ab-hero .hero-sub{ order:1 !important; font-size:19px !important; line-height:1.55 !important; text-align:left !important; max-width:none !important; margin:0 !important; }
  .di .ab-hero .hero-sub br{ display:none !important; }
  /* the shared tablet-hero hairline belongs to the media heroes, not this one */
  .di .ab-hero .hero-sub::after{ display:none !important; }
  .di .ab-hero .ab-hero-spiral{ position:static !important; order:2 !important; width:130% !important; max-width:none !important; right:auto !important; bottom:auto !important; margin:8px -18% -6% -10% !important; opacity:1 !important; }
}
/* Brand logos sit on an even 2-up grid while the story columns are narrow */
@media (min-width:561px) and (max-width:1000px){
  /* story columns stack, so the logo row owns the full width and stays one line */
  .ab-story-cols{ grid-template-columns:1fr !important; gap:clamp(28px,3.4vw,40px) !important; }
  .ab-brands-row{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:clamp(14px,2vw,26px) !important; }
  .ab-brands-row .ab-logo-slot img{ max-width:100% !important; }
  .ab-logo-sony img{ height:52px !important; }
  .ab-logo-lh img{ height:26px !important; }
  .ab-logo-groupon img{ height:20px !important; }
  .ab-logo-xerox img{ height:20px !important; }
}

/* 1001–1080px: keep the two-column story (logos in the right column) and fit
   all four marks on one line at a smaller scale */
@media (min-width:1001px) and (max-width:1080px){
  .ab-brands-row{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; }
  .ab-brands-row .ab-logo-slot img{ max-width:100% !important; }
  .ab-logo-sony img{ height:38px !important; }
  .ab-logo-lh img{ height:18px !important; }
  .ab-logo-groupon img{ height:14px !important; }
  .ab-logo-xerox img{ height:14px !important; }
}

/* About hero on landscape tablets / narrow desktops: the card grows to fit the
   title instead of clipping it at a fixed 720px */
@media (min-width:1081px) and (max-width:1366px){
  .di .ab-hero .hero-media{ height:auto !important; min-height:620px !important; }
  .di .ab-hero .hero-overlay{ position:static !important; inset:auto !important; height:auto !important; }
  .di .ab-hero .hero-title{ font-size:clamp(48px,5vw,62px) !important; }
}
/* Brand logos: always one row, scaled to the column they sit in */
@media (min-width:561px){
  .ab-brands-row{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; }
  .ab-brands-row .ab-logo-slot{ flex:0 1 auto !important; min-width:0 !important; }
  .ab-brands-row .ab-logo-slot img{ max-width:100% !important; }
}