/* ZAAI public site — mobile-only hardening. Desktop and tablet intentionally untouched. */
@media (max-width: 767px) {
  :root {
    --zaai-mobile-gutter: clamp(16px, 5vw, 20px);
    --zaai-mobile-safe-bottom: max(16px, env(safe-area-inset-bottom));
  }

  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body.mobile-nav-open,
  body.mobile-dialog-open { overscroll-behavior: none; }

  body.mobile-nav-open { overflow: hidden !important; }

  main,
  section,
  article,
  header,
  footer,
  nav,
  form,
  fieldset,
  div,
  ul,
  ol,
  li { min-width: 0; }

  img,
  svg,
  video,
  canvas,
  iframe { max-width: 100%; }

  p,
  li,
  a,
  label,
  figcaption { overflow-wrap: anywhere; }

  /* Rubriker får INTE `anywhere`: det påverkar min-content-bredden, så en
     balanserad rubrik med max-width i ch bryter mitt i ordet
     ("uppmärksamh / et."). `break-word` bryter bara när ordet faktiskt
     inte får plats. */
  h1,
  h2,
  h3,
  h4 { overflow-wrap: break-word; }

  input,
  select,
  textarea { font-size: 16px !important; }

  button,
  [role="button"],
  [role="tab"],
  [role="radio"],
  [role="checkbox"],
  input[type="button"],
  input[type="submit"] {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }

  footer a,
  .footer a { min-width: 44px; }

  .js .reveal,
  .reveal,
  .reveal--item,
  .uc-reveal,
  .mission-intro,
  [class*="reveal-d"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  [data-mobile-observed]:not(.mobile-in-view) *,
  body > .auto-scan-journey:not(.mobile-in-view) * {
    animation-play-state: paused !important;
    transition-duration: .01ms !important;
  }

  /* Shared navigation */
  #hero-nav {
    inset-inline: 0 !important;
    width: auto !important;
    max-width: none !important;
  }

  #hero-nav .nav-container,
  .nav-container {
    width: auto !important;
    max-width: none !important;
    margin: 6px 8px 0 !important;
    padding: 8px 10px 8px 14px !important;
    min-height: 60px;
  }

  /* Loggan är stor i viloläge och krymper till sitt tidigare mått när navet
     dras ihop vid scroll — samma rörelse som på desktop, bara mindre skala. */
  .nav-logo-img {
    width: 72px !important; height: 72px !important; object-fit: contain;
    transition: width 220ms var(--e-out, cubic-bezier(.22,1,.3,1)),
                height 220ms var(--e-out, cubic-bezier(.22,1,.3,1));
  }
  #hero-nav.scrolled .nav-logo-img { width: 50px !important; height: 50px !important; }

  .nav-hamburger {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }

  .nav-mobile-menu {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-top: max(88px, calc(env(safe-area-inset-top) + 76px)) !important;
    padding-bottom: max(28px, env(safe-area-inset-bottom)) !important;
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms !important;
  }

  .nav-mobile-menu.open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.16,1,.3,1) !important;
  }

  .nav-mobile-menu a,
  .nav-mobile-menu button,
  .nav-mobile-links > a,
  .nav-mobile-submenu a {
    min-height: 44px !important;
    display: flex;
    align-items: center;
  }

  .nav-mobile-actions a { min-height: 48px !important; justify-content: center; }

  /* Shared footer */
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding-inline: var(--zaai-mobile-gutter) !important;
  }

  .footer-col a,
  .footer-bottom-links a { min-height: 44px; display: flex; align-items: center; }

  .footer-bottom {
    padding-inline: var(--zaai-mobile-gutter) !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Shared dialogs and fixed UI */
  [role="dialog"].mobile-dialog-visible { overscroll-behavior: contain; }

  #signup-overlay,
  #auto-overlay,
  #garanti-overlay {
    height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #signup-modal,
  #auto-modal,
  #garanti-modal {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #auto-modal { display: flex !important; flex-direction: column; }
  #auto-modal .auto-body { overflow-y: auto; min-height: 0; }
  .auto-close-btn,
  .garanti-close-btn,
  .auto-back-btn,
  .auto-next-btn,
  .auto-form-submit,
  .auto-success-close,
  .auto-priority-btn,
  .garanti-cta,
  .why-guarantee-link { min-width: 44px !important; min-height: 46px !important; }

  .auto-close-btn,
  .garanti-close-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }

  .book-footer a,
  body[data-mobile-wizard="true"] a[href="/integritetspolicy"] {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    vertical-align: middle;
  }

  body.mobile-dialog-open #zaai-bubble,
  body.mobile-dialog-open #zaai-panel,
  body.mobile-nav-open #zaai-bubble,
  body.mobile-nav-open #zaai-panel,
  body[data-mobile-wizard="true"] #zaai-bubble,
  body[data-mobile-wizard="true"] #zaai-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #zaai-bubble {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }

  #zaai-panel {
    left: max(12px, env(safe-area-inset-left)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(84px, calc(68px + env(safe-area-inset-bottom))) !important;
    width: auto !important;
    height: min(590px, calc(100dvh - 104px - env(safe-area-inset-top))) !important;
    max-height: calc(100dvh - 104px - env(safe-area-inset-top)) !important;
    overflow: hidden !important;
  }

  /* Blog index */
  body[data-mobile-page="ai-for-foretag"] .blog-hero,
  body[data-mobile-page="blogg"] .blog-hero {
    overflow: clip;
    padding: 128px var(--zaai-mobile-gutter) 64px !important;
    min-height: 0 !important;
  }

  body[data-mobile-page="ai-for-foretag"] .blog-hero h1,
  body[data-mobile-page="blogg"] .blog-hero h1 {
    white-space: normal !important;
    max-width: 11ch;
    font-size: clamp(2.5rem, 11.5vw, 3.125rem) !important;
    line-height: 1 !important;
  }

  .blog-wrap { width: 100% !important; padding-inline: var(--zaai-mobile-gutter) !important; }
  .featured-article,
  .blog-grid { grid-template-columns: 1fr !important; }
  .featured-visual { min-height: 240px !important; }
  .featured-text { padding: 28px 22px !important; }
  .blog-filters {
    display: flex !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding: 4px 1px 10px !important;
  }
  .blog-filters::-webkit-scrollbar { display: none; }
  .blog-filter-pill { min-height: 44px !important; flex: 0 0 auto; scroll-snap-align: start; }
  .article-card { width: 100%; }

  /* Integrations catalogue */
  body[data-mobile-page="integrationer"] .int-hero {
    overflow: clip;
    padding: 128px var(--zaai-mobile-gutter) 64px !important;
    min-height: 0 !important;
  }
  .int-wrap { width: 100% !important; padding-inline: var(--zaai-mobile-gutter) !important; }
  .int-toolbar { position: static !important; inset: auto !important; }
  .int-toolbar-row { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .int-search { width: 100% !important; min-height: 46px; }
  .int-search input { min-height: 44px !important; }
  .int-filters { display: flex !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; gap: 8px; }
  .int-filters::-webkit-scrollbar { display: none; }
  .int-pill { min-height: 44px !important; flex: 0 0 auto; }
  .int-grid { grid-template-columns: 1fr !important; }
  .int-card { width: 100%; min-height: 0 !important; }
  .int-empty { width: 100% !important; }

  /* About */
  body[data-mobile-page="om-oss"] .about-hero {
    overflow: clip;
    padding-inline: var(--zaai-mobile-gutter) !important;
    min-height: 600px !important;
  }
  .mission-section,
  .mission-band,
  .values-inner,
  .philosophy-inner,
  .story-section,
  .about-cta { width: 100% !important; max-width: 100% !important; padding-inline: var(--zaai-mobile-gutter) !important; }
  .mission-band,
  .mission-section,
  .values-grid,
  .philosophy-cards { grid-template-columns: 1fr !important; }
  .mission-left,
  .mission-right { width: 100% !important; transform: none !important; }
  .value-card,
  .philosophy-card { width: 100% !important; }

  /* Articles */
  body[data-mobile-page="artikel"] article,
  body[data-mobile-page="artikel"] .article-header,
  body[data-mobile-page="artikel"] .article-body,
  body[data-mobile-page="artikel"] .article-sources-inner,
  body[data-mobile-page="artikel"] .related-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--zaai-mobile-gutter) !important;
  }
  body[data-mobile-page="artikel"] .article-header { padding-top: 128px !important; }
  body[data-mobile-page="artikel"] .article-header h1 { font-size: clamp(2rem, 9vw, 2.35rem) !important; line-height: 1.08 !important; }
  body[data-mobile-page="artikel"] .article-body { font-size: 17px !important; line-height: 1.82 !important; }
  body[data-mobile-page="artikel"] .article-body pre,
  body[data-mobile-page="artikel"] .article-body table { max-width: 100%; overflow-x: auto; display: block; }
  .related-grid { grid-template-columns: 1fr !important; }
  .article-cta-card { padding: 32px 20px !important; }
  .article-cta .cta-btn-primary { min-height: 48px; width: 100%; justify-content: center; }
  body[data-mobile-page="artikel"] .back-link { min-height: 44px; align-items: center; }
  body[data-mobile-page="artikel"] :is(.article-body, .article-sources-inner) a,
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) main a,
  body[data-mobile-wizard="true"] .wz-privacy a {
    padding-block: 13px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) main a {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    vertical-align: middle;
  }

  /* Portal marketing and legal reading pages */
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) .nav-inner {
    width: 100% !important;
    padding: 10px 16px !important;
  }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) .nav-logo { width: 52px !important; }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) .nav-back { min-height: 44px; display: inline-flex; align-items: center; }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) main {
    width: 100% !important;
    max-width: 100% !important;
    padding: 112px 16px 72px !important;
  }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) h1 {
    font-size: clamp(2rem, 9.5vw, 2.35rem) !important;
    line-height: 1.08 !important;
  }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) .footer-inner {
    width: 100% !important;
    padding-inline: 16px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  body:is([data-mobile-page="kundportalen"],[data-mobile-page="integritetspolicy"],[data-mobile-page="anvandarvillkor"]) .footer-links a { min-height: 46px; display: flex; align-items: center; }

  /* ══ SEO ═══════════════════════════════════════════════════════════
     Desktopsidan är byggd i två spalter med "scener" där korten ligger
     absolut placerade i en yta med fast bildformat. På telefon faller det
     isär: bildformatet stängs av under 700px, korten tappar sin höjd och
     lägger sig över texten under. Här läggs varje scen om till en egen
     ruta där korten ligger i flödet, och hela sidan får samma rytm:
     ~64px mellan sektioner, 20px radie på kort, 48px tryckytor. */
  body[data-mobile-page="seo"] {
    --seo-m-pad: 64px;
    --seo-m-r: 20px;
  }
  body[data-mobile-page="seo"] .wd-hero,
  body[data-mobile-page="seo"] .seo-pillars,
  body[data-mobile-page="seo"] .seo-scan,
  body[data-mobile-page="seo"] .wd-proc,
  body[data-mobile-page="seo"] .seo-safe,
  body[data-mobile-page="seo"] .seo-cases,
  body[data-mobile-page="seo"] .wd-price,
  body[data-mobile-page="seo"] .faq-section,
  body[data-mobile-page="seo"] .wd-cta { overflow: clip; }
  body[data-mobile-page="seo"] .wd-inner,
  body[data-mobile-page="seo"] .wd-hero-inner,
  body[data-mobile-page="seo"] .seo-scan-inner,
  body[data-mobile-page="seo"] .seo-safe,
  body[data-mobile-page="seo"] .seo-cases,
  body[data-mobile-page="seo"] .wd-price,
  body[data-mobile-page="seo"] .faq-inner,
  body[data-mobile-page="seo"] .wd-cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--zaai-mobile-gutter) !important;
  }

  /* Sektionsrytm — samma luft överallt i stället för 88–132px per sektion. */
  body[data-mobile-page="seo"] .wd-hero { padding: 112px var(--zaai-mobile-gutter) 52px !important; }
  body[data-mobile-page="seo"] .seo-pillars { padding: var(--seo-m-pad) 0 !important; }
  body[data-mobile-page="seo"] .wd-proc { padding: var(--seo-m-pad) 0 !important; }
  body[data-mobile-page="seo"] .seo-safe { padding: var(--seo-m-pad) var(--zaai-mobile-gutter) !important; }
  body[data-mobile-page="seo"] .seo-scan { padding: var(--seo-m-pad) var(--zaai-mobile-gutter) !important; }
  body[data-mobile-page="seo"] .wd-price { padding: 56px var(--zaai-mobile-gutter) 64px !important; }
  body[data-mobile-page="seo"] .faq-section { padding: var(--seo-m-pad) var(--zaai-mobile-gutter) !important; }
  body[data-mobile-page="seo"] .wd-cta { padding: 72px var(--zaai-mobile-gutter) 80px !important; }

  body[data-mobile-page="seo"] .wd-header { margin-bottom: 26px !important; }
  body[data-mobile-page="seo"] .seo-pillars .wd-header { margin-bottom: 26px !important; }
  body[data-mobile-page="seo"] .seo-safe .wd-header { margin-bottom: 26px !important; }
  body[data-mobile-page="seo"] .section-h {
    font-size: clamp(1.75rem, 7.6vw, 2.125rem) !important;
    line-height: 1.12 !important;
    margin-bottom: 12px !important;
  }
  body[data-mobile-page="seo"] .section-sub { font-size: .9375rem !important; line-height: 1.65 !important; }

  /* Hero */
  body[data-mobile-page="seo"] .wd-hero-h1 {
    font-size: clamp(2.25rem, 9.6vw, 2.75rem) !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    max-width: 16ch;
    margin-inline: auto;
  }
  body[data-mobile-page="seo"] .wd-hero-sub {
    font-size: .9375rem !important;
    line-height: 1.62 !important;
    max-width: 34ch;
    margin-inline: auto;
  }
  body[data-mobile-page="seo"] .wd-hero-ctas {
    flex-direction: column;
    gap: 10px;
    width: min(100%, 320px);
    margin: 0 auto 26px;
  }
  body[data-mobile-page="seo"] .wd-hero-ctas .btn { width: 100%; justify-content: center; }
  body[data-mobile-page="seo"] .btn-lg { min-height: 48px; display: inline-flex; align-items: center; }
  body[data-mobile-page="seo"] .wd-trust {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
    width: fit-content;
    margin-inline: auto;
  }

  /* Scenerna: absolut placerade kort blir en staplad ruta i flödet. */
  body[data-mobile-page="seo"] .wd-hero-art,
  body[data-mobile-page="seo"] .seo-intro-art {
    width: 100% !important;
    max-width: none !important;
    margin: 28px 0 0 !important;
  }
  body[data-mobile-page="seo"] .seo-art .seo-art-stage {
    aspect-ratio: auto !important;
    transform: none !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px 22px;
    border-radius: 22px;
    background: linear-gradient(168deg, rgba(255,255,255,.66) 0%, rgba(247,240,250,.92) 100%);
    border: 1px solid rgba(107,83,145,.08);
    box-shadow: 0 20px 46px -28px rgba(28,22,40,.4);
    overflow: hidden;
    isolation: isolate;
  }
  body[data-mobile-page="seo"] .seo-art .seo-cardart,
  body[data-mobile-page="seo"] .seo-art .seo-chat {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }
  body[data-mobile-page="seo"] .seo-art .seo-cardart--float {
    width: 88% !important;
    margin-left: auto !important;
  }
  body[data-mobile-page="seo"] .seo-art .seo-cardart--main { padding: 16px 16px 14px !important; border-radius: 16px !important; }
  body[data-mobile-page="seo"] .seo-art .seo-cardart--float { padding: 12px 13px !important; border-radius: 16px !important; }
  body[data-mobile-page="seo"] .seo-art .seo-blob--b { display: none; }
  body[data-mobile-page="seo"] .seo-art .seo-blob--a { width: 46%; }
  body[data-mobile-page="seo"] .seo-chat { padding: 16px 16px 15px !important; }

  /* Tre ställen: text först, scen under, sedan de tre korten. */
  body[data-mobile-page="seo"] .seo-intro { gap: 0 !important; }
  body[data-mobile-page="seo"] .seo-intro-copy .section-sub { max-width: none; }
  body[data-mobile-page="seo"] .seo-track { gap: 12px !important; margin-top: 28px; padding-top: 0 !important; }
  /* Spårlinjen går på tvären mellan tre spalter. I en kolumn hänger både
     linjen och nodprickarna i tomma luften — korten tonar in i tur och
     ordning i stället, vilket är samma rörelse utan attrapp. */
  body[data-mobile-page="seo"] .seo-track::before,
  body[data-mobile-page="seo"] .seo-track::after,
  body[data-mobile-page="seo"] .seo-tstep::before { display: none !important; }
  body[data-mobile-page="seo"] .seo-tstep { padding: 22px 20px 20px !important; border-radius: var(--seo-m-r) !important; }
  body[data-mobile-page="seo"] .seo-tnum { font-size: 2.25rem !important; margin-bottom: 6px !important; }
  body[data-mobile-page="seo"] .seo-tstep-h { font-size: 1.0625rem !important; }

  /* Processen: fyra kolumner blir en lodrät stege med samma dragna linje. */
  body[data-mobile-page="seo"] .wd-proc-rail {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }
  body[data-mobile-page="seo"] .wd-proc-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 16px;
    padding-bottom: 26px;
  }
  body[data-mobile-page="seo"] .wd-proc-step:last-child { padding-bottom: 0; }
  body[data-mobile-page="seo"] .wd-proc-num { grid-row: 1 / 3; margin-bottom: 0 !important; }
  body[data-mobile-page="seo"] .wd-proc-t,
  body[data-mobile-page="seo"] .wd-proc-d { grid-column: 2; max-width: none; }
  body[data-mobile-page="seo"] .wd-proc-step::after {
    top: 48px !important;
    left: 21px !important;
    right: auto !important;
    bottom: 6px !important;
    width: 1px !important;
    height: auto !important;
    transform: scaleY(0) !important;
    transform-origin: top center !important;
  }
  body[data-mobile-page="seo"] .wd-proc-rail.is-in .wd-proc-step::after { transform: scaleY(1) !important; }

  /* Trygghet */
  body[data-mobile-page="seo"] .seo-safe-row {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 0 14px !important;
    padding: 20px 0 !important;
  }
  body[data-mobile-page="seo"] .seo-safe-d { max-width: none; }

  /* Gratis analys */
  body[data-mobile-page="seo"] .seo-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
    padding: 26px 18px 24px !important;
    border-radius: 22px !important;
  }
  body[data-mobile-page="seo"] .seo-scan-h { font-size: clamp(1.625rem, 7.2vw, 2rem) !important; }
  body[data-mobile-page="seo"] .seo-scan-p { font-size: .9375rem !important; line-height: 1.68 !important; margin-bottom: 20px !important; }
  body[data-mobile-page="seo"] .seo-scan-pts { margin-bottom: 22px !important; }
  body[data-mobile-page="seo"] .seo-submit { width: 100%; justify-content: center; }
  body[data-mobile-page="seo"] .seo-score { padding: 16px 14px 14px !important; }
  body[data-mobile-page="seo"] .seo-score-num { font-size: 2rem !important; }
  body[data-mobile-page="seo"] .seo-flaw {
    grid-template-columns: 22px minmax(0, 1fr) !important;
    padding: 12px 16px !important;
  }
  body[data-mobile-page="seo"] .seo-flaw-tag { grid-column: 2; margin-top: 4px; font-size: 10.5px; }
  body[data-mobile-page="seo"] .seo-sent-btns { flex-direction: column; }
  body[data-mobile-page="seo"] .seo-sent-btns .btn { width: 100%; justify-content: center; min-height: 46px; }

  /* Pris: vårt vanligaste spår först, jämförelsen med byrån sist. */
  body[data-mobile-page="seo"] .wd-price-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: none !important;
    gap: 16px !important;
    padding-top: 26px !important;
  }
  body[data-mobile-page="seo"] .wd-pcard,
  body[data-mobile-page="seo"] .seo-pref {
    display: flex !important;
    flex-direction: column !important;
    grid-row: auto !important;
    grid-template-rows: none !important;
    padding: 26px 20px 24px !important;
    border-radius: var(--seo-m-r) !important;
  }
  body[data-mobile-page="seo"] .wd-pcard--hot { order: -1; }
  body[data-mobile-page="seo"] .seo-pref { order: 1; }
  body[data-mobile-page="seo"] .wd-pcard--hot .wd-pcard-num { font-size: 2.375rem !important; }
  body[data-mobile-page="seo"] .wd-pcard .btn { min-height: 48px; justify-content: center; }
  body[data-mobile-page="seo"] .wd-pfoot-strip { grid-template-columns: minmax(0, 1fr) !important; margin-top: 16px !important; }
  body[data-mobile-page="seo"] .wd-pfoot { padding: 18px 20px !important; }
  body[data-mobile-page="seo"] .wd-pfoot + .wd-pfoot { box-shadow: inset 0 1px 0 rgba(107,83,145,.1) !important; }

  /* Avslutande CTA */
  body[data-mobile-page="seo"] .wd-cta-h { font-size: clamp(1.75rem, 7.6vw, 2.125rem) !important; line-height: 1.14 !important; }
  body[data-mobile-page="seo"] .wd-cta-p { font-size: .9375rem !important; margin-bottom: 26px !important; }
  body[data-mobile-page="seo"] .wd-cta-btns { flex-direction: column; gap: 10px; width: min(100%, 320px); margin-inline: auto; }
  body[data-mobile-page="seo"] .wd-cta-btns .btn { width: 100%; justify-content: center; }

  /* Foten: tretton länkar på rad blir en halv skärmhöjd tom spalt. */
  body[data-mobile-page="seo"] .footer-grid > div:nth-of-type(2).footer-col ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px;
  }

  /* Tryckfeedback på riktig touch. */
  body[data-mobile-page="seo"] .btn:active { transform: scale(.98); transition-duration: 120ms; }

  .seo-scan-inner,
  .seo-safe-grid,
  .seo-cases-grid,
  .rap-cards,
  .rap-facts { grid-template-columns: 1fr !important; }
  .seo-form { width: 100% !important; }
  .seo-field,
  .seo-submit { min-height: 48px !important; }
  .seo-field input { min-height: 46px !important; }
  .seo-consent { min-height: 44px; align-items: flex-start !important; }
  .seo-consent input { width: 22px !important; height: 22px !important; min-height: 22px !important; flex: 0 0 22px; }
  .rap { height: 100dvh !important; overflow: hidden !important; }
  .rap-sheet {
    inset: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  .rap-pad { padding: 20px 16px !important; }
  .rap-card-top,
  .rap-bar-row,
  .rap-fact { grid-template-columns: 1fr !important; gap: 6px !important; }
  .rap-x { width: 44px !important; height: 44px !important; }

  /* ══════════════════════════════════════════════════════════════
     SEO — ÖVERBLICKSLÄGE
     Desktop visar tre pelare bredvid varandra, tre prisspår bredvid
     varandra och analysrutan som formulär + rapport sida vid sida.
     Staplat i en kolumn blev samma innehåll 2–3 skärmhöjder per
     sektion, och man tappade vad sektionen handlar om innan man
     nått botten. Här återskapas sidoställningen som ett swipe-spår,
     och exempelrapporten läggs bakom en knapp — så ryms rubrik +
     ett helt kort i samma vy, precis som på desktop.
  ══════════════════════════════════════════════════════════════ */

  /* Egen yta per sektion. Utan detta rinner ljusrosa in i ljusrosa och
     hela sidan läser som ett enda långt band. */
  body[data-mobile-page="seo"] .seo-pillars,
  body[data-mobile-page="seo"] .seo-scan,
  body[data-mobile-page="seo"] .faq-section { background: #fff !important; }
  body[data-mobile-page="seo"] .wd-proc { background: #FBF7FD !important; }
  body[data-mobile-page="seo"] .seo-safe,
  body[data-mobile-page="seo"] .wd-price { background: #F4ECF9 !important; }
  body[data-mobile-page="seo"] .wd-proc,
  body[data-mobile-page="seo"] .seo-safe,
  body[data-mobile-page="seo"] .seo-scan,
  body[data-mobile-page="seo"] .wd-price,
  body[data-mobile-page="seo"] .faq-section {
    box-shadow: inset 0 1px 0 rgba(107,83,145,.13) !important;
  }
  body[data-mobile-page="seo"] :is(.seo-pillars, .wd-proc, .seo-safe, .seo-scan, .wd-price, .faq-section) {
    scroll-margin-top: 76px;
  }

  /* Sektionsluft: tätare, så en rubrik och dess innehåll ryms i samma vy. */
  body[data-mobile-page="seo"] { --seo-m-pad: 52px; }
  body[data-mobile-page="seo"] .wd-hero { padding: 104px var(--zaai-mobile-gutter) 44px !important; }
  body[data-mobile-page="seo"] .seo-scan { padding: 44px var(--zaai-mobile-gutter) !important; }
  body[data-mobile-page="seo"] .wd-price { padding: 44px var(--zaai-mobile-gutter) 52px !important; }
  body[data-mobile-page="seo"] .wd-header,
  body[data-mobile-page="seo"] .seo-pillars .wd-header,
  body[data-mobile-page="seo"] .seo-safe .wd-header { margin-bottom: 20px !important; }
  body[data-mobile-page="seo"] .section-sub { max-width: 42ch; }

  /* ── Swipe-spår ─────────────────────────────────────────────
     Ett spår i taget i vyn, snäpper i mitten. Samma sidoställning
     som desktop, men med tummen i stället för blicken. */
  body[data-mobile-page="seo"] .zaai-rail {
    position: relative;
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin: 0 calc(var(--zaai-mobile-gutter) * -1) !important;
    padding: 18px var(--zaai-mobile-gutter) 6px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--zaai-mobile-gutter);
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body[data-mobile-page="seo"] .zaai-rail::-webkit-scrollbar { display: none; }
  body[data-mobile-page="seo"] .zaai-rail > * {
    flex: 0 0 min(86%, 328px);
    scroll-snap-align: center;
    grid-row: auto !important;
    grid-template-rows: none !important;
    margin: 0 !important;
    /* Ordningen ligger i DOM:en när spåret byggs — annars pekar punkterna
       under spåret på fel kort. */
    order: 0 !important;
  }
  body[data-mobile-page="seo"] .zaai-rail-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
  }
  body[data-mobile-page="seo"] .zaai-rail-dot {
    width: 28px;
    height: 24px;
    padding: 10px 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-mobile-page="seo"] .zaai-rail-dot::before {
    content: "";
    display: block;
    height: 4px;
    border-radius: 2px;
    background: rgba(107,83,145,.22);
    transition: background 200ms ease;
  }
  body[data-mobile-page="seo"] .zaai-rail-dot.is-on::before { background: var(--primary, #6B5391); }

  /* Tre ställen — pelarna sida vid sida igen. */
  body[data-mobile-page="seo"] .seo-track.zaai-rail { margin-top: 6px !important; }
  body[data-mobile-page="seo"] .seo-track.zaai-rail > .seo-tstep {
    display: flex;
    flex-direction: column;
    padding: 20px 18px 18px !important;
  }
  body[data-mobile-page="seo"] .seo-tnum { font-size: 2rem !important; margin-bottom: 4px !important; }
  body[data-mobile-page="seo"] .seo-tstep-h { font-size: 1rem !important; margin-bottom: 8px !important; }
  body[data-mobile-page="seo"] .seo-tstep-p { font-size: .84375rem !important; line-height: 1.6 !important; }
  body[data-mobile-page="seo"] .seo-pillars { padding: 44px 0 !important; }
  body[data-mobile-page="seo"] .seo-intro-art { margin-top: 16px !important; }
  body[data-mobile-page="seo"] .seo-art .seo-art-stage { padding: 14px 12px 16px; gap: 9px; }
  body[data-mobile-page="seo"] .seo-chat { padding: 13px 14px 12px !important; }
  body[data-mobile-page="seo"] .seo-chat-a { font-size: .8125rem !important; line-height: 1.55 !important; }
  body[data-mobile-page="seo"] .zaai-rail-dots { margin-top: 10px; }

  /* Trygghet — fyra hårlinjerader, hela listan i en vy. */
  body[data-mobile-page="seo"] .seo-safe-row { padding: 15px 0 14px !important; }
  body[data-mobile-page="seo"] .seo-safe-t { font-size: .9375rem !important; margin-bottom: 4px !important; }
  body[data-mobile-page="seo"] .seo-safe-d { font-size: .84375rem !important; line-height: 1.6 !important; }

  /* Så funkar det — stegen tätare. */
  body[data-mobile-page="seo"] .wd-proc-step { padding-bottom: 20px !important; }
  body[data-mobile-page="seo"] .wd-proc-d { font-size: .84375rem !important; line-height: 1.6 !important; }

  /* ── Gratis analys — rubrik, formulär och knapp i en vy ──
     Exempelrapporten är lång och ligger på desktop bredvid formuläret.
     På mobil hamnar den under och trycker ner knappen ur bild, så den
     ligger bakom en knapp och fälls ut av sig själv när en riktig
     analys körs. */
  body[data-mobile-page="seo"] .seo-panel {
    gap: 0 !important;
    padding: 22px 18px 20px !important;
    border-radius: 20px !important;
  }
  body[data-mobile-page="seo"] .seo-scan-h {
    font-size: clamp(1.5rem, 6.6vw, 1.75rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 10px !important;
  }
  body[data-mobile-page="seo"] .seo-scan-p {
    font-size: .875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
  }
  body[data-mobile-page="seo"] .seo-scan-pts { gap: 7px !important; margin-bottom: 16px !important; }
  body[data-mobile-page="seo"] .seo-scan-pts li { font-size: .78125rem !important; line-height: 1.45 !important; }
  body[data-mobile-page="seo"] .seo-form { gap: 9px !important; }
  body[data-mobile-page="seo"] .seo-field,
  body[data-mobile-page="seo"] .seo-submit { min-height: 46px !important; }
  body[data-mobile-page="seo"] .seo-consent span { font-size: .75rem !important; line-height: 1.5 !important; }
  body[data-mobile-page="seo"] .seo-proof { margin-top: 12px !important; }
  body[data-mobile-page="seo"] .seo-proof-t { font-size: .78125rem !important; line-height: 1.45 !important; }

  body[data-mobile-page="seo"] .seo-report { display: none !important; }
  body[data-mobile-page="seo"] .seo-panel.is-report-open .seo-report {
    display: block !important;
    margin-top: 16px;
    animation: seoReportOpen 260ms cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes seoReportOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
  body[data-mobile-page="seo"] .seo-report-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    margin-top: 16px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.82);
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body[data-mobile-page="seo"] .seo-report-toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 220ms cubic-bezier(.16,1,.3,1);
  }
  body[data-mobile-page="seo"] .seo-panel.is-report-open .seo-report-toggle svg { transform: rotate(180deg); }
  body[data-mobile-page="seo"] .seo-report-toggle:active { transform: scale(.985); }

  /* ── Pris — tre spår som swipe, ett helt kort per vy ── */
  body[data-mobile-page="seo"] .wd-price .wd-header { margin-bottom: 4px !important; }
  body[data-mobile-page="seo"] .wd-price-grid.zaai-rail { padding-top: 20px !important; }
  body[data-mobile-page="seo"] .zaai-rail > .wd-pcard,
  body[data-mobile-page="seo"] .zaai-rail > .seo-pref {
    padding: 22px 18px 20px !important;
    border-radius: var(--seo-m-r) !important;
  }
  body[data-mobile-page="seo"] .wd-pcard-name { font-size: 1rem !important; }
  body[data-mobile-page="seo"] .wd-pcard-for {
    min-height: 0 !important;
    margin-bottom: 12px !important;
    font-size: .78125rem !important;
    line-height: 1.5 !important;
  }
  body[data-mobile-page="seo"] .wd-pcard-num { font-size: 2.125rem !important; }
  body[data-mobile-page="seo"] .wd-pcard--hot .wd-pcard-num { font-size: 2.25rem !important; }
  body[data-mobile-page="seo"] .wd-pcard-quote { font-size: 1.0625rem !important; max-width: none; }
  body[data-mobile-page="seo"] .wd-pcard-time { margin-bottom: 14px !important; }
  body[data-mobile-page="seo"] .wd-pcard-list { gap: 8px !important; margin-bottom: 16px !important; }
  body[data-mobile-page="seo"] .wd-pcard-list li { font-size: .78125rem !important; line-height: 1.45 !important; }
  body[data-mobile-page="seo"] .seo-pref-end { font-size: .75rem !important; line-height: 1.5 !important; }
  body[data-mobile-page="seo"] .wd-pcard .btn { min-height: 46px !important; }
  body[data-mobile-page="seo"] .wd-pfoot-strip { margin-top: 20px !important; }
  body[data-mobile-page="seo"] .wd-pfoot { padding: 14px 18px !important; }
  body[data-mobile-page="seo"] .wd-pfoot-v { font-size: .78125rem !important; line-height: 1.5 !important; }
  body[data-mobile-page="seo"] .wd-price-note { margin-top: 14px !important; font-size: .75rem !important; }

  /* AI customer service */
  body[data-mobile-page="ai-kundtjanst"] .ak-hero,
  body[data-mobile-page="ai-kundtjanst"] .ak-diff,
  body[data-mobile-page="ai-kundtjanst"] .ak-flow,
  body[data-mobile-page="ai-kundtjanst"] .ak-modes,
  body[data-mobile-page="ai-kundtjanst"] .ak-week,
  body[data-mobile-page="ai-kundtjanst"] .ak-integrations,
  body[data-mobile-page="ai-kundtjanst"] .ak-price,
  body[data-mobile-page="ai-kundtjanst"] .ak-cta { overflow: clip; }
  .ak-inner,
  .ak-inner-wide,
  .ak-hero-inner,
  .ak-cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--zaai-mobile-gutter) !important;
  }
  .ak-hero { padding-top: 128px !important; padding-bottom: 64px !important; }
  .ak-hero-h1 { font-size: clamp(2.5rem, 11.5vw, 3.125rem) !important; line-height: 1 !important; }
  .ak-scen-grid,
  .ak-scen-grid--commerce,
  .ak-diff-grid,
  .ak-diff-layout,
  .ak-modes-grid,
  .ak-price-grid,
  .ak-migrations-grid,
  .ak-integrations-grid,
  .ak-week-panel { grid-template-columns: minmax(0, 1fr) !important; }
  .ak-demo-card,
  .ak-demo-panel,
  .ak-scen,
  .ak-diff-card,
  .ak-pcard { width: 100% !important; max-width: 100% !important; }
  .ak-scen-grid--commerce > *,
  .ak-demo-panel { grid-column: 1 !important; grid-row: auto !important; }
  .ak-demo-panel { padding: 22px 18px !important; }
  .ak-demo-panel-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .ak-demo-panel-head > * { width: 100% !important; min-width: 0 !important; }
  .ak-demo-note { white-space: normal !important; }
  .ak-demo-steps { grid-template-columns: minmax(0, 1fr) !important; }
  .ak-demo-step { width: 100% !important; min-height: 0 !important; }
  .ak-demo-step + .ak-demo-step::before { display: none !important; }
  .ak-flow-rail { grid-template-columns: minmax(0, 1fr) !important; gap: 0 !important; }
  .ak-flow-step { width: 100% !important; min-width: 0 !important; }
  body[data-mobile-page="ai-kundtjanst"] .ak-flow-rail .ak-flow-ic,
  body[data-mobile-page="ai-kundtjanst"] .ak-flow-rail .ak-flow-time,
  body[data-mobile-page="ai-kundtjanst"] .ak-flow-rail .ak-flow-t,
  body[data-mobile-page="ai-kundtjanst"] .ak-flow-rail .ak-flow-d {
    opacity: 1 !important;
    transform: none !important;
  }
  .ak-integrations { display: block !important; }
  .ak-integrations-toolbar { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  .ak-integrations-search { width: 100% !important; min-height: 46px; }
  .ak-integrations-filters { display: flex !important; justify-content: flex-start !important; overflow-x: auto; scrollbar-width: none; }
  .ak-integrations-filter { min-height: 44px !important; flex: 0 0 auto; }
  .ak-mode-btn { min-height: 58px !important; }
  .ak-portal [data-portal-showcase] { min-width: 0 !important; max-width: 100% !important; }
  .ak-portal .cps,
  .ak-portal .cps__sticky,
  .ak-portal .cps__stage { height: auto !important; min-height: 0 !important; position: relative !important; top: auto !important; }
  .ak-portal .cps { overflow: visible !important; background: transparent !important; }
  .ak-portal .cps__ambient,
  .ak-portal .cps__heading,
  .ak-portal .cps__sidebar { display: none !important; }
  .ak-portal .cps__sticky { display: block !important; padding: 20px 0 0 !important; }
  .ak-portal .cps__stage { width: 100% !important; margin-top: 0 !important; perspective: none !important; }
  .ak-portal .cps__device { width: 100% !important; padding: 8px 8px 11px !important; border-radius: 20px !important; transform: none !important; }
  .ak-portal .cps__screen { height: auto !important; min-height: 0 !important; display: block !important; border-radius: 13px !important; }
  .ak-portal .cps__portal { width: 100% !important; min-width: 0 !important; padding: 20px 14px !important; overflow: hidden !important; }
  .ak-portal .cps__portal-head { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; }
  .ak-portal .cps__portal-head > * { width: 100% !important; min-width: 0 !important; }
  .ak-portal .cps__status { width: fit-content !important; min-height: 32px; }
  .ak-portal .cps__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .ak-portal .cps__metrics article { min-height: 112px !important; padding: 12px !important; }
  .ak-portal .cps__portal-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .ak-portal .cps__tickets { padding-inline: 12px !important; }
  .ak-portal .cps__ticket { grid-template-columns: 29px minmax(0, 1fr) !important; }
  .ak-portal .cps__ticket time,
  .ak-portal .cps__ticket > .cps__badge { display: none !important; }

  /* Automation */
  body[data-mobile-page="automation"] .auto-scan-journey,
  body[data-mobile-page="automation"] .auto-hero,
  body[data-mobile-page="automation"] .auto-scan-scene,
  body[data-mobile-page="automation"] .auto-modes,
  body[data-mobile-page="automation"] .aflow-section,
  body[data-mobile-page="automation"] .wd-cta { overflow: clip !important; max-width: 100%; }
  .auto-hero-inner,
  .auto-modes-inner,
  .aflow-inner,
  body[data-mobile-page="automation"] .wd-inner,
  body[data-mobile-page="automation"] .wd-cta-inner {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: var(--zaai-mobile-gutter) !important;
  }
  .auto-hero { padding-top: 128px !important; min-height: 0 !important; }
  .auto-hero-h1 { font-size: clamp(2.5rem, 11.5vw, 3.125rem) !important; line-height: 1 !important; }
  .auto-hero-break { display: none; }
  /* Skannerbandet körs även på mobil, kraftigt nedskalat, i glappet mellan
     hero och scenariokorten. */
  .auto-hero { padding-bottom: 148px !important; }
  body[data-mobile-page="automation"] .scn-section { padding: 88px 0 72px !important; }
  .auto-scan-belt {
    -webkit-mask-image: linear-gradient(to bottom, #000 var(--belt-fade-start, 100%), transparent var(--belt-fade-end, 100%));
    mask-image: linear-gradient(to bottom, #000 var(--belt-fade-start, 100%), transparent var(--belt-fade-end, 100%));
  }
  .auto-scan-card { width: 126px !important; height: 76px !important; }
  .auto-scan-ticket,
  .auto-scan-result { padding: 8px !important; }
  .auto-scan-card-layer { border-radius: 11px; }
  .auto-scan-ticket-icon { width: 15px !important; height: 15px !important; border-radius: 5px; }
  .auto-scan-ticket-icon svg { width: 9px; height: 9px; }
  .auto-scan-ticket-area { font-size: 7px !important; gap: 4px; }
  .auto-scan-ticket-state { font-size: 6.5px !important; }
  .auto-scan-ticket-title { margin: 6px 0 4px !important; font-size: 9px !important; }
  .auto-scan-ticket-foot { padding-top: 5px !important; font-size: 6.25px !important; }
  .auto-scan-result { --result-mascot-size: 45px !important; }
  .auto-scan-result-head { min-height: 14px !important; }
  .auto-scan-result-status { font-size: 6.5px !important; }
  .auto-scan-result > .auto-scan-ticket-title { margin: 6px 0 0 !important; }
  .auto-scan-result-foot { right: 8px !important; bottom: 8px !important; left: 8px !important; padding-top: 5px !important; font-size: 6.25px !important; }
  .auto-scan-code { padding: 7px 8px !important; font-size: 4.75px !important; line-height: 1.5 !important; }
  .auto-scan-contact { width: 10px !important; }

  @media (max-width: 360px) {
    .auto-scan-card { width: 108px !important; height: 66px !important; }
    .auto-scan-ticket,
    .auto-scan-result { padding: 7px !important; }
    .auto-scan-ticket-title { margin: 5px 0 3px !important; font-size: 8px !important; }
    .auto-scan-result { --result-mascot-size: 39px !important; }
    .auto-scan-result-foot { right: 7px !important; bottom: 7px !important; left: 7px !important; }
    .auto-scan-code { padding: 6px 7px !important; font-size: 4.25px !important; }
  }
  body[data-mobile-page="automation"] .scn-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  body[data-mobile-page="automation"] .scn-card {
    min-height: 142px;
    padding: 14px 12px !important;
    border-radius: 14px;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  body[data-mobile-page="automation"] .scn-card.is-mobile-active {
    border-color: rgba(107,83,145,.34);
    background: var(--bg-pink);
  }
  body[data-mobile-page="automation"] .scn-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    border-radius: 9px;
  }
  body[data-mobile-page="automation"] .scn-title,
  body[data-mobile-page="automation"] .scn-card--flag .scn-title {
    margin: 0;
    font-size: 14px;
    line-height: 1.3;
  }
  html[data-mobile-public="true"] body[data-mobile-page="automation"] .scn-card :is(.scn-desc,.scn-flow,.scn-bonus) { display: none !important; }
  body[data-mobile-page="automation"] .scn-card[role="button"] { cursor: pointer; }
  body[data-mobile-page="automation"] .scn-card[role="button"]:active { transform: scale(.98) !important; }
  body[data-mobile-page="automation"] .scn-card[role="button"]:focus-visible {
    outline: 3px solid rgba(177,216,242,.9);
    outline-offset: 2px;
  }
  body[data-mobile-page="automation"] .scn-mobile-detail {
    grid-column: 1 / -1;
    padding: 20px 18px;
    border: 1px solid rgba(107,83,145,.18);
    border-radius: 16px;
    background: #fff;
  }
  body[data-mobile-page="automation"] .scn-mobile-detail-title {
    margin-bottom: 8px;
    font: 600 1rem/1.35 var(--font-h);
    letter-spacing: -.015em;
  }
  body[data-mobile-page="automation"] .scn-mobile-detail .scn-desc { display: block !important; font-size: 14px; line-height: 1.6; }
  body[data-mobile-page="automation"] .scn-mobile-detail .scn-flow { display: flex !important; margin-top: 16px; padding-top: 0; }
  body[data-mobile-page="automation"] .scn-mobile-detail .scn-tag { height: auto; min-height: 28px; padding-block: 5px; white-space: normal; }
  body[data-mobile-page="automation"] .scn-mobile-detail .scn-bonus { display: block !important; opacity: 1; transform: none; }
  .auto-scan-route,
  .auto-scan-belt,
  .auto-scan-particles { max-width: 100% !important; }
  .auto-order,
  .auto-modes-grid,
  .auto-case-rows { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-mobile-page="automation"] .auto-modes { padding: 64px 0 72px !important; }
  body[data-mobile-page="automation"] .auto-modes-inner { padding-inline: 20px !important; }
  body[data-mobile-page="automation"] .auto-modes-header { margin-bottom: 24px !important; }
  body[data-mobile-page="automation"] .auto-modes-header .section-h {
    font-size: clamp(2rem, 9vw, 2.25rem) !important;
    line-height: 1.04 !important;
    text-wrap: balance;
  }
  body[data-mobile-page="automation"] .auto-modes-header .section-sub {
    max-width: 29ch;
    margin: 14px auto 0 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
  body[data-mobile-page="automation"] .auto-modes-title--desktop,
  body[data-mobile-page="automation"] .auto-modes-sub--desktop,
  body[data-mobile-page="automation"] .auto-mode-label--desktop,
  body[data-mobile-page="automation"] .auto-mode-hint--desktop,
  body[data-mobile-page="automation"] .auto-case-text--desktop { display: none !important; }
  body[data-mobile-page="automation"] .auto-modes-title--mobile,
  body[data-mobile-page="automation"] .auto-modes-sub--mobile,
  body[data-mobile-page="automation"] .auto-mode-label--mobile,
  body[data-mobile-page="automation"] .auto-mode-hint--mobile,
  body[data-mobile-page="automation"] .auto-case-text--mobile { display: inline !important; }
  body[data-mobile-page="automation"] .auto-modes-panel {
    padding: 20px 16px 18px !important;
    border-radius: 22px !important;
    box-shadow: 0 20px 54px rgba(107,83,145,.22) !important;
  }
  body[data-mobile-page="automation"] .auto-modes-panel::before { left: 16px !important; right: 16px !important; }
  body[data-mobile-page="automation"] .auto-modes-grid { gap: 20px !important; }
  body[data-mobile-page="automation"] .auto-mode-col { min-width: 0; }
  body[data-mobile-page="automation"] .auto-mode-col > .auto-mode-label { display: none !important; }
  body[data-mobile-page="automation"] .auto-mode-list {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 13px;
    background: rgba(255,255,255,.045);
  }
  body[data-mobile-page="automation"] .auto-mode-btn {
    min-width: 0;
    min-height: 56px !important;
    padding: 7px 4px !important;
    border-color: transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    text-align: center !important;
    touch-action: manipulation;
  }
  body[data-mobile-page="automation"] .auto-mode-btn::before { display: none !important; }
  body[data-mobile-page="automation"] .auto-mode-btn[aria-checked="true"] {
    border-color: rgba(196,169,255,.34) !important;
    background: rgba(196,169,255,.14) !important;
  }
  body[data-mobile-page="automation"] .auto-mode-btn:active { transform: scale(.98); }
  body[data-mobile-page="automation"] .auto-mode-name {
    margin: 0 !important;
    font-size: .78rem !important;
    line-height: 1.15 !important;
    text-wrap: balance;
  }
  body[data-mobile-page="automation"] .auto-mode-desc {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  body[data-mobile-page="automation"] .auto-mode-selected-desc {
    display: block !important;
    min-height: 44px;
    margin: 14px 2px 0;
    color: rgba(255,255,255,.75);
    font-size: .9rem;
    line-height: 1.5;
  }
  body[data-mobile-page="automation"] .auto-mode-hint {
    display: none;
    margin: 14px 2px 0 !important;
    padding: 9px 0 9px 12px !important;
    border-left: 2px solid #B1D8F2;
    color: rgba(255,255,255,.72) !important;
    font-size: .8125rem !important;
    line-height: 1.5 !important;
  }
  body[data-mobile-page="automation"] .auto-modes-panel[data-mode="approval"] .auto-mode-hint { display: block; }
  body[data-mobile-page="automation"] .auto-mode-stage {
    min-height: 0 !important;
    padding: 18px 16px 0 !important;
    border-radius: 16px !important;
  }
  body[data-mobile-page="automation"] .auto-mode-stage > .auto-mode-label--mobile {
    display: block !important;
    margin-bottom: 12px !important;
  }
  body[data-mobile-page="automation"] .auto-mode-stage > .auto-mode-label--desktop { display: none !important; }
  body[data-mobile-page="automation"] .auto-mode-stage-note { display: none !important; }

  /* Fördelningen visas som en riktig mätare, samma som på desktop. */
  body[data-mobile-page="automation"] .auto-meter-wrap {
    display: block !important;
    margin-bottom: 14px !important;
  }
  body[data-mobile-page="automation"] .auto-meter { height: 8px !important; }
  body[data-mobile-page="automation"] .auto-meter-labels { display: none !important; }
  body[data-mobile-page="automation"] .auto-mode-split-summary {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    margin: -8px 0 14px !important;
    font-size: .7rem;
    line-height: 1.3;
  }
  body[data-mobile-page="automation"] .auto-mode-split-summary > span {
    display: block;
    min-width: 0;
  }
  body[data-mobile-page="automation"] .auto-mode-split-summary b {
    display: block;
    font-weight: 600;
  }
  body[data-mobile-page="automation"] .auto-mode-split-auto { color: #C4A9FF; text-align: left; }
  body[data-mobile-page="automation"] .auto-mode-split-human { color: rgba(255,255,255,.72); text-align: right; }
  body[data-mobile-page="automation"] .auto-case-rows { display: block !important; }
  body[data-mobile-page="automation"] .auto-case-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 54px;
    padding: 11px 0 !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: none !important;
  }
  body[data-mobile-page="automation"] .auto-case-row:last-child { border-bottom: 0 !important; }
  body[data-mobile-page="automation"] .auto-case-text { font-size: .78rem !important; line-height: 1.35 !important; }
  body[data-mobile-page="automation"] .auto-owner-chip {
    justify-self: end !important;
    min-width: 0 !important;
    min-height: 25px !important;
    padding: 4px 8px !important;
    font-size: .68rem !important;
  }
  body[data-mobile-page="automation"] .auto-modes-foot { display: none !important; }
  body[data-mobile-page="automation"] .auto-modes-mobile-foot {
    display: block !important;
    margin: 16px 0 0 !important;
    padding: 15px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.7);
    font-size: .8125rem;
    line-height: 1.45;
  }
  body[data-mobile-page="automation"] .aflow-section { padding: 68px 0 76px !important; }
  body[data-mobile-page="automation"] .aflow-inner { padding-inline: 0 !important; }
  body[data-mobile-page="automation"] .aflow-header,
  body[data-mobile-page="automation"] .aflow-card { margin-inline: var(--zaai-mobile-gutter); }
  body[data-mobile-page="automation"] .aflow-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 16px !important;
    padding: 2px var(--zaai-mobile-gutter) 8px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    left: auto !important;
    translate: none !important;
    justify-content: flex-start !important;
  }
  body[data-mobile-page="automation"] .aflow-tabs::-webkit-scrollbar { display: none; }
  body[data-mobile-page="automation"] .aflow-tab {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 44px !important;
    padding-inline: 14px !important;
    white-space: nowrap !important;
    scroll-snap-align: center;
  }
  body[data-mobile-page="automation"] .aflow-tab.is-advanced > span { color: var(--primary); background: none; -webkit-text-fill-color: currentColor; }
  /* Animationen först, texten under: då ligger flikarna och fönstret i samma
     vy och man slipper skrolla upp för att byta exempel. */
  body[data-mobile-page="automation"] .aflow-card {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0;
    border-radius: 20px;
    overflow: hidden;
  }
  body[data-mobile-page="automation"] .aflow-visual { order: -1; }
  body[data-mobile-page="automation"] .aflow-copy { order: 1; border-top: 1px solid rgba(107,83,145,.1); }
  body[data-mobile-page="automation"] .aflow-copy { padding: 22px 18px 20px; }
  body[data-mobile-page="automation"] .aflow-copy h3 { font-size: 1.375rem; }
  body[data-mobile-page="automation"] .aflow-copy > p { font-size: 14px; line-height: 1.6; }
  body[data-mobile-page="automation"] .aflow-phases { margin-top: 20px; padding-top: 0; }
  body[data-mobile-page="automation"] .aflow-phases {
    grid-template-columns: repeat(2,minmax(0,1fr));
    border-top: 1px solid rgba(107,83,145,.1);
    border-bottom: 1px solid rgba(107,83,145,.1);
  }
  body[data-mobile-page="automation"] .aflow-phase {
    display: block;
    min-height: 92px;
    padding: 11px 10px;
    border: 0;
  }
  body[data-mobile-page="automation"] .aflow-phase:nth-child(odd) { border-right: 1px solid rgba(107,83,145,.1); }
  body[data-mobile-page="automation"] .aflow-phase:nth-child(-n+2) { border-bottom: 1px solid rgba(107,83,145,.1); }
  body[data-mobile-page="automation"] .aflow-phase-label { display: block; margin-bottom: 4px; font-size: 11px; }
  body[data-mobile-page="automation"] .aflow-phase-text { display: block; font-size: 12px; line-height: 1.4; }
  body[data-mobile-page="automation"] .aflow-mobile-instruction {
    display: block;
    margin: 0;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(107,83,145,.1);
    color: var(--muted);
    font-size: 12px;
    text-align: center;
  }
  body[data-mobile-page="automation"] .aflow-stage {
    position: absolute;
    top: 62px;
    left: 50%;
    width: 680px !important;
    max-width: none !important;
    height: var(--aflow-stage-height,616px) !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: scale(var(--aflow-mobile-scale,.5)) !important;
    transform-origin: top center !important;
    translate: -50% 0;
  }
  .aflow-visual { width: 100% !important; max-width: 100% !important; transform: none !important; }
  .aflow-replay { min-height: 44px !important; }
  body[data-mobile-page="automation"] .aflow-compare,
  body[data-mobile-page="automation"] .aflow-backend-layer {
    min-height: 0;
    height: var(--aflow-mobile-compare-height,400px);
  }
  body[data-mobile-page="automation"] .aflow-backend-layer { display: block; overflow: hidden; padding: 0 !important; }
  body[data-mobile-page="automation"] .aflow-node small,
  body[data-mobile-page="automation"] .aflow-node-data { display: none !important; }
  body[data-mobile-page="automation"] .aflow-node {
    grid-template-columns: 26px minmax(0,1fr);
    column-gap: 6px;
    min-width: 0;
    padding: 9px 30px 9px 8px;
  }
  body[data-mobile-page="automation"] .aflow-node-copy { min-width: 0; overflow: hidden; }
  /* Inga avstavningar och inga ord som bryts mitt itu — kortet är i stället
     bredare och texten något mindre. */
  body[data-mobile-page="automation"] .aflow-node strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 15px;
    line-height: 1.14;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  body[data-mobile-page="automation"] .aflow-node-label {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 2px;
    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  body[data-mobile-page="automation"] .aflow-node-icon { width: 26px; height: 26px; }
  body[data-mobile-page="automation"] .aflow-node-icon img,
  body[data-mobile-page="automation"] .aflow-node-icon svg { width: 19px; height: 19px; }
  body[data-mobile-page="automation"] .aflow-node-state { position: absolute; top: 8px; right: 7px; width: 20px; height: 20px; }
  body[data-mobile-page="automation"] .aflow-node-state svg { width: 12px; height: 12px; }
  body[data-mobile-page="automation"] .aflow-edge-label { font-size: 18px; line-height: 1.1; }
  body[data-mobile-page="automation"] .aflow-path { stroke-width: 2.5px; }
  body[data-mobile-page="automation"] .aflow-backend-layer { width: 100% !important; padding: 0 !important; }
  body[data-mobile-page="automation"] .aflow-customer-layer { width: auto !important; clip-path: inset(0 calc(100% - var(--aflow-split,68%)) 0 0) !important; }
  body[data-mobile-page="automation"] .aflow-customer-layer { display: block; padding: 62px 0 0 !important; }
  body[data-mobile-page="automation"] .aflow-customer-stage {
    position: absolute;
    top: 62px;
    left: 50%;
    width: 430px;
    max-width: none;
    transform: scale(var(--aflow-customer-scale,.65));
    transform-origin: top center;
    translate: -50% 0;
    transition: opacity 160ms ease;
  }
  body[data-mobile-page="automation"] .aflow-customer-detail,
  body[data-mobile-page="automation"] .aflow-customer-facts,
  body[data-mobile-page="automation"] .aflow-customer-checks,
  body[data-mobile-page="automation"] .aflow-customer-note { display: none !important; }
  body[data-mobile-page="automation"] .aflow-customer-body { padding: 24px 26px 22px; }
  body[data-mobile-page="automation"] .aflow-customer-actions { margin-top: 18px; }
  body[data-mobile-page="automation"] .aflow-compare.is-backend-focused .aflow-customer-stage { opacity: 0; }
  body[data-mobile-page="automation"] .aflow-view-label--backend { left: 96px; right: auto; }
  body[data-mobile-page="automation"] .aflow-replay { top: 10px; right: 10px; width: 44px; padding: 0; justify-content: center; }
  body[data-mobile-page="automation"] .aflow-replay span { display: none; }
  body[data-mobile-page="automation"] .aflow-divider { display: block !important; width: 50px; pointer-events: none; touch-action: pan-y; }
  body[data-mobile-page="automation"] .aflow-divider-handle { display: grid !important; width: 48px; height: 48px; pointer-events: auto; touch-action: pan-y; }

  /* Content-bearing reports are complete even if their observer never fires. */
  body[data-mobile-page="seo"] .seo-report .seo-report-stamp,
  body[data-mobile-page="seo"] .seo-report .seo-score,
  body[data-mobile-page="seo"] .seo-report .seo-score-num,
  body[data-mobile-page="seo"] .seo-report .seo-flaw {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  body[data-mobile-page="seo"] .seo-report .seo-meter i.is-on { transform: none !important; }
  /* Processtegen animeras in på mobil också: samma observatör tänder .is-in
     på alla sektioner på sidan, och den träffar långt innan steget är framme.
     Utan JS finns .no-js-fallbacken i sidans egen stilmall. */

  /* Web design: desktop scroll theatre becomes finite chapters. */
  body[data-mobile-page="webbdesign"] .wd-hero {
    min-height: 0 !important;
    padding: 128px var(--zaai-mobile-gutter) 64px !important;
    overflow: clip;
  }
  body[data-mobile-page="webbdesign"] .wd-hero-inner { width: 100% !important; max-width: 100% !important; }
  /* Figurin-stilen lyfter ut textblocket ur flödet och placerar det absolut.
     Regeln ovan är skriven för de tretton stilar där blocket flyter normalt —
     på figurin blev 100 % bredd räknat från left:16px 16 px för brett, så
     brödtext och knappar klipptes i högerkanten. Här styr insättningar i
     stället för bredd. */
  body[data-mobile-page="webbdesign"] #hero[data-style="figurin"] .wd-hero-inner {
    left: var(--zaai-mobile-gutter) !important;
    right: var(--zaai-mobile-gutter) !important;
    bottom: 28px !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: left !important;
  }
  /* ── Kapitelscenen ──────────────────────────────────────────────
     Desktop pinnar en 100vh-panel i 2–3 skärmars scroll och scrubbar
     konstverket genom tre steg. På mobil är scenmotorn avstängd, så
     kapitlen fick sitt SLUTLÄGE direkt: minimalscenens kort är redan
     bortfejdade, brutalscenen är bara ett tomt rutnät. Resultatet blev
     6 × ~700 px tomrum.

     Här packas scenen i stället ihop till ett kapitelkort: rubriken
     först, sedan en riktig liten hemsida i kapitlets formspråk (samma
     mini-sajt som stilkarusellen längre ner bygger). Effekten blir
     densamma som på desktop — formspråket bevisas i stället för att
     beskrivas — men på en tredjedel av scrollen.
     Attrapperna sätts in av mobilblocket i webbdesign.html. */
  body[data-mobile-page="webbdesign"] .ch { --seam-h: 88px; }
  body[data-mobile-page="webbdesign"] .ch-scene {
    display: flex !important;
    flex-direction: column;
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    /* Sidmarginalen ärvs från sidans egen regel (8 px) — kapitelkortet får
       gärna ta hela bredden. Attrappen mäter panelen i efterhand, se
       storleksobservatören i webbdesign.html. */
  }
  body[data-mobile-page="webbdesign"] .ch-copy {
    order: 1;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    padding: 46px 0 26px !important;
    gap: 12px !important;
    transform: none !important;
    opacity: 1 !important;
  }
  body[data-mobile-page="webbdesign"] .ch-panel {
    order: 2;
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    border-radius: 16px !important;
    border: 1px solid color-mix(in oklab, var(--ch-ink, #1a1a1a) 14%, transparent) !important;
    background: var(--ch-bg) !important;
    overflow: hidden !important;
  }
  body[data-mobile-page="webbdesign"] .ch-title {
    max-width: 15ch;
    font-size: clamp(1.75rem, 7.4vw, 2.375rem);
  }
  /* Desktopscenens lager har koordinater räknade på en 1440-panel. På
     390 px finns inte ytan — de göms hellre än visas trasiga. */
  body[data-mobile-page="webbdesign"] .ch-panel .ch-art,
  body[data-mobile-page="webbdesign"] .ch-panel .ch-artefact,
  body[data-mobile-page="webbdesign"] .ch-panel .ch-props,
  body[data-mobile-page="webbdesign"] .ch-panel .ch-widgets,
  body[data-mobile-page="webbdesign"] .ch-panel .ch-scrim,
  body[data-mobile-page="webbdesign"] .ch-panel .ch-veil,
  body[data-mobile-page="webbdesign"] .ch-panel .mn-stage,
  body[data-mobile-page="webbdesign"] .ch-scene .ch-step { display: none !important; }
  body[data-mobile-page="webbdesign"] .ch-scene .ch-num {
    position: absolute !important;
    top: 10px !important;
    left: var(--zaai-mobile-gutter) !important;
    opacity: .45;
  }

  /* Kapitelattrappen: karusellens mini-sajt, skalad till spaltbredd. */
  body[data-mobile-page="webbdesign"] .wd-mock.car-card {
    display: block;
    width: 100% !important;
    height: var(--wd-mock-h, 0px) !important;
    flex: none !important;
    position: relative;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: default;
    transition: none !important;
    overflow: hidden;
  }
  body[data-mobile-page="webbdesign"] .wd-mock .car-stage {
    position: absolute !important;
    inset: 0 !important;
    opacity: 1 !important;
    pointer-events: none;
    transform-origin: top left;
    transition: none !important;
  }
  body[data-mobile-page="webbdesign"] .wd-mock-cap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-top: 1px solid color-mix(in oklab, var(--ch-ink, #1a1a1a) 12%, transparent);
    background: var(--ch-bg);
    color: var(--ch-ink-2, rgba(0, 0, 0, .6));
    font-family: var(--ch-font-body, inherit);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  body[data-mobile-page="webbdesign"] .wd-mock-cap b {
    font-family: var(--ch-font-display, inherit);
    font-weight: var(--ch-display-w, 600);
    letter-spacing: var(--ch-display-ls, 0);
    text-transform: var(--ch-display-case, uppercase);
    color: var(--ch-ink);
    white-space: nowrap;
  }
  /* Mjuk insläppning i stället för desktopens scrub. */
  body[data-mobile-page="webbdesign"] .ch-panel {
    opacity: 0;
    transform: translateY(18px) !important;
    transition: opacity 620ms cubic-bezier(.16, 1, .3, 1), transform 620ms cubic-bezier(.16, 1, .3, 1);
  }
  body[data-mobile-page="webbdesign"] .ch-panel.is-in {
    opacity: 1;
    transform: none !important;
  }
  body[data-mobile-page="webbdesign"] .min-block,
  body[data-mobile-page="webbdesign"] .brut-block,
  body[data-mobile-page="webbdesign"] .il-block,
  body[data-mobile-page="webbdesign"] .ed-block,
  body[data-mobile-page="webbdesign"] .max-block,
  body[data-mobile-page="webbdesign"] .neon-block { padding-inline: var(--zaai-mobile-gutter) !important; }
  /* Karusellen låg innanför BÅDE sektionens och blockets sidmarginal, så
     spelytan blev 311 px medan det aktiva kortet är 88 % av skärmen (343).
     Kortet klipptes i båda kanter. Blocket går i stället kant till kant —
     rubrik och fot har egen indragning — så hela kortet syns och
     grannkorten kikar fram som på dator. */
  body[data-mobile-page="webbdesign"] .car-block {
    padding-inline: 0 !important;
    margin-inline: calc(-1 * var(--zaai-mobile-gutter)) !important;
  }
  body[data-mobile-page="webbdesign"] .car-head,
  body[data-mobile-page="webbdesign"] .car-foot { padding-inline: var(--zaai-mobile-gutter) !important; }
  body[data-mobile-page="webbdesign"] .min-inner,
  body[data-mobile-page="webbdesign"] .ed-inner,
  body[data-mobile-page="webbdesign"] .sw-inner,
  body[data-mobile-page="webbdesign"] .max-inner { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-mobile-page="webbdesign"] .ed-inner > *,
  body[data-mobile-page="webbdesign"] .sw-inner > *,
  body[data-mobile-page="webbdesign"] .pc-cta-wrap { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; }
  body[data-mobile-page="webbdesign"] .ed-lead,
  body[data-mobile-page="webbdesign"] .pc-note,
  body[data-mobile-page="webbdesign"] .pc-cta-fine { max-width: none !important; width: 100% !important; }
  body[data-mobile-page="webbdesign"] .pc-stage { margin-top: 40px !important; }
  body[data-mobile-page="webbdesign"] .pc-card,
  body[data-mobile-page="webbdesign"] .pc-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body[data-mobile-page="webbdesign"] .pc-cta-wrap { margin-top: 40px !important; align-items: stretch !important; }
  body[data-mobile-page="webbdesign"] .pc-cta { width: 100% !important; justify-content: center !important; }
  .neon-canvas { display: none !important; }
  .car-track .car-card { max-width: calc(100vw - 40px) !important; }
  /* Pilarna låg ovanpå kortet: kortet är 88vw, så det finns ingen marginal
     kvar i sidled att lägga dem i. På mobil flyttas de under kortet i
     stället, där de inte täcker den lilla hemsidan. */
  .car-nav {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    top: auto !important;
    bottom: 0 !important;
    transform: none !important;
  }
  .car-nav:active { transform: scale(.94) !important; }
  .car-nav--prev { left: calc(50% - 54px) !important; }
  .car-nav--next { right: calc(50% - 54px) !important; }
  body[data-mobile-page="webbdesign"] .car-viewport { padding-bottom: 60px !important; }
  #glSwitch,
  #glPause,
  .min-cta,
  .brut-btn,
  #ilPen { min-width: 44px !important; min-height: 44px !important; }
  body[data-mobile-page="webbdesign"] a[href="/bestall-automation"] { min-height: 44px; display: inline-flex; align-items: center; }
  /* Femton prickar behöver 44 px tryckyta var och lade sig i tre rader
     mitt i kortet. Pilarna, dragningen och räknaren "05 / 15" gör samma
     jobb på mindre plats. */
  .car-dots { display: none !important; }
  /* Två breda knappar i en inline-flex sprack ut ur rutan i båda kanter. */
  body[data-mobile-page="webbdesign"] .car-cta {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
  }
  body[data-mobile-page="webbdesign"] .car-cta .btn { width: 100%; justify-content: center; }
  body[data-mobile-page="webbdesign"] .car-desc { min-height: 0 !important; }
  body[data-mobile-page="webbdesign"] .car-block { padding-bottom: 72px !important; }

  /* ── 01 · Neon ──────────────────────────────────────────────── */
  /* Hela hjälptexten handlar om mus och klick. Den finns inte här. */
  body[data-mobile-page="webbdesign"] .neon-hint { display: none !important; }
  body[data-mobile-page="webbdesign"] .neon-block { padding: 68px var(--zaai-mobile-gutter) 72px !important; }
  body[data-mobile-page="webbdesign"] .neon-stats { grid-template-columns: 1fr 1fr !important; }
  /* 52 px vänstermarginal fanns för att ge plats åt handskriften bredvid. */
  body[data-mobile-page="webbdesign"] .neon-order {
    display: grid !important;
    margin: 28px 0 0 !important;
    width: 100%;
  }
  body[data-mobile-page="webbdesign"] .neon-order-guide { display: none !important; }
  body[data-mobile-page="webbdesign"] .neon-cta { width: 100%; justify-content: center; }

  /* ── 03 · Brutalistisk ──────────────────────────────────────────
     Sex kort med var sin trepunktslista blev nästan 2 800 px scroll,
     och stämpel- plus rutanimationerna smällde till i varje kort på
     vägen ned ("det blinkar mycket"). På mobil kortas listan till
     rubrik + en mening per moment, dekorraderna som upprepar samma
     sex ord tas bort, och stegblinkningarna stängs av. */
  body[data-mobile-page="webbdesign"] .brut-list,
  body[data-mobile-page="webbdesign"] .brut-checks,
  body[data-mobile-page="webbdesign"] .brut-tags,
  body[data-mobile-page="webbdesign"] .brut-final__bar { display: none !important; }
  body[data-mobile-page="webbdesign"] .brut-bleed {
    padding-left: var(--zaai-mobile-gutter) !important;
    padding-right: var(--zaai-mobile-gutter) !important;
    overflow: clip;
  }
  body[data-mobile-page="webbdesign"] .brut-status {
    grid-template-columns: 1fr auto !important;
    height: auto !important;
    padding: 12px 0 !important;
    gap: 12px;
    font-size: 10px !important;
  }
  body[data-mobile-page="webbdesign"] .brut-slam {
    gap: 6px 22px !important;
    padding: 18px 0 20px !important;
  }
  body[data-mobile-page="webbdesign"] .brut-slam span { font-size: clamp(1.75rem, 9vw, 2.5rem) !important; }
  /* BAM-lapparna hänger på left:100% och slog ut hela raden i sidled. */
  body[data-mobile-page="webbdesign"] .brut-slam span::after { display: none !important; }
  /* Kortens min-höjd fanns för att hålla tre kolumner i linje. I en kolumn
     utan punktlista blev den bara 120 px luft under varje mening. */
  body[data-mobile-page="webbdesign"] .brut-cell {
    padding: 22px 18px 26px !important;
    min-height: 0 !important;
  }
  body[data-mobile-page="webbdesign"] .brut-block { padding: 56px 0 0 !important; }
  body[data-mobile-page="webbdesign"] .brut-t { font-size: 1.0625rem !important; line-height: 1.2 !important; }
  body[data-mobile-page="webbdesign"] .brut-d { margin-bottom: 0 !important; }
  body[data-mobile-page="webbdesign"] .brut-final {
    padding: 44px var(--zaai-mobile-gutter) 52px !important;
  }
  body[data-mobile-page="webbdesign"] .brut-final__t { font-size: clamp(2.75rem, 15vw, 4rem) !important; }
  body[data-mobile-page="webbdesign"] .brut-final__m {
    flex-direction: column;
    gap: 6px !important;
    margin-top: 20px !important;
    font-size: 10.5px !important;
  }
  body[data-mobile-page="webbdesign"] .brut-final .brut-btn { margin-top: 22px !important; }
  /* Stegvisa smällar (steps()) på sex kort under scroll = flimmer. */
  body[data-mobile-page="webbdesign"] .reveal.is-in .brut-cell,
  body[data-mobile-page="webbdesign"] .brut-slam.is-in span,
  body[data-mobile-page="webbdesign"] .brut-slam span,
  body[data-mobile-page="webbdesign"] .brut-checks span b,
  body[data-mobile-page="webbdesign"] .reveal.is-in .brut-final__t span,
  body[data-mobile-page="webbdesign"] .brut-final__t span {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  /* Limeblixten över varje kort släcks helt — annars ligger den kvar tänd. */
  body[data-mobile-page="webbdesign"] .brut-cell::before {
    animation: none !important;
    opacity: 0 !important;
  }
  body[data-mobile-page="webbdesign"] .brut-caret { animation: none !important; }

  /* ── 04 · Illustrativ (priser) ──────────────────────────────── */
  body[data-mobile-page="webbdesign"] .il-block { padding: 60px var(--zaai-mobile-gutter) 64px !important; }
  /* Pennan satt absolut i scenpanelen och hamnade mitt över attrappen.
     Mobilblocket flyttar in den i rubrikblocket; här görs den till en
     vanlig knapp i flödet. */
  body[data-mobile-page="webbdesign"] .ch-copy .il-pen {
    position: static !important;
    pointer-events: auto;
    margin-top: 2px;
  }
  body[data-mobile-page="webbdesign"] .il-plan__ul { columns: 1 !important; }
  body[data-mobile-page="webbdesign"] .il-strip__label { margin-bottom: 4px; }

  /* ── 05 · Redaktionell ──────────────────────────────────────── */
  body[data-mobile-page="webbdesign"] .ed-block { padding: 68px var(--zaai-mobile-gutter) 72px !important; }
  body[data-mobile-page="webbdesign"] .pc-card { padding: 20px 18px 22px !important; }

  /* ── 06 · Maximalistisk ─────────────────────────────────────── */
  body[data-mobile-page="webbdesign"] .max-block { padding: 68px var(--zaai-mobile-gutter) 76px !important; }
  body[data-mobile-page="webbdesign"] .mx-star,
  body[data-mobile-page="webbdesign"] .mx-word { display: none !important; }

  /* ── 07 · Tillbaka till ZAAI ──────────────────────────────────
     Sektionen inleds med en 260 px blå övertoning ned från förra
     kapitlet. På dator börjar texten först efter den (320 px toppluft);
     på mobil var toppluften nedskuren till 84 px, så rubriken hamnade
     mitt i det blå och blev nästan oläsbar. Övertoningen kortas och
     texten börjar under den. */
  body[data-mobile-page="webbdesign"] .zaai-close { padding-top: 168px !important; }
  body[data-mobile-page="webbdesign"] .zaai-close::before { height: 128px !important; }

  /* ROI-kalkylatorn: hela vyn ska rymmas på en telefonskärm utan scroll. */
  .zaai-roi { padding: 20px 15px 24px !important; }
  .zaai-roi__label { font-size: 11.5px !important; }
  .zaai-roi h2 {
    margin-top: 6px !important;
    font-size: clamp(22px, 6.2vw, 24px) !important;
    line-height: 1.12 !important;
  }
  .zaai-roi__description {
    margin-top: 9px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .zaai-roi__disclaimer {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .zaai-roi__shell { margin-top: 20px !important; border-radius: 14px !important; }
  .zaai-roi__form { padding: 15px 14px 17px !important; }
  .zaai-roi__result { padding: 15px 14px 17px !important; border-radius: 0 0 13px 13px !important; }
  .zaai-roi__panel-header { gap: 10px !important; }
  .zaai-roi__panel-icon { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 9px !important; }
  .zaai-roi__panel-icon svg { width: 15px !important; height: 15px !important; }
  .zaai-roi h3 { font-size: 17px !important; line-height: 1.25 !important; }
  .zaai-roi__panel-header p { margin-top: 2px !important; font-size: 12.5px !important; line-height: 1.4 !important; }
  .zaai-roi__fields { gap: 12px !important; margin-top: 14px !important; }
  .zaai-roi__field label,
  .zaai-roi__field legend { font-size: 13.5px !important; line-height: 1.3 !important; }
  .zaai-roi__control { margin-top: 6px !important; }
  .zaai-roi__control input,
  .zaai-roi__control select { min-height: 44px !important; padding-block: 8px !important; }
  .zaai-roi__help { margin-top: 4px !important; font-size: 11px !important; line-height: 1.35 !important; }
  /* Felraden reserverade plats även när allt var rätt ifyllt. */
  .zaai-roi__error { min-height: 0 !important; margin-top: 0 !important; font-size: 11.5px !important; }
  .zaai-roi__error:not(:empty) { margin-top: 4px !important; }

  /* Resultatet: huvudsiffran full bredd, de två stödsiffrorna sida vid sida. */
  .zaai-roi__metrics {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-top: 12px !important;
  }
  .zaai-roi__metric--primary {
    grid-column: 1 / -1 !important;
    padding: 12px !important;
  }
  .zaai-roi__metric:not(.zaai-roi__metric--primary) {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 10px !important;
  }
  .zaai-roi__metric dt { font-size: 11.5px !important; line-height: 1.3 !important; }
  .zaai-roi__metric--primary dt { font-size: 12.5px !important; }
  .zaai-roi__metric dd { margin-top: 3px !important; }
  .zaai-roi__metric output { font-size: 16px !important; letter-spacing: -.02em !important; }
  .zaai-roi__metric--primary output,
  .zaai-roi .zaai-roi__metric--primary output { font-size: 26px !important; }
  .zaai-roi__metric [data-metric-detail] {
    margin-top: 3px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  /* Förklaringarna under siffrorna upprepar vad etiketten redan säger. */
  .zaai-roi__metric [data-metric-detail] { display: none !important; }
  .zaai-roi__result-note {
    display: block !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
    color: var(--roi-muted) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* Övertoningen mellan formulär och resultat suddade ut hjälptexten under
     sista fältet. Panelerna skiljs ändå åt av bakgrundsfärgen. */
  .zaai-roi__result::before { display: none !important; }

  /* Both order wizards */
  body[data-mobile-wizard="true"] {
    overflow: hidden !important;
    background: #fff !important;
  }
  body[data-mobile-wizard="true"] .wz-shell {
    --head-h: 64px;
    --foot-h: auto;
    width: 100% !important;
    height: var(--wz-vvh, 100dvh) !important;
    max-height: var(--wz-vvh, 100dvh) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    grid-template-rows: 64px minmax(0, 1fr) auto !important;
  }
  body[data-mobile-wizard="true"] .wz-head { padding: 0 12px !important; gap: 10px !important; }
  body[data-mobile-wizard="true"] .wz-logo img { width: 52px !important; height: 52px !important; object-fit: contain; }
  body[data-mobile-wizard="true"] .wz-head-div,
  body[data-mobile-wizard="true"] .wz-head-sub,
  body[data-mobile-wizard="true"] .wz-save { display: none !important; }
  body[data-mobile-wizard="true"] .wz-head-title { font-size: 14px !important; }
  body[data-mobile-wizard="true"] .wz-close { width: 44px !important; height: 44px !important; }
  body[data-mobile-wizard="true"] .wz-mid { display: block !important; min-height: 0 !important; overflow: hidden; }
  body[data-mobile-wizard="true"] .wz-nav { display: none !important; }
  body[data-mobile-wizard="true"] .wz-content {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body[data-mobile-wizard="true"] .wz-steprail {
    position: relative !important;
    inset: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 8px 16px !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(107,83,145,.1);
    --wz-mobile-pct: .125;
  }
  body[data-mobile-wizard="true"] .wz-steprail::after,
  body[data-mobile-wizard="true"] .wz-steprail::before {
    content: '';
    position: absolute;
    left: 16px;
    bottom: 8px;
    height: 4px;
    border-radius: 99px;
  }
  body[data-mobile-wizard="true"] .wz-steprail::after {
    right: 58px;
    background: rgba(107,83,145,.12);
  }
  body[data-mobile-wizard="true"] .wz-steprail::before {
    z-index: 1;
    width: calc((100% - 74px) * var(--wz-mobile-pct));
    background: linear-gradient(90deg,#8b5cf6,#e879a8);
    transition: width 180ms cubic-bezier(.16,1,.3,1);
  }
  body[data-mobile-wizard="true"] .wz-steprail-inner { width: 100% !important; height: 100%; }
  body[data-mobile-wizard="true"] .wz-steps { width: 100% !important; }
  body[data-mobile-wizard="true"] .wz-step,
  body[data-mobile-wizard="true"] .wz-steps > li,
  body[data-mobile-wizard="true"] .wz-step-dot,
  body[data-mobile-wizard="true"] .wz-step-label { display: none !important; }
  body[data-mobile-wizard="true"] .wz-steps-track {
    display: none !important;
  }
  body[data-mobile-wizard="true"] .wz-stepcount {
    position: absolute !important;
    right: 8px !important;
    bottom: 2px !important;
    min-width: 42px;
    font-size: 13px !important;
  }
  body[data-mobile-wizard="true"] .wz-mobile-title {
    position: absolute;
    left: 16px;
    right: 64px;
    top: 7px;
    bottom: auto;
    color: #6B6B6B;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-mobile-wizard="true"] .wz-mobile-quote {
    position: absolute;
    right: 58px;
    top: 4px;
    z-index: 2;
    min-width: 96px;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid rgba(107,83,145,.18);
    border-radius: 11px;
    background: #fff;
    color: #6B5391;
    font: 600 12px/1 Inter, sans-serif;
  }
  body[data-mobile-wizard="true"] .wz-mobile-quote + .wz-mobile-title { right: 170px; }
  body[data-mobile-wizard="true"] .wz-mobile-errors {
    max-height: 34dvh;
    overflow-y: auto;
    padding: 0 12px;
    background: #fff;
  }
  body[data-mobile-wizard="true"] .wz-mobile-errors:empty { display: none; }
  body[data-mobile-wizard="true"] .wz-errside { position: static !important; width: 100% !important; transform: none !important; }
  body[data-mobile-wizard="true"] .wz-errside .in { width: 100% !important; }
  body[data-mobile-wizard="true"] .wz-canvas {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 24px 16px 40px !important;
    scroll-padding-block: 72px 120px;
  }
  body[data-mobile-wizard="true"] .wz-pane { width: 100% !important; max-width: 100% !important; }
  body[data-mobile-wizard="true"] .wz-pane h1,
  body[data-mobile-wizard="true"] .wz-pane h2 { font-size: clamp(1.75rem, 8vw, 2.15rem) !important; line-height: 1.08 !important; }
  body[data-mobile-wizard="true"] .wz-grid,
  body[data-mobile-wizard="true"] .wz-grid2,
  body[data-mobile-wizard="true"] .wz-grid3,
  body[data-mobile-wizard="true"] .wz-pkgs,
  body[data-mobile-wizard="true"] .wz-tiles,
  body[data-mobile-wizard="true"] .wz-styles,
  body[data-mobile-wizard="true"] .wz-sumgrid,
  body[data-mobile-wizard="true"] .wz-summary,
  body[data-mobile-wizard="true"] .wz-acards,
  body[data-mobile-wizard="true"] .wz-sacards,
  body[data-mobile-wizard="true"] .wz-qopts,
  body[data-mobile-wizard="true"] .wz-nxts { grid-template-columns: minmax(0, 1fr) !important; }
  body[data-mobile-wizard="true"] .wz-field,
  body[data-mobile-wizard="true"] .wz-pkg,
  body[data-mobile-wizard="true"] .wz-tile,
  body[data-mobile-wizard="true"] .wz-style,
  body[data-mobile-wizard="true"] .wz-acard,
  body[data-mobile-wizard="true"] .wz-sacard,
  body[data-mobile-wizard="true"] .wz-qopt,
  body[data-mobile-wizard="true"] .wz-nxt,
  body[data-mobile-wizard="true"] .wz-sum { width: 100% !important; max-width: 100% !important; }
  body[data-mobile-wizard="true"] .wz-summary .wz-sum { grid-column: auto !important; }
  body[data-mobile-wizard="true"] .wz-thumb .rm,
  body[data-mobile-wizard="true"] .wz-style-pick,
  body[data-mobile-wizard="true"] .wz-sum-edit { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  body[data-mobile-wizard="true"] input,
  body[data-mobile-wizard="true"] textarea,
  body[data-mobile-wizard="true"] select { min-height: 46px; font-size: 16px !important; }
  body[data-mobile-wizard="true"] textarea { min-height: 112px; }
  body[data-mobile-wizard="true"] .wz-foot {
    position: relative !important;
    inset: auto !important;
    min-height: 70px !important;
    height: auto !important;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom)) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #fff !important;
    border-top: 1px solid rgba(107,83,145,.12);
  }
  body[data-mobile-wizard="true"] .wz-foot.is-complete { display: none !important; }
  body[data-mobile-wizard="true"] .wz-foot > .wz-foot-btns:first-child,
  body[data-mobile-wizard="true"] .wz-foot > #wzReset,
  body[data-mobile-wizard="true"] .wz-foot > #wzCancel,
  body[data-mobile-wizard="true"] .wz-foot-note { display: none !important; }
  body[data-mobile-wizard="true"] .wz-foot > .wz-foot-btns:last-child {
    margin: 0 !important;
    width: 100%;
    display: grid !important;
    grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
    gap: 8px;
  }
  body[data-mobile-wizard="true"] .wz-btn,
  body[data-mobile-wizard="true"] .wz-btn-text,
  body[data-mobile-wizard="true"] .wz-more,
  body[data-mobile-wizard="true"] .wz-datebtn,
  body[data-mobile-wizard="true"] .wz-cal button { min-height: 44px !important; }
  body[data-mobile-wizard="true"] #wzNext { width: 100% !important; min-height: 48px !important; }
  body[data-mobile-wizard="true"] #wzBack { min-height: 48px !important; }
  body[data-mobile-wizard="true"] .wz-mobile-send {
    width: 100%;
    min-height: 48px;
    padding: 0 18px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(120deg,#8b5cf6,#e879a8);
    color: #fff;
    font: 650 15px/1 Inter, sans-serif;
  }
  body[data-mobile-wizard="true"] .wz-mobile-send[hidden],
  body[data-mobile-wizard="true"] .wz-foot.has-mobile-send #wzNext { display: none !important; }
  body[data-mobile-wizard="true"] .wz-errside-x { width: 44px !important; height: 44px !important; }
  body[data-mobile-wizard="true"] .wz-skip { min-height: 44px !important; }
  body[data-mobile-wizard="true"] .wz-badge { display: none !important; }
  body[data-mobile-wizard="true"] .wz-mobile-quote[hidden] { display: none !important; }
  body[data-mobile-wizard="true"] .wz-panel {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: min(70dvh, 560px) !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }
  body[data-mobile-wizard="true"] .wz-panel-h { min-height: 52px !important; }
  body[data-mobile-wizard="true"] .wz-panel-x { width: 44px !important; height: 44px !important; }
  body[data-mobile-wizard="true"] .wz-pop,
  body[data-mobile-wizard="true"] .wz-cal {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
  body[data-mobile-wizard="true"] .wz-cal-d,
  body[data-mobile-wizard="true"] .wz-cal-nav button { min-width: 40px; min-height: 40px !important; }
  body[data-mobile-wizard="true"] .wz-dlg-back,
  body[data-mobile-wizard="true"] .wz-panel-back { height: 100dvh !important; padding: 12px !important; }
  body[data-mobile-wizard="true"] .wz-dlg {
    width: 100% !important;
    max-width: none !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 359px) {
  .footer-grid { grid-template-columns: 1fr !important; }
  .aflow-tabs { grid-template-columns: 1fr !important; }
  body[data-mobile-wizard="true"] .wz-foot > .wz-foot-btns:last-child { grid-template-columns: 84px minmax(0, 1fr); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal,
  .reveal--item,
  .why-reveal,
  [class*="reveal"],
  .ch-fade,
  .wd-hero-h1,
  .wd-hero-sub,
  .wd-hero-ctas {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}

/* Små telefoner (≈320–374px): samma överblick, en aning tätare, så att
   analysrutan och prisspåren ryms i vyn även på en SE. */
@media (max-width: 374px) {
  body[data-mobile-page="seo"] .seo-panel { padding: 20px 16px 18px !important; }
  body[data-mobile-page="seo"] .seo-scan-h { font-size: 1.375rem !important; margin-bottom: 8px !important; }
  body[data-mobile-page="seo"] .seo-scan-p { font-size: .8125rem !important; line-height: 1.55 !important; margin-bottom: 12px !important; }
  body[data-mobile-page="seo"] .seo-scan-pts { gap: 6px !important; margin-bottom: 13px !important; }
  body[data-mobile-page="seo"] .seo-scan-pts li { font-size: .75rem !important; }
  body[data-mobile-page="seo"] .seo-consent span { font-size: .71875rem !important; }
  body[data-mobile-page="seo"] .seo-proof-t { font-size: .75rem !important; }
  body[data-mobile-page="seo"] .zaai-rail > * { flex-basis: 90%; }
  body[data-mobile-page="seo"] .wd-pcard-list li,
  body[data-mobile-page="seo"] .wd-pcard-for { font-size: .75rem !important; }
}