/* ============================================================
   DIA v3 — responsive
   Verified at 320 · 360 · 375 · 390 · 430 · 768 · 1024 · 1200 · 1440
   ============================================================ */

/* Collapse the header early rather than squeezing it. The subtitle only
   returns at 1281px (see the min-width rule below); without this upper bound
   it reappeared from 1081px and pushed Contact and the CTA out of the header. */
@media (max-width: 1280px) {
  .brand__sub { display: none; }
}

/* The inline nav, Contact link and CTA stop fitting beside the brand below
   1181px — on every route, and worst on the longer EN/FR/ES labels — so the
   sheet menu takes over there instead of the header clipping its own CTA.
   Raised from 1081px when the Lead Engine entry was added to the nav.
   The rest of the mobile layout still switches at 940px. */
@media (max-width: 1180px) {
  .nav { display: none; }
  .header-link { display: none; }
  .nav-toggle { display: inline-flex; }
}

@media (max-width: 940px) {
  /* Mobile: headline, supporting copy, then the callback card straight away —
     the secondary action and trust line move underneath it. */
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "stage" "secondary";
    gap: var(--s6);
  }
  .hero h1 { max-width: none; }
  .hero__secondary { text-align: center; }
  .hero__secondary .btn { width: 100%; }
  .hero__sub { max-width: none; }

  .demo-panel { grid-template-columns: minmax(0, 1fr); }
  .demo-panel__main { border-right: 0; border-bottom: 1px solid var(--dark-border); }

  .chan { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .chan h3 { max-width: none; }

  .config { grid-template-columns: minmax(0, 1fr); }
  .config-result { position: static; }

  .contact-grid { grid-template-columns: minmax(0, 1fr); }

  .setup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { order: -1; }
  .plan__for { min-height: 0; }
  .stepline { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .grid-3 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .usage-grid { grid-template-columns: minmax(0, 1fr); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }

  /* Two-plan picker replaces the wide comparison table. */
  .cmp-picker { display: flex; }
  .cmp-table { font-size: var(--fs-xs); }
  .cmp-table th, .cmp-table td { padding: 0.5rem 0.5rem; }
  .cmp-table col.is-hidden, .cmp-table .is-hidden { display: none; }

  .mobile-cta { display: flex; }
  body { padding-bottom: 74px; }
  .toast-region { bottom: 84px; }

  .contact-form-grid { grid-template-columns: minmax(0, 1fr); }

  /* Lighter background on phones: fewer light fields, no beam, no grid */
  .glow--warm, .beam, .grid-layer { display: none; }
  .glow { filter: blur(48px); }
  .signal { opacity: 0.35; }
  .hero-bg { inset: -8% -18% -12% -18%; }

  /* Result chips stack two-up so the workflow panel stays compact. */
  .workflow__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow__results .resultchip:last-child { grid-column: 1 / -1; }

  .setup-grid { grid-template-columns: minmax(0, 1fr); }
  .modal__body { padding: var(--s4) var(--s5) var(--s6); }
  dialog.modal { width: calc(100vw - 1.5rem); max-height: 88vh; }
}

@media (max-width: 560px) {
  .callcard__row { grid-template-columns: 104px minmax(0, 1fr); }
  .scenarios { grid-template-columns: 1fr; }
  .hero__ctas .btn { width: 100%; }
  .final-cta__row .btn { width: 100%; }
  .config__nav { flex-direction: column-reverse; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .demo-bar { gap: var(--s3); }
  .demo-controls { margin-left: 0; }
}

/* The header CTA shortens on narrow phones; every other CTA keeps the
   full "Try the AI receptionist" wording. */
.cta-short { display: none; }
@media (max-width: 430px) {
  .cta-full { display: none; }
  .cta-short { display: inline; }
}

@media (max-width: 380px) {
  :root { --gutter: 1rem; }
  .hero h1 { font-size: 1.95rem; }
  .callcard__row { grid-template-columns: minmax(0, 1fr); }
  .plan__amount { font-size: 2.15rem; }
  .result__amount { font-size: 1.7rem; }
  .brand__name { font-size: 1rem; }
  .mobile-cta .btn { font-size: var(--fs-xs); padding-inline: 0.7rem; }
  .rangepair { grid-template-columns: 1fr 78px; }
}

/* Wide screens: the subtitle beside the logo returns. */
@media (min-width: 1281px) {
  .brand__sub { display: inline; }
}

/* ============================================================
   DIA mobile UX overhaul — phone-first product demo
   ============================================================ */
.stage-mobile-summary { display: none; }

@media (max-width: 720px) {
  /* Product demo becomes a focused mobile conversation instead of
     stacking the full desktop command centre into a very long page. */
  #product.section { padding-block: 3.25rem; }
  #product .section-head { margin-bottom: 1.5rem; }
  #product .section-head h2 { font-size: clamp(1.9rem, 9vw, 2.6rem); line-height: 1.02; }
  #product .section-head p { font-size: 1rem; line-height: 1.55; }

  .stage { border-radius: 22px; overflow: hidden; }
  .stage__bar {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: .65rem;
    padding: .8rem;
    background: rgba(11,19,32,.92);
  }
  .stage__bar > .tabs {
    min-width: 0;
    width: 100%;
    display: flex;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .stage__bar > .tabs::-webkit-scrollbar { display:none; }
  #stage-business { grid-column: 1 / -1; }
  #stage-channel { grid-column: 1; }
  .stage__bar .tab { flex: 0 0 auto; min-height: 40px; padding-inline: .85rem; font-size: .78rem; }
  .stage__controls { grid-column: 2; width: auto; margin: 0; gap: .35rem; }
  .stage__btn { width: 40px; height: 40px; }
  #stage-speed { display:none; }

  .stage-context {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .25rem .75rem;
    padding: .75rem 1rem;
    font-size: .72rem;
    line-height: 1.35;
  }
  .stage-context > span:nth-child(2),
  .stage-context > span:nth-child(4),
  .stage-context__label { display:none; }
  .stage-context > span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .stage-context > span:nth-child(3) { justify-self:end; }

  .stage__grid { display:block; min-height:0; }
  .stage__col--left,
  .stage__col--right { display:none; }
  .stage__col--center { border-top:0 !important; min-height:0; }

  .convo-head {
    padding: .85rem 1rem;
    gap: .7rem;
    background: rgba(255,255,255,.025);
  }
  .convo-head__meta b { font-size: .9rem; line-height:1.25; }
  .convo-head__meta .xs { font-size:.68rem; }
  .convo-head__right { gap:.55rem; }
  .wave { display:none; }
  .calltimer { font-size:.78rem; }

  .stage .convo {
    min-height: 330px;
    max-height: 430px;
    padding: 1rem;
    gap: .75rem;
    background: linear-gradient(180deg, rgba(255,255,255,.012), rgba(255,255,255,.025));
  }
  .stage .msg {
    max-width: 88%;
    padding: .7rem .82rem;
    border-radius: 16px;
    font-size: .92rem;
    line-height: 1.42;
  }
  .stage .msg__who { font-size: .62rem; margin-bottom: 2px; }

  .stage-mobile-summary {
    display:block;
    padding: .8rem 1rem .2rem;
    border-top: 1px solid var(--dark-border);
  }
  .stage-mobile-summary__label {
    display:block;
    color: var(--text-on-dark-soft);
    font-size:.66rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:.55rem;
  }
  .stage-mobile-summary__chips { display:flex; flex-wrap:wrap; gap:.4rem; }
  .stage-mobile-summary__chips span {
    padding:.42rem .58rem;
    border-radius:999px;
    background:rgba(56,214,234,.09);
    border:1px solid rgba(56,214,234,.16);
    color:#dceef7;
    font-size:.7rem;
    line-height:1;
  }

  .stage__foot {
    display:grid;
    grid-template-columns:1fr;
    gap:.65rem;
    padding:.8rem 1rem 1rem;
    border-top:0;
  }
  .viewtoggle { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .viewtoggle button { min-height:42px; padding:.35rem .55rem; font-size:.72rem; }
  .handover-btn { width:100%; min-height:42px; margin:0; font-size:.72rem; }
  .rec { padding:1rem; }
  .rec__row { font-size:.78rem; gap:.75rem; }

  /* Less intrusive fixed CTA; it should not cover the demo. */
  .mobile-cta { padding: 7px .8rem calc(7px + env(safe-area-inset-bottom,0px)); }
  .mobile-cta .btn { min-height:46px; padding:.55rem .7rem; font-size:.82rem; }
  body { padding-bottom: 64px; }
}

@media (max-width: 430px) {
  .site-header .btn { min-height:44px; padding-inline:1rem; }
  .hero { padding-top: 1.4rem; }
  .hero h1 { font-size: clamp(2.35rem, 11vw, 3.25rem); line-height:.98; letter-spacing:-.045em; }
  .hero__sub { font-size:1.05rem; line-height:1.55; }
  .hero__modules { font-size:.92rem; line-height:1.5; }
  .callcard { border-radius:22px; }
  .callcard__head h2 { font-size:1.28rem; }
}


/* ============================================================
   DIA refinement pass — stronger mobile header/menu and more premium story cards
   ============================================================ */

/* Premium industry cards across breakpoints */
.story.card,
.card.story {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(15, 35, 70, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(247,250,255,0.98));
  box-shadow:
    0 18px 38px rgba(15, 23, 42, 0.06),
    0 4px 12px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.story.card::before,
.card.story::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, #155EEF 0%, #0A8BE0 48%, #38D6EA 100%);
}
.story__tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: var(--s4);
  padding: .5rem .78rem;
  border-radius: 999px;
  background: rgba(21, 94, 239, 0.07);
  color: #155EEF;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .08em;
}
.story__line { gap: .7rem; margin-bottom: var(--s5); }
.story__q, .story__a {
  padding: .9rem 1rem;
  border-radius: 18px;
  font-size: .96rem;
  line-height: 1.55;
  border: 1px solid transparent;
}
.story__q {
  background: #F2F5FA;
  color: #111827;
  border-color: rgba(15,35,70,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.story__a {
  background: linear-gradient(180deg, rgba(231,239,255,.95), rgba(241,246,255,.96));
  color: #0A4EA6;
  border-color: rgba(21,94,239,.12);
}
.story__reveal {
  margin-bottom: var(--s5);
  padding: .9rem 1rem;
  border-radius: 16px;
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6,182,212,.12);
}
.story__reveal p,
.story__reveal .small,
.story__reveal .muted {
  margin: 0;
  color: #516071;
}
.story__result {
  margin-top: auto;
  padding: 1rem 1.05rem 0;
  border-top: 1px solid rgba(15,35,70,.08);
  color: #475467;
  line-height: 1.7;
}
.story__result b {
  display: inline-block;
  margin-right: .3rem;
  color: #101828;
  font-weight: 700;
}

/* Give premium cards on mobile stronger separation from the page background */
@media (max-width: 768px) {
  #solutions.section { background: linear-gradient(180deg, rgba(247,249,252,0), rgba(244,247,252,.85) 16%, rgba(247,249,252,0) 100%); }
  #solutions .grid.grid-3 { gap: 1rem; }
  .story.card, .card.story { padding: 1.1rem; border-radius: 24px; }
}

@media (max-width: 940px) {
  /* Keep the header readable on phones instead of letting hero text sit under it. */
  .site-header {
    background: rgba(245, 245, 247, 0.88);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom-color: rgba(15, 35, 70, 0.08);
  }

  /* On phones the menu should feel like a real overlay, not just more page content. */
  .nav-sheet {
    inset: calc(var(--header-h) + 4px) .75rem .75rem .75rem;
    border-radius: 24px;
    background: rgba(8, 17, 30, 0.92);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 22px 60px rgba(0,0,0,.35);
    padding: 1rem 0 1.2rem;
  }
  .nav-sheet .wrap { max-width: none; }
  .nav-sheet__intro {
    margin: 0 0 1rem;
    padding: 0 .3rem .95rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .nav-sheet__eyebrow {
    display: block;
    margin: 0 0 .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(163, 193, 255, 0.9);
  }
  .nav-sheet__title {
    margin: 0;
    color: #fff;
    font-size: 1.3rem;
    letter-spacing: -.03em;
  }
  .nav-sheet__copy {
    margin: .45rem 0 0;
    color: rgba(226,232,240,.75);
    font-size: .95rem;
    line-height: 1.5;
    max-width: 28rem;
  }
  .nav-sheet__list { margin: 0 0 1rem; }
  .nav-sheet__list li { border-bottom: 0; }
  .nav-sheet__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    padding: .95rem 1rem;
    margin-bottom: .55rem;
    border-radius: 18px;
    background: rgba(255,255,255,.055);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  }
  .nav-sheet__list a::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.7px solid rgba(255,255,255,.9);
    border-bottom: 1.7px solid rgba(255,255,255,.9);
    transform: rotate(-45deg);
    flex: none;
  }
  .nav-sheet__list a:hover { color: #fff; background: rgba(21,94,239,.25); }
  .nav-sheet .lang-switch--mobile {
    display: inline-flex;
    margin: .25rem 0 1rem;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.09);
  }
  .nav-sheet .lang-switch__link { color: rgba(255,255,255,.78); }
  .nav-sheet .lang-switch__link:hover { background: rgba(255,255,255,.09); color: #fff; }
  .nav-sheet__secondary {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.08);
    gap: .65rem;
  }
  .nav-sheet__secondary a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: .55rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.055);
    color: rgba(255,255,255,.82);
  }
  .nav-sheet .btn.btn--lg.btn--block {
    margin-top: .1rem;
    min-height: 50px;
  }

  .hero { padding-top: calc(var(--header-h) + 2.8rem); }
  .hero .eyebrow {
    max-width: 20ch;
    margin-bottom: .8rem;
    font-size: .75rem;
    line-height: 1.35;
  }
}

@media (max-width: 430px) {
  .header-inner { gap: .65rem; min-height: 66px; }
  .site-header .brand { min-width: 0; }
  .site-header .btn.btn--sm {
    padding-inline: .95rem;
    font-size: .86rem;
  }
  .hero { padding-top: calc(var(--header-h) + 3.15rem); }
  .hero__copy { padding-top: .2rem; }
  .hero .eyebrow { max-width: 19ch; }
  .story__q, .story__a { font-size: .92rem; }
}


/* ============================================================
   Header spacing hotfix — separate logo / CTA / hamburger on mobile
   ============================================================ */
@media (max-width: 940px) {
  .site-header .wrap {
    padding-left: max(1rem, env(safe-area-inset-left, 0px) + 1rem);
    padding-right: max(1rem, env(safe-area-inset-right, 0px) + 1rem);
  }
  .header-inner {
    justify-content: space-between;
    gap: .85rem;
  }
  .brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: .7rem;
  }
  .brand__name {
    white-space: nowrap;
  }
  .header-actions {
    margin-left: auto;
    flex: 0 0 auto;
    gap: .7rem;
    display: flex;
    align-items: center;
  }
  .header-actions .btn.btn--sm {
    flex: 0 0 auto;
    min-width: 0;
    padding-inline: 1.1rem;
    border-radius: 999px;
    white-space: nowrap;
  }
  .nav-toggle {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin-left: .05rem;
  }
}

@media (max-width: 430px) {
  .site-header .wrap {
    padding-left: .95rem;
    padding-right: .95rem;
  }
  .header-inner {
    gap: .75rem;
  }
  .brand__mark {
    width: 30px;
    height: 30px;
  }
  .brand__name {
    font-size: 1.02rem;
  }
  .header-actions {
    gap: .62rem;
  }
  .header-actions .btn.btn--sm {
    padding-inline: 1rem;
    min-height: 44px;
    font-size: .85rem;
  }
  .nav-toggle {
    margin-left: .08rem;
  }
}

@media (max-width: 360px) {
  .header-actions .btn.btn--sm {
    padding-inline: .9rem;
    font-size: .82rem;
  }
}


/* ============================================================
   FINAL MOBILE HEADER / HERO FIX — 2026-08
   ============================================================ */
@media (max-width: 940px) {
  /* Header participates in layout on mobile, so it can never cover the hero. */
  .site-header {
    position: sticky !important;
    top: 0;
    inset: auto !important;
    background: rgba(248,250,253,.96) !important;
    border-bottom: 1px solid rgba(15,35,70,.08) !important;
    box-shadow: 0 6px 22px rgba(15,23,42,.045);
  }
  .header-inner {
    min-height: 64px !important;
    gap: .55rem !important;
  }
  .site-header .wrap {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .brand {
    flex: 0 0 auto !important;
    gap: .55rem !important;
  }
  .brand__mark { width: 32px !important; height: 32px !important; }
  .brand__name { font-size: .98rem !important; font-weight: 650 !important; }
  .header-actions {
    margin-left: auto !important;
    gap: .45rem !important;
    flex: 0 0 auto !important;
  }
  .header-actions .btn.btn--sm {
    min-height: 40px !important;
    padding: .45rem .9rem !important;
    font-size: .79rem !important;
    line-height: 1 !important;
    box-shadow: 0 7px 18px rgba(21,94,239,.16);
  }
  .nav-toggle {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    margin-left: .08rem !important;
    border-radius: 12px !important;
    background: rgba(15,35,70,.035);
  }
  .nav-toggle__bars { width: 17px; }

  /* Sticky header already consumes height; do not reserve a second header-height. */
  .hero {
    padding-top: 2.35rem !important;
  }

  /* The sheet begins below the sticky header. */
  .nav-sheet {
    top: 72px !important;
    bottom: .75rem !important;
  }

  /* The bottom bar was hiding form fields and fighting the browser UI. */
  .mobile-cta { display: none !important; }
  body { padding-bottom: 0 !important; }
  .toast-region { bottom: 1rem !important; }
}

@media (max-width: 430px) {
  .site-header .wrap { padding-inline: .9rem !important; }
  .header-inner { min-height: 62px !important; }
  .brand__mark { width: 30px !important; height: 30px !important; }
  .brand__name { font-size: .95rem !important; }
  .header-actions .btn.btn--sm {
    min-height: 38px !important;
    padding-inline: .82rem !important;
    font-size: .76rem !important;
  }
  .nav-toggle { width: 38px !important; height: 38px !important; flex-basis: 38px !important; }
  .hero { padding-top: 2rem !important; }
  .hero h1 {
    font-size: clamp(2.55rem, 11.8vw, 3.25rem) !important;
    line-height: .96 !important;
    margin-top: 0 !important;
  }
  .hero__sub { font-size: 1rem !important; line-height: 1.55 !important; }
  .hero__modules { margin-top: 1rem !important; font-size: .9rem !important; }
  .callcard { margin-top: .25rem; }
  .phone-hint { font-size: .72rem; line-height: 1.4; }
}

@media (max-width: 360px) {
  .site-header .wrap { padding-inline: .72rem !important; }
  .header-actions .btn.btn--sm { padding-inline: .7rem !important; font-size: .72rem !important; }
}


/* ============================================================
   DIA automation premium pass — modules, workflow, featured plan
   ============================================================ */

/* MODULES */
.dia-modules { position:relative; overflow:hidden; }
.dia-modules::before { content:""; position:absolute; width:520px; height:520px; border-radius:50%; right:-260px; top:10%; background:radial-gradient(circle,rgba(21,94,239,.08),transparent 68%); pointer-events:none; }
.dia-module-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.15rem; }
.dia-module-card { --module-accent:#155EEF; --module-rgb:21,94,239; position:relative; isolation:isolate; overflow:hidden; min-height:330px; display:flex; flex-direction:column; padding:1.5rem; border:1px solid rgba(15,35,70,.09); border-radius:26px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,255,.96)); box-shadow:0 18px 50px rgba(15,23,42,.07),inset 0 1px rgba(255,255,255,.9); transition:transform .35s var(--ease-out),box-shadow .35s var(--ease-out),border-color .35s; }
.dia-module-card::before { content:""; position:absolute; z-index:-1; width:230px; height:230px; right:-100px; top:-100px; border-radius:50%; background:radial-gradient(circle,rgba(var(--module-rgb),.18),rgba(var(--module-rgb),0) 70%); }
.dia-module-card::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.26; background-image:linear-gradient(rgba(var(--module-rgb),.06) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--module-rgb),.06) 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(135deg,#000,transparent 66%); }
.dia-module-card--whatsapp { --module-accent:#0A9F78; --module-rgb:10,159,120; }
.dia-module-card--instagram { --module-accent:#6755D9; --module-rgb:103,85,217; }
.dia-module-card--web { --module-accent:#078BB7; --module-rgb:7,139,183; }
.dia-module-card--workflow { --module-accent:#155EEF; --module-rgb:21,94,239; }
.dia-module-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(15,23,42,.1); border-color:rgba(var(--module-rgb),.2); }
.dia-module-card__icon { transition: transform .3s var(--ease-out), box-shadow .3s; }
.dia-module-card:hover .dia-module-card__icon { transform: translateY(-2px) scale(1.06); }
.dia-module-grid .dia-module-card:nth-child(1) { transition-delay: 0s; }
.dia-module-grid .dia-module-card:nth-child(2) { transition-delay: .06s; }
.dia-module-grid .dia-module-card:nth-child(3) { transition-delay: .12s; }
.dia-module-grid .dia-module-card:nth-child(4) { transition-delay: .18s; }
.dia-module-card__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.45rem; }
.dia-module-card__icon { width:50px; height:50px; display:grid; place-items:center; border-radius:16px; color:var(--module-accent); background:rgba(var(--module-rgb),.09); border:1px solid rgba(var(--module-rgb),.13); box-shadow:0 8px 24px rgba(var(--module-rgb),.08); }
.dia-module-card__icon svg { width:24px; height:24px; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.dia-module-card__badge { padding:.38rem .68rem; border-radius:999px; color:var(--module-accent); background:rgba(var(--module-rgb),.075); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.dia-module-card__signal { position:absolute; top:75px; right:1.5rem; display:flex; align-items:center; gap:4px; height:18px; opacity:.65; }
.dia-module-card__signal i { display:block; width:3px; height:7px; border-radius:4px; background:var(--module-accent); animation:diaSignal 1.35s ease-in-out infinite; }
.dia-module-card__signal i:nth-child(2){height:13px;animation-delay:.12s}.dia-module-card__signal i:nth-child(3){height:9px;animation-delay:.24s}.dia-module-card__signal i:nth-child(4){height:15px;animation-delay:.36s}
@keyframes diaSignal { 0%,100%{transform:scaleY(.6);opacity:.35}50%{transform:scaleY(1);opacity:1} }
.dia-module-card h3 { margin:0 0 .65rem; font-size:clamp(1.45rem,2vw,1.8rem); letter-spacing:-.035em; }
.dia-module-card > p { margin:0; color:var(--text-secondary); line-height:1.65; max-width:32rem; }
.dia-module-card__chips { display:flex; flex-wrap:wrap; gap:.45rem; margin:1.15rem 0 1.35rem; }
.dia-module-card__chips span { padding:.42rem .68rem; border-radius:999px; border:1px solid rgba(var(--module-rgb),.1); background:rgba(var(--module-rgb),.055); color:#42526B; font-size:.72rem; font-weight:600; }
.dia-module-card__link { margin-top:auto; display:inline-flex; align-items:center; gap:.5rem; width:max-content; min-height:44px; color:var(--module-accent); font-size:.9rem; font-weight:650; text-decoration:none; background:none; cursor:pointer; }
.dia-module-card__link span { transition:transform .2s var(--ease-out); }.dia-module-card__link:hover span{transform:translateX(4px)}
.dia-module-cta { margin-top:1.15rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1.4rem 1.5rem; border:1px solid rgba(15,35,70,.08); border-radius:24px; background:linear-gradient(90deg,rgba(234,241,255,.75),rgba(245,249,255,.92)); }
.dia-module-cta .eyebrow { margin:0 0 .3rem; font-size:.68rem; }.dia-module-cta h3{margin:0 0 .25rem;font-size:1.15rem}.dia-module-cta p{margin:0;color:var(--text-secondary);font-size:.85rem}.dia-module-cta__pulse{display:inline-block;width:8px;height:8px;margin-right:.45rem;border-radius:50%;background:#155EEF;box-shadow:0 0 0 0 rgba(21,94,239,.3);animation:diaPulse 2s infinite}
@keyframes diaPulse{0%{box-shadow:0 0 0 0 rgba(21,94,239,.3)}70%{box-shadow:0 0 0 10px rgba(21,94,239,0)}100%{box-shadow:0 0 0 0 rgba(21,94,239,0)}}

/* HOW / CONNECTED AUTOMATION FLOW */
.dia-how { position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(247,249,252,0),rgba(239,245,255,.62),rgba(247,249,252,0)); }
.dia-flow { position:relative; max-width:920px; margin:0 auto; display:grid; gap:1rem; }
.dia-flow__rail { position:absolute; left:31px; top:42px; bottom:42px; width:2px; overflow:hidden; border-radius:4px; background:linear-gradient(#D9E4F5,#BFD2F3,#D9E4F5); }
.dia-flow__runner { position:absolute; left:0; top:-70px; width:2px; height:70px; background:linear-gradient(transparent,#38D6EA,#155EEF,transparent); animation:diaRunner 3.4s linear infinite; }
@keyframes diaRunner { to{transform:translateY(620px)} }
.dia-flow-step { position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); gap:1.15rem; align-items:stretch; }
.dia-flow-step__marker { position:relative; z-index:2; display:flex; justify-content:center; padding-top:1.25rem; }
.dia-flow-step__marker span { width:48px; height:48px; display:grid; place-items:center; border-radius:16px; color:#155EEF; background:rgba(255,255,255,.96); border:1px solid rgba(21,94,239,.18); box-shadow:0 8px 26px rgba(21,94,239,.11),0 0 0 7px rgba(21,94,239,.045); font-size:1.05rem; font-weight:750; }
.dia-flow-step__marker i { position:absolute; top:29px; left:28px; width:8px; height:8px; border-radius:50%; background:#38D6EA; filter:blur(.1px); opacity:.75; animation:diaNode 2.2s ease-in-out infinite; }
@keyframes diaNode{0%,100%{transform:scale(.6);opacity:.25}50%{transform:scale(1.2);opacity:.9}}
.dia-flow-step__card { display:grid; grid-template-columns:54px minmax(0,1fr); gap:1rem; padding:1.25rem 1.35rem; border:1px solid rgba(15,35,70,.08); border-radius:22px; background:rgba(255,255,255,.88); box-shadow:0 12px 34px rgba(15,23,42,.055); backdrop-filter:blur(8px); transition:transform .3s var(--ease-out),box-shadow .3s; }
.dia-flow-step:hover .dia-flow-step__card { transform:translateX(4px); box-shadow:0 18px 44px rgba(15,23,42,.08); }
.dia-flow-step__icon { width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(145deg,#EDF4FF,#F8FBFF);color:#155EEF;border:1px solid rgba(21,94,239,.1); }
.dia-flow-step__icon svg{width:23px;height:23px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.dia-flow-step__label{display:block;margin-bottom:.28rem;color:#155EEF;font-size:.68rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}.dia-flow-step h3{margin:0 0 .38rem;font-size:1.25rem;letter-spacing:-.025em}.dia-flow-step p{margin:0;color:var(--text-secondary);font-size:.9rem;line-height:1.6}.dia-flow__footer{max-width:720px;margin:1.1rem auto 0;text-align:center}.dia-flow__footer p{margin:.55rem 0 0;color:var(--text-secondary);font-size:.82rem}.dia-flow__status{display:inline-flex;align-items:center;gap:.5rem;padding:.48rem .8rem;border-radius:999px;background:#fff;border:1px solid rgba(15,35,70,.08);font-size:.75rem;font-weight:650;color:#344054}.dia-flow__status i{width:7px;height:7px;border-radius:50%;background:#16A174;box-shadow:0 0 0 4px rgba(22,161,116,.09)}

/* FEATURED PRICING */
.plan--featured { position:relative; overflow:visible; background:linear-gradient(155deg,#F8FBFF 0%,#EAF2FF 55%,#F5FAFF 100%); border:1.5px solid rgba(21,94,239,.72); box-shadow:0 24px 60px rgba(21,94,239,.14),inset 0 1px #fff; }
.plan--featured::before { content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none; background:linear-gradient(120deg,transparent 25%,rgba(56,214,234,.12),transparent 68%); background-size:220% 100%; animation:diaPlanSheen 7s linear infinite; }
@keyframes diaPlanSheen{to{background-position:-220% 0}}
.plan--featured .plan__badge { top:-15px; left:1.25rem; padding:.45rem .85rem; background:#155EEF; color:#fff; border:3px solid var(--page-bg); box-shadow:0 7px 18px rgba(21,94,239,.2); }
.plan__recommend { display:flex;align-items:center;gap:.45rem;margin:.65rem 0 .15rem;color:#155EEF;font-size:.72rem;font-weight:650}.plan__recommend span{width:7px;height:7px;border-radius:50%;background:#38D6EA;box-shadow:0 0 0 5px rgba(56,214,234,.1)}
.plan--featured .plan__cta .btn { box-shadow:0 12px 28px rgba(21,94,239,.22); }
.plan--featured .ticks li { color:#48576A; }
.pricing-switch .tabs { border:1px solid rgba(15,35,70,.07); padding:.28rem; box-shadow:inset 0 1px rgba(255,255,255,.8); }

/* ---- "one system" connector above the module grid ---- */
.dia-system-link { position: relative; max-width: 420px; margin: -0.4rem auto 1.6rem; height: 48px; }
.dia-system-link svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dia-system-link svg path { fill: none; stroke: rgba(21,94,239,.22); stroke-width: 1.4; stroke-linecap: round; }
.dia-system-link__l, .dia-system-link__r { stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.1s var(--ease-out); }
.dia-system-link.is-in .dia-system-link__l { stroke-dashoffset: 0; }
.dia-system-link.is-in .dia-system-link__r { stroke-dashoffset: 0; transition-delay: .15s; }
.dia-system-link__node {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 74px; height: 74px; margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(150deg, #155EEF, #0A8BE0 60%, #06B6D4);
  color: #fff; box-shadow: 0 14px 30px rgba(21,94,239,.28);
}
.dia-system-link__node b { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; }
.dia-system-link__node small { font-size: .56rem; font-weight: 650; letter-spacing: .03em; opacity: .85; margin-top: 1px; }
@media (prefers-reduced-motion: reduce) { .dia-system-link__l, .dia-system-link__r { transition: none; stroke-dashoffset: 0; } }

/* ---- per-card mini previews (top-right, small, quiet) ---- */
.dia-module-card__preview {
  position: absolute; top: 1.5rem; right: 1.5rem; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  opacity: .92; transition: transform .3s var(--ease-out), opacity .3s;
  pointer-events: none;
}
.dia-module-card:hover .dia-module-card__preview { transform: translateY(-2px); opacity: 1; }
.mp-bubble {
  max-width: 118px; padding: 5px 9px; border-radius: 11px;
  font-size: .64rem; font-weight: 600; line-height: 1.3;
  box-shadow: 0 4px 10px rgba(15,23,42,.07);
}
.mp-bubble--in { align-self: flex-end; background: #fff; color: #42526B; border: 1px solid rgba(15,35,70,.08); border-bottom-right-radius: 3px; }
.mp-bubble--out { align-self: flex-end; background: var(--module-accent); color: #fff; border-bottom-right-radius: 3px; }
.mp-notif { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--module-rgb),.09); color: var(--module-accent); }
.mp-notif svg { width: 17px; height: 17px; }
.mp-notif i { position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; border-radius: 50%; background: #FF3B5C; color: #fff; font-size: .6rem; font-style: normal; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; }
.mp-notif-text { font-size: .62rem; font-weight: 650; color: var(--text-muted); }
.mp-chatwin { display: flex; flex-direction: column; gap: 4px; width: 64px; padding: 8px; border-radius: 12px; background: #fff; border: 1px solid rgba(15,35,70,.08); box-shadow: 0 6px 16px rgba(15,23,42,.06); }
.mp-chatwin i { display: block; height: 5px; border-radius: 3px; background: rgba(var(--module-rgb),.16); }
.mp-chatwin i:nth-child(1) { width: 100%; }
.mp-chatwin i:nth-child(2) { width: 72%; background: var(--module-accent); opacity: .5; }
.mp-chatwin i:nth-child(3) { width: 88%; }

/* ---- Lead Engine & Social cards: text left, live visual right ---- */
.dia-module-card--lead, .dia-module-card--social { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 2.25rem; align-items: center; min-height: 0; }
.dia-module-card--lead .dia-module-card__body, .dia-module-card--social .dia-module-card__body { display: flex; flex-direction: column; }
.dia-module-card--lead { --module-accent: #0A8BE0; --module-rgb: 10,139,224; }
.dia-module-card--social {
  --module-accent: #D6249F; --module-rgb: 214,36,159;
}
.dia-module-card__visual {
  border-radius: 20px; padding: 1.1rem 1.15rem;
  background: linear-gradient(165deg, #0E1829, #16233A);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 20px 50px rgba(11,19,32,.28);
}
/* lead pipeline rows */
.mv-row {
  display: grid; grid-template-columns: 10px minmax(0,1fr) auto; align-items: center; gap: .6rem;
  padding: .5rem .15rem; font-size: .78rem; color: #93A4B8;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.mv-row:last-child { border-bottom: 0; }
.mv-row b { color: #EAF1F8; font-weight: 650; }
.mv-row > span:last-child { justify-self: end; font-size: .72rem; color: #6E8199; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.18); }
.mv-dot--on { background: #38D6EA; box-shadow: 0 0 0 3px rgba(56,214,234,.18); }
.mv-row--score .mv-score { font-weight: 800; color: #FDBA74; font-size: .84rem; }
.mv-row--ready .mv-check { color: #6EE7B7; font-weight: 800; }
/* social calendar rows */
.mv-cal { display: grid; gap: .55rem; }
.mv-post { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; align-items: center; gap: .6rem; padding: .5rem .55rem; border-radius: 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.mv-post b { font-size: .78rem; font-weight: 650; color: #EAF1F8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-plat { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff; }
.mv-plat svg { width: 13px; height: 13px; }
.mv-plat--ig { background: linear-gradient(135deg,#4f5bd5,#962fbf,#d62976,#fa7e1e); }
.mv-plat--fb { background: #1877F2; }
.mv-plat--li { background: #0A66C2; }
.mv-status { font-size: .62rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.mv-status--concept { background: rgba(255,255,255,.1); color: #C9D6E4; }
.mv-status--approved { background: rgba(56,214,234,.14); color: #7DD3FC; }
.mv-status--scheduled { background: rgba(110,231,183,.14); color: #6EE7B7; }

@media(max-width:1080px){
  .dia-module-card--lead, .dia-module-card--social { grid-template-columns: minmax(0,1fr); }
  .dia-module-card__visual { order: 2; }
}
@media(max-width:860px){.dia-module-grid{grid-template-columns:1fr}.dia-module-card{min-height:0}.dia-module-cta{align-items:flex-start;flex-direction:column}.dia-module-cta .btn{width:100%}.dia-module-card--lead,.dia-module-card--social{grid-column:auto}}
@media(max-width:560px){
  .dia-modules .section-head,.dia-how .section-head{margin-bottom:1.8rem}.dia-module-card{padding:1.2rem;border-radius:24px}.dia-module-card__top{margin-bottom:1.15rem}.dia-module-card__icon{width:46px;height:46px;border-radius:14px}.dia-module-card__signal{top:68px;right:1.2rem}.dia-module-card h3{font-size:1.55rem}.dia-module-card > p{font-size:.95rem}.dia-module-card__chips{margin:.95rem 0 1.05rem}.dia-module-card__link{font-size:.86rem}
  .dia-flow{gap:.85rem}.dia-flow__rail{left:22px;top:38px;bottom:38px}.dia-flow-step{grid-template-columns:46px minmax(0,1fr);gap:.72rem}.dia-flow-step__marker{padding-top:1rem}.dia-flow-step__marker span{width:40px;height:40px;border-radius:13px;font-size:.9rem;box-shadow:0 6px 20px rgba(21,94,239,.1),0 0 0 5px rgba(21,94,239,.035)}.dia-flow-step__marker i{top:25px;left:19px;width:7px;height:7px}.dia-flow-step__card{grid-template-columns:1fr;padding:1.05rem 1.05rem 1.1rem;border-radius:20px;gap:.7rem}.dia-flow-step__icon{width:42px;height:42px;border-radius:13px}.dia-flow-step h3{font-size:1.12rem}.dia-flow-step p{font-size:.88rem}.dia-flow-step:hover .dia-flow-step__card{transform:none}
  .plan--featured{margin-top:.5rem}.plan--featured .plan__badge{left:1rem}.plan__recommend{margin-bottom:.55rem}.pricing-switch .tabs{width:100%;display:grid;grid-template-columns:1fr 1.25fr}.pricing-switch .tab{white-space:normal;line-height:1.15;min-height:52px;padding:.5rem .65rem;font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){.dia-module-card__signal i,.dia-flow__runner,.dia-flow-step__marker i,.dia-module-cta__pulse,.plan--featured::before{animation:none!important}.dia-module-card,.dia-module-card__icon,.dia-module-card__preview{transition:none!important}.dia-system-link__l,.dia-system-link__r{transition:none!important;stroke-dashoffset:0!important}}

/* ============================================================
   Repositioning — responsive rules for the four-plan grid,
   the pipeline strip and the ROI panel.
   Order matters: the widest query first, so the narrowest wins.
   ============================================================ */

@media (max-width: 1180px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans .plan { padding: var(--s6); }
  .plan__for { min-height: 0; }
}

@media (max-width: 1080px) {
  .pipeline-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roi { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

@media (max-width: 860px) {
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--featured { order: -1; }
}

@media (max-width: 620px) {
  .pipeline-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .pipeline-card { padding: var(--s4); }
  .pipeline-foot { font-size: 0.75rem; line-height: 1.5; }

  .roi__panel { padding: var(--s5); }
  .roi__row { font-size: var(--fs-xs); padding: 9px 0; }
  .roi__result { flex-wrap: wrap; gap: 4px; }

  .hero__channels { gap: 5px 6px; }
  .hero__channels li { font-size: 0.72rem; padding: 4px 9px; }

  .setup-price { padding: var(--s4); }
  .setup-price__list { gap: 5px 6px; }
  .setup-price__list li { font-size: 0.72rem; padding: 4px 9px; }

  /* long plan cards: keep the amount from dominating a phone screen */
  .plans .plan__amount { font-size: 2rem; }
}

@media (max-width: 400px) {
  .roi__row { flex-wrap: wrap; gap: 2px; }
  .roi__row b { width: 100%; }
}


/* ===== Final mobile conversion QA — 2026-08-30 ===== */
@media (max-width: 620px) {
  /* Consistent mobile rhythm */
  .section { padding-block: 3.25rem; }
  .section--compact { padding-block: 2.65rem; }
  .section--major { padding-block: 3.65rem; }
  .section-head { margin-bottom: 1.65rem; }
  .section-head h2,
  .roi__copy h2 { font-size: clamp(2rem, 9vw, 2.55rem); line-height:1.04; letter-spacing:-.035em; }
  .section-head > p:not(.eyebrow), .roi__copy > p { font-size:1.04rem; line-height:1.55; }

  /* Workflow cards: icon + step metadata get their own header rows. */
  .pipeline-grid { gap:.7rem; }
  .pipeline-card {
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    grid-template-rows:auto auto auto auto;
    column-gap:.75rem;
    row-gap:.12rem;
    padding:.9rem;
    border-radius:14px;
  }
  .pipeline-card__icon {
    position:static;
    grid-column:1;
    grid-row:1 / span 2;
    width:46px;
    height:46px;
    align-self:center;
  }
  .pipeline-card__icon svg { width:23px; height:23px; }
  .pipeline-card__num { grid-column:2; grid-row:1; margin:0; align-self:end; font-size:.65rem; }
  .pipeline-card__label { grid-column:2; grid-row:2; margin:.08rem 0 .35rem; align-self:start; font-size:.68rem; }
  .pipeline-card h3 { grid-column:1 / -1; grid-row:3; margin:.4rem 0 .2rem; font-size:1rem; }
  .pipeline-card p { grid-column:1 / -1; grid-row:4; font-size:.82rem; line-height:1.48; }

  /* ROI: one compact value card, no made-up euro example. */
  .roi { grid-template-columns:1fr; gap:1.35rem; }
  .roi__list { margin-top:1.1rem; }
  .roi__panel { padding:1rem; border-radius:16px; }
  .roi-value { padding:.72rem 0; grid-template-columns:38px minmax(0,1fr); gap:.7rem; }
  .roi-value__icon { width:36px; height:36px; border-radius:11px; }

  /* Pricing/configurator cards fit more useful content above the fold. */
  .plan, .module-card, .config__panel, .config-result, .setup-price, .pack-help {
    border-radius:16px !important;
  }
  .plan { padding:1.05rem !important; }
  .config__panel, .config-result { padding:1rem !important; }
  .choices { gap:.55rem !important; }
  .tile { padding:.78rem .85rem !important; border-radius:13px !important; }
  .stepdots { gap:.35rem !important; overflow-x:auto; padding-bottom:.25rem; scrollbar-width:none; }
  .stepdots::-webkit-scrollbar { display:none; }
  .stepdot { flex:0 0 auto; font-size:.69rem !important; }

  /* Fixed elements respect Safari's bottom safe area. */
  .mobile-cta { padding-bottom:calc(7px + env(safe-area-inset-bottom,0px)); }
}