/* ============================================================================
   X3WEB — ALL-INCLUSIVE PAGE
   The page-specific layer only. Surfaces, cards, buttons, typography, grids,
   forms, the hero and the FAQ all come from tokens / base / components /
   hero / pages. What is left here is the handful of layouts that exist on
   this page and nowhere else: the page map, the process timeline, the device
   and dashboard frames, the pricing payment block, the technical detail
   modal, the floating media labels and the mobile action bar.

   Reads tokens.css. Declares no literal colours and no spacing between the
   steps of the scale. Three fluid display figures stay as clamp() — the stat
   card numeral and the two price numerals. They are this page's own display
   scale; every token that could replace them is a different size, and the
   prices sit in a three-column block that cannot absorb one.
   ========================================================================== */

/* ── The LinkedIn Insight noscript pixel this page carries ── */
.li-pixel{display:none}

/* ── Hero trust line — sits under the hero button row ── */
.ai-trust-line{
  display:block;
  margin-top:calc(22 * var(--uh,1px));
  font-size:var(--fs-sm);
  font-weight:var(--w-medium);
  letter-spacing:0.02em;
  color:var(--on-dark-soft);
}

/* ── Rhythm around the message strips ── */
.ai-before-strip{padding-bottom:calc(var(--section-pad) * 0.72)}
.ai-after-strip{padding-top:calc(var(--section-pad) * 0.72)}
.ai-page .section-header p + p{margin-top:var(--space-3)}

/* ── Message and mid-CTA strips ── */
.ai-strip{padding:var(--space-6) 0}
.ai-strip-card{
  display:flex;align-items:center;justify-content:center;
  gap:var(--gap-md);flex-wrap:wrap;
  padding:var(--space-5) var(--space-7);
  border-radius:var(--radius-xl);
  text-align:center;
}
.ai-strip-card strong{font-size:var(--fs-h4);font-weight:var(--w-semi);line-height:1.5;color:var(--ink)}
.ai-primary-message .ai-strip-card{max-width:var(--container-medium);margin-inline:auto}
.ai-mid-cta .ai-strip-card .btn{flex:none}

/* ── The two-column split used by six sections ── */
.ai-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4.5vw,72px);align-items:center}
.ai-split > div > p + p{margin-top:var(--space-4)}
.ai-split h3{margin:var(--space-6) 0 var(--space-4)}
.ai-split .btn{margin-top:var(--space-6)}

/* ── Media frames ── *
   Every frame on this page holds a muted looping video. The frame owns the
   geometry; the video simply covers it.                                    */
.ai-image-placeholder{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--brand)}
.ai-image-placeholder > video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  border-radius:inherit;
  pointer-events:none;
}
.ai-image-placeholder > video::-webkit-media-controls,
.ai-image-placeholder > video::-webkit-media-controls-enclosure,
.ai-image-placeholder > video::-webkit-media-controls-panel,
.ai-image-placeholder > video::-webkit-media-controls-start-playback-button{display:none !important;-webkit-appearance:none}
.ai-placeholder-portrait{width:100%;aspect-ratio:3 / 4;border-radius:var(--radius-xl)}
.ai-placeholder-landscape{width:100%;aspect-ratio:16 / 10}
.ai-placeholder-tall{aspect-ratio:4 / 5;border-radius:var(--radius-xl)}
.ai-placeholder-square{width:100%;aspect-ratio:1 / 1;border-radius:var(--radius-xl)}
.ai-placeholder-dashboard{width:100%;aspect-ratio:16 / 7;border-radius:var(--radius-md);margin-bottom:var(--space-5)}

/* ── Frosted labels floating over a media frame ── */
.ai-visual{position:relative}
.ai-float,.ai-review-card,.ai-stat-card{
  position:absolute;z-index:2;
  padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-ring),var(--glass-drop-lg);
}
.ai-float{
  max-width:270px;
  border-left:3px solid var(--accent);
  font-size:var(--fs-sm);font-weight:var(--w-semi);line-height:1.45;
  color:var(--ink);
}
.ai-float-top{right:-22px;top:42px}
.ai-float-bottom{left:-28px;bottom:46px}
.ai-review-card{right:-18px;bottom:34px;max-width:280px}
.ai-review-card span{display:block;color:var(--accent);letter-spacing:3px;font-size:var(--fs-sm)}
.ai-review-card strong{display:block;margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--ink)}
.ai-stat-card{left:-20px;bottom:84px;text-align:left}
.ai-stat-card strong{
  display:block;
  font-size:clamp(24px,2.4vw,30px);font-weight:var(--w-thin);line-height:1;
  color:var(--accent-strong);
}
.ai-stat-card span{display:block;margin-top:var(--space-1);font-size:var(--fs-xs);color:var(--muted)}
.ai-stat-card-two{left:auto;right:-18px;bottom:24px}

/* ── Ticked lists ── *
   One tick recipe for every checked list on the page — the two check lists,
   the summary and compare cards, the page map and the technical modal.     */
.ai-check-list li,
.ai-check-columns li,
.ai-summary-grid li,
.ai-compare li,
.ai-page-map li,
.ai-technical-modal-body li{position:relative;padding-left:25px;line-height:1.6;color:var(--muted)}
.ai-check-list li::before,
.ai-check-columns li::before,
.ai-summary-grid li::before,
.ai-compare li::before,
.ai-page-map li::before,
.ai-technical-modal-body li::before{
  content:"";position:absolute;left:1px;top:0.5em;
  width:11px;height:6px;
  border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.ai-check-list,.ai-check-columns{display:grid;gap:var(--space-3) var(--space-5);margin:var(--space-6) 0}
.ai-check-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-check-list li,.ai-check-columns li,
.ai-technical-modal-body li{font-size:var(--fs-sm)}
.ai-summary-grid li,.ai-compare li,.ai-page-map li{font-size:var(--fs-xs)}

/* ── Grids that are not the shared 3-up ── */
.ai-benefit-rows{display:grid;gap:var(--gap-sm);margin-top:var(--space-7)}
.ai-turn-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ai-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-md)}
.ai-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-md)}
.ai-summary-grid h3,.ai-compare h3{margin-bottom:var(--space-4)}
.ai-summary-grid ul,.ai-compare ul{display:grid;gap:var(--space-2)}

/* ── Notes ── */
.ai-note{
  margin-top:var(--space-7);padding:var(--space-4) var(--space-5);
  border-left:3px solid var(--accent);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--accent-softer);
  font-size:var(--fs-sm);line-height:1.65;
}
.ai-center{border-left:0;border-radius:var(--radius-md);text-align:center}
.ai-outcome-note{
  margin-top:auto;padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  font-size:var(--fs-sm);
}

/* ── Platform layout — Google and Meta ── */
.ai-platform-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4.5vw,68px);align-items:center}
/* align-items only, never place-items: justify-items:center would shrink the
   card to fit its contents, and the media frame inside is sized with
   width:100%, so the whole column collapses to zero and the video vanishes. */
.ai-platform-diagram{display:grid;align-items:center;min-width:0}
.ai-deliverables h3{margin-bottom:var(--space-2)}
.ai-deliverables p + p,.ai-meta-content p + p{margin-top:var(--space-4)}
.ai-dashboard{padding:var(--space-4)}

/* ── Advertising cards ── */
.ai-ad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-md)}
.ai-ad-card{display:flex;flex-direction:column}
.ai-ad-card h3{margin-bottom:var(--space-3)}
.ai-ad-card h4{margin:var(--space-5) 0 var(--space-3)}
.ai-ad-card .ai-check-list{grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 var(--space-5)}

/* ── Your digital head office: device frame and the 10-page map ── */
.ai-digital-head-office .ai-split{grid-template-columns:minmax(0,0.82fr) minmax(0,1.6fr);align-items:start}
.ai-head-office-copy{min-width:0}

/* The copy column is far shorter than the ten page cards beside it, so rather
   than leaving a long empty gutter it travels down with the scroll and comes
   to rest at the foot of its own section. Sticky keeps it inside the section
   by definition — it can never escape the grid area. Only worth doing while
   the two columns are actually side by side. */
@media (min-width:861px){
  .ai-head-office-copy{
    position:sticky;
    top:calc(var(--header-h) + 28px);
    align-self:start;
  }
}
.ai-device{margin-top:var(--space-7);padding:var(--space-3)}
.ai-device .ai-image-placeholder{border-radius:var(--radius-md)}
.ai-page-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-md);align-items:stretch}
.ai-page-map > .card{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.ai-page-image-placeholder{flex:0 0 auto;width:100%;aspect-ratio:16 / 9;border-radius:var(--radius-md)}
.ai-page-card-content{min-width:0}
.ai-page-card-heading{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-3)}
.ai-page-card-heading > b{
  display:grid;place-items:center;
  flex:0 0 46px;width:46px;height:46px;
  border:1px solid var(--accent-line);
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  color:var(--accent);
  font-size:var(--fs-h4);font-weight:var(--w-semi);line-height:1;
}
.ai-page-card-heading h3{margin:0;font-size:var(--fs-h4);flex:1 1 auto;min-width:0}
.ai-page-map p{font-size:var(--fs-sm);line-height:1.6}
.ai-page-map ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-4);margin-top:var(--space-4)}
.ai-additional-elements{margin-top:clamp(32px,4vw,48px)}
.ai-additional-elements h3{margin-bottom:var(--space-4)}
.ai-additional-elements .ai-check-columns{margin:0;grid-template-columns:repeat(3,minmax(0,1fr))}

/* ── Built correctly: detail cards and their modal ── */
.ai-technical-layout{
  display:grid;
  grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);
  gap:clamp(36px,4.5vw,64px);
  align-items:start;
}
.ai-technical-content{min-width:0}
.ai-technical-layout .ai-placeholder-square{position:sticky;top:calc(var(--header-h) + 24px)}
.ai-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-sm);align-items:start}
.ai-detail{padding:0 var(--space-5)}
.ai-detail summary{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;
  align-items:start;gap:var(--space-3);
  padding:var(--space-5) 0;
  cursor:pointer;list-style:none;
  font-size:var(--fs-sm);font-weight:var(--w-semi);line-height:1.4;
  color:var(--ink);
}
.ai-detail summary::-webkit-details-marker{display:none}
.ai-detail summary i{
  display:grid;place-items:center;
  width:38px;height:38px;
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  color:var(--accent-strong);
}
.ai-detail summary span{min-width:0;padding-top:var(--space-2)}
.ai-detail summary b{
  padding-top:var(--space-2);color:var(--accent);font-weight:var(--w-semi);
  transition:transform var(--dur-mid) var(--ease-out);
}
.ai-detail[open] summary b{transform:rotate(45deg)}
.ai-detail-preview{padding:0 0 var(--space-5)}
.ai-detail-preview h4{margin-bottom:var(--space-3)}
.ai-detail-preview p{margin-bottom:var(--space-4);font-size:var(--fs-sm)}
.ai-detail-show-more{min-width:210px;justify-content:center}

body.ai-technical-modal-open{overflow:hidden}
.ai-technical-modal{position:fixed;inset:0;z-index:2100;display:grid;place-items:center;padding:var(--space-6)}
.ai-technical-modal[hidden]{display:none}
.ai-technical-modal-backdrop{
  position:absolute;inset:0;
  background:var(--brand);opacity:0.76;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.ai-technical-modal-dialog{
  position:relative;
  display:flex;flex-direction:column;
  width:min(820px,92vw);max-height:84vh;overflow:hidden;
  border-radius:var(--radius-2xl);
  background:var(--white);
  box-shadow:var(--shadow-lg);
  color:var(--text);
}
.ai-technical-modal-header{
  display:grid;grid-template-columns:48px minmax(0,1fr) 44px;
  align-items:center;gap:var(--space-4);
  padding:var(--space-5) var(--space-6);
  border-bottom:1px solid var(--hairline);
}
.ai-technical-modal-header > i{
  display:grid;place-items:center;
  width:48px;height:48px;
  border-radius:var(--radius-md);
  background:var(--accent-soft);
  color:var(--accent-strong);
  font-size:var(--fs-h4);
}
.ai-technical-modal-header h3{margin:0}
.ai-technical-modal-close{
  display:grid;place-items:center;
  width:44px;height:44px;
  border:1px solid var(--hairline);
  border-radius:50%;
  background:var(--off-white);
  color:var(--ink);
  font-size:1.6em;line-height:1;
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out);
}
.ai-technical-modal-close:hover{background:var(--accent-soft);color:var(--accent-strong)}
.ai-technical-modal-body{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-7)}
.ai-technical-modal-body h4{margin-bottom:var(--space-4)}
.ai-technical-modal-body ul{display:grid;gap:var(--space-2)}
.ai-technical-modal-footer{
  display:flex;justify-content:flex-end;
  padding:var(--space-4) var(--space-6);
  border-top:1px solid var(--hairline);
  background:var(--off-white);
}

/* ── Brand board ── */
.ai-brand-board{padding:var(--space-4)}
.ai-brand-board .ai-image-placeholder{border-radius:var(--radius-lg)}

/* ── Pricing cards ── */
.ai-pricing-grid{align-items:start}
.ai-price-card > .section-label{margin-bottom:var(--space-3)}
.ai-price-card .pkg-desc{margin-bottom:var(--space-2)}
.ai-payment-options{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;gap:var(--gap-sm);
  margin:var(--space-6) 0;padding:var(--space-5) 0;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  text-align:center;
}
.ai-payment-option h4{margin-bottom:var(--space-3)}
.ai-payment-option > small{display:block;font-size:var(--fs-2xs);color:var(--muted-3)}
.ai-price{font-size:clamp(30px,3.2vw,42px);font-weight:var(--w-thin);line-height:1.05;color:var(--ink)}
.ai-price small{display:block;margin-top:var(--space-2);font-size:var(--fs-2xs);color:var(--muted-3)}
.ai-limited-label{margin-bottom:var(--space-3);font-size:var(--fs-xs);color:var(--accent-strong)}
.ai-payment-amount{font-size:clamp(22px,2.2vw,28px);font-weight:var(--w-thin);line-height:1.1;color:var(--ink)}
.ai-payment-line{font-size:var(--fs-xs);color:var(--muted)}
.ai-payment-then{
  margin:var(--space-3) 0;
  font-size:var(--fs-xs);font-weight:var(--w-semi);
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted-3);
}
.ai-payment-total{
  margin-top:var(--space-4);padding-top:var(--space-3);
  border-top:1px solid var(--hairline);
  font-size:var(--fs-xs);font-weight:var(--w-semi);color:var(--ink);
}
.ai-payment-divider{position:relative;align-self:stretch;display:grid;place-items:center;width:34px}
.ai-payment-divider::before{content:"";position:absolute;inset:0 auto 0 50%;width:1px;background:var(--hairline)}
.ai-payment-divider span{
  position:relative;padding:var(--space-2) 0;
  background:var(--white);
  font-size:var(--fs-2xs);font-weight:var(--w-semi);letter-spacing:0.08em;
  color:var(--muted-3);
}
.ai-ideal{margin-bottom:var(--space-4);font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
.ai-ideal b{
  display:block;margin-bottom:var(--space-1);
  font-size:var(--fs-2xs);font-weight:var(--w-semi);
  letter-spacing:0.1em;text-transform:uppercase;
  color:var(--accent-strong);
}
.package-checklist{display:grid;gap:var(--space-2);margin:var(--space-5) 0;flex:1}
.package-check-item{display:flex;align-items:flex-start;gap:var(--space-3)}
.package-check-icon{flex:none;margin-top:1px;color:var(--accent);font-size:var(--fs-xs);font-weight:var(--w-semi)}
.package-check-text{font-size:var(--fs-xs);line-height:1.55;color:var(--muted)}
.ai-benefit-box{
  display:block;margin:var(--space-2) 0 var(--space-4);padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-lg);
  font-size:var(--fs-sm);font-weight:var(--w-semi);line-height:1.5;
  color:var(--ink);
}
.ai-small-note{display:block;font-size:var(--fs-2xs);line-height:1.6;color:var(--muted-3)}
.ai-price-card > .btn{margin-top:var(--space-5);width:100%;justify-content:center}

/* ── Process timeline ── */
.ai-timeline{
  position:relative;display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  column-gap:var(--gap-md);row-gap:var(--gap-lg);
  align-items:start;
}
.ai-timeline::before{content:"";position:absolute;left:8%;right:8%;top:24px;height:2px;background:var(--accent)}
.ai-timeline article{position:relative;display:grid;grid-template-rows:72px 64px auto;min-width:0;text-align:center}
.ai-timeline article > b{
  grid-row:1;
  display:grid;place-items:center;
  width:48px;height:48px;margin:0 auto;
  border-radius:var(--radius-sm);
  background:var(--accent);
  color:var(--on-dark);
  font-size:var(--fs-h4);font-weight:var(--w-semi);line-height:1;
}
.ai-process-heading-wrap{grid-row:2;display:flex;align-items:flex-start;justify-content:center}
.ai-timeline h3{margin:0;font-size:var(--fs-sm);line-height:1.35;letter-spacing:0.04em}
.ai-timeline p{grid-row:3;margin:0;font-size:var(--fs-xs);line-height:1.6}

/* ── One team, reviews badge ── */
.ai-one-team-content p + p{margin-top:var(--space-4)}
.ai-reviews-badge-row{display:flex;justify-content:center;margin-top:var(--space-6)}

/* ── Final CTA over its own video plate ── */
.ai-final-cta{
  position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(80px,9vw,124px) 0;
  background:linear-gradient(168deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:var(--on-dark);
  text-align:center;
}
.ai-final-bg{position:absolute;inset:0;z-index:0;border-radius:0;background:transparent;opacity:0.18;pointer-events:none}
.ai-final-cta .container{position:relative;z-index:1;max-width:var(--container-medium)}
.ai-final-cta h2{margin-bottom:var(--space-4);color:var(--on-dark)}
.ai-final-cta p{max-width:720px;margin-inline:auto;font-size:var(--fs-lead);color:var(--on-dark-soft)}
.ai-final-cta .cta-buttons{justify-content:center;margin:var(--space-7) 0 var(--space-6)}
.ai-final-note{display:block;font-size:var(--fs-sm);font-weight:var(--w-medium);color:var(--on-dark-soft)}

/* ── Mobile action bar — shown only on the narrowest widths ── */
.ai-mobile-bar{display:none}

/* ── Responsive ── */
@media (max-width:1180px){
  .ai-summary-grid,
  .ai-additional-elements .ai-check-columns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ai-digital-head-office .ai-split{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:1080px){
  .ai-split,.ai-platform-layout,.ai-technical-layout{grid-template-columns:minmax(0,1fr)}
  .ai-technical-layout .ai-placeholder-square{position:static;max-width:640px;margin-inline:auto}
  .ai-float-top{right:0;top:20px}
  .ai-float-bottom{left:0;bottom:20px}
  .ai-stat-card{left:0}
  .ai-stat-card-two{right:0}
  .ai-review-card{right:0}
}

@media (max-width:860px){
  .ai-ad-grid,.ai-compare,.ai-detail-grid,
  .ai-turn-benefit-grid,.ai-page-map{grid-template-columns:minmax(0,1fr)}
  .ai-timeline{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ai-timeline::before{display:none}

  .ai-summary-grid,.ai-check-columns,
  .ai-additional-elements .ai-check-columns,
  .ai-page-map ul,.ai-ad-card .ai-check-list{grid-template-columns:minmax(0,1fr)}
  .ai-payment-options{grid-template-columns:minmax(0,1fr);gap:var(--gap-md)}
  .ai-payment-divider{width:auto;height:30px}
  .ai-payment-divider::before{inset:50% 0 auto 0;width:auto;height:1px}
  .ai-payment-divider span{padding:0 var(--space-3)}
}

@media (max-width:560px){
  /* The floating labels stop overlapping and stack under their frame. */
  .ai-float,.ai-review-card,.ai-stat-card{position:static;max-width:none;margin:var(--space-4) 0 0}
  .ai-timeline{grid-template-columns:minmax(0,1fr);row-gap:var(--gap-md)}
  .ai-timeline article{grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:var(--space-4);text-align:left}
  .ai-timeline article > b{grid-row:1 / 3;grid-column:1;margin:0}
  .ai-process-heading-wrap{grid-row:1;grid-column:2;justify-content:flex-start}
  .ai-timeline p{grid-row:2;grid-column:2;margin-top:var(--space-2)}
  .ai-strip-card{flex-direction:column;padding:var(--space-5)}
  .ai-detail-show-more{min-width:0;width:100%}

  /* Sticky call / packages bar, with the WhatsApp bubble moved clear of it. */
  .ai-mobile-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:1400;
    display:flex;gap:var(--space-2);padding:var(--space-2);
    border-top:1px solid var(--hairline-strong);
    background:var(--white);
    box-shadow:var(--shadow-md);
  }
  .ai-mobile-bar a{
    flex:1;
    display:flex;align-items:center;justify-content:center;gap:var(--space-2);
    padding:var(--space-3) var(--space-2);
    border-radius:var(--radius-pill);
    font-size:var(--fs-xs);font-weight:var(--w-semi);
    color:var(--brand);white-space:nowrap;
  }
  body:has(.ai-page) .x3-whatsapp-widget{left:auto;right:14px;bottom:80px}
  body:has(.ai-page) .x3-whatsapp-button{width:54px;height:54px;padding:0;justify-content:center}
  body:has(.ai-page) .x3-whatsapp-button span{display:none}
  body:has(.ai-page) .site-footer{padding-bottom:88px}
}