/* =========================================================
   EntryLap V20 — mobile polish and compact storytelling layer
   Loaded after V19. Desktop remains unchanged.
   ========================================================= */
@media (max-width: 580px) {
  .hero-copy .hero-microcopy span {
      font-size: 12px !important;
  }
  #main .hero-copy h1.reveal-lines.is-line-visible {
      font-size: clamp(22px, 7.9vw, 25px) !important;
  }
  .hero-copy {
    max-width: 100% !important;
  }
  .story-visual .priority-queue li:last-child {
      border-bottom: 0px solid rgba(255,255,255,.18);
  }
  h2.reveal-lines.is-line-visible {
    display: none;
  }
  .hero-ai-badge {
      min-height: 29px !important;
      padding: 3px 11px 3px 11px !important;
      gap: 4px !important;
      font-size: 12px !important;
  }
}

@media (max-width: 820px) {
  :root {
    --v20-edge: 12px;
    --v20-section: 20px;
    --v20-card-gap: 10px;
    --v20-ink: #111827;
    --v20-muted: #647087;
    --v20-line: #e4ddda;
    --v20-red: #ef4e44;
    --v20-dark: #111a2b;
    --v20-dark-card: #1a263a;
  }

  html {
    scroll-padding-top: 66px;
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-size: 14px !important;
    line-height: 1.55;
    overflow-x: clip;
  }

  main,
  section,
  article,
  div,
  header,
  footer {
    min-width: 0;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  small,
  b,
  strong,
  span {
    overflow-wrap: anywhere;
  }

  /* Consistent compact type scale across all marketing pages */
  .section,
  .story-section,
  .impact-section,
  .shopify-section,
  .pricing-section,
  .trust-section,
  .faq-section,
  .module-section,
  .final-cta {
    padding-top: var(--v20-section) !important;
    padding-bottom: var(--v20-section) !important;
  }

  .section-heading h2,
  .story-intro h2,
  .impact-head h2,
  .shopify-copy h2,
  .pricing-intro h2,
  .trust-copy h2,
  .final-cta h2,
  .section-title-row h2,
  .product-section-head h2,
  .bot-section-copy h2,
  .pi-section-heading h2,
  .product-page h2,
  .purchase-page h2,
  .bot-page h2,
  .signals-page h2 {
    margin: 0px 0 2px !important;
        font-size: clamp(18px, 6.7vw, 19px) !important;
    line-height: 1.1 !important;
    text-wrap: balance;
  }

  .section-heading p,
  .story-intro p,
  .impact-head p,
  .shopify-copy > p,
  .pricing-intro p,
  .trust-copy p,
  .final-cta p,
  .product-section-head p,
  .bot-section-copy p,
  .pi-section-heading p {
    font-size: 13.25px !important;
    line-height: 1.55 !important;
  }

  .section-kicker,
  .story-copy > span,
  .visual-label,
  .module-title > span,
  .product-kicker,
  .pi-kicker,
  .bot-kicker {
    font-size:10px !important;
    line-height: 1.2 !important;
    
  }

  .value-card h3,
  .benefit-card h3,
  .module-card h3,
  .trust-grid h3,
  .product-slide h3,
  .pi-slide h3,
  .hero-signal-slide h3,
  .signal-slide h3
  .shopify-preview-body h3 {
    font-size: 13.8px !important;
    line-height: 1.22 !important;
  }
 .faq-list summary {
    font-size: 12.8px !important;
    line-height: 1.22 !important;
}

  .value-card p,
  .benefit-card p,
  .module-card p,
  .trust-grid p,
  .product-slide p,
  .pi-slide p,
  .hero-signal-slide p,
  .signal-slide p,
  .faq-list p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  /* Hero remains concise and visually balanced */
  .hero {
    padding-top: 26px !important;
  }

  .hero h1 {
    margin: 13px auto 10px !important;
    font-size: clamp(27px, 7.9vw, 28px) !important;
    line-height: 1.07 !important;
    
  }

  .hero-lead {
    max-width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    font-size: 13.25px !important;
    line-height: 1.52 !important;
  }
.hero-actions {
    gap: 8px !important;
    margin-top: 15px !important;
    display: grid;
    grid-template-columns: 1fr 1fr !important;
    width: calc(100% + 10px) !important;
    margin-left: -5px !important;
}

  .hero-actions .button {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  .hero-microcopy {
    gap: 6px 9px !important;
    margin-top: 12px !important;
  }

  .hero-microcopy span {
    font-size: 12.5px !important;
  }

  .hero-outcomes article,
  .value-card,
  .benefit-card,
  .module-card,
  .trust-grid article,
  .impact-metrics article {
    padding: 12px !important;
  }

  /* Story area: purpose-built mobile layout, no desktop absolute collisions */
  .story-section {
    padding-left: var(--v20-edge) !important;
    padding-right: var(--v20-edge) !important;
    background:
      linear-gradient(135deg, rgba(239,78,68,.04), transparent 28%),
      #0f192a !important;
  }

  .story-intro {
    margin-bottom: 17px !important;
  }


  .story-layout {
    display: block !important;
  }

  .story-nav {
    width: calc(100% + var(--v20-edge)) !important;
    margin: 0 calc(var(--v20-edge) * -1) 14px 0 !important;
    padding: 0 var(--v20-edge) 3px 0 !important;
    gap: 6px !important;
    scroll-snap-type: x mandatory !important;
    overscroll-behavior-inline: contain;
  }

  .story-nav button {
    flex: 0 0 122px !important;
    min-height: 48px !important;
    grid-template-columns: 20px 1fr !important;
    gap: 1px 6px !important;
    padding: 8px !important;
    border-color: rgba(255,255,255,.13) !important;
    background: rgba(255,255,255,.025) !important;
  }

  .story-nav button > span {
    font-size: 12px !important;
  }

.story-nav b {
    font-size: 12.8px !important;
    line-height: 1.15 !important;
    white-space: nowrap;
}

  .story-nav small {
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  .story-nav button.is-active {
    border-color: rgba(255,129,120,.75) !important;
    background: linear-gradient(135deg, rgba(239,78,68,.13), rgba(239,78,68,.035)) !important;
  }

  .story-panel,
  .story-panel.is-active {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
  }

  .story-panel.is-active {
    animation: v20StoryPanelIn .42s cubic-bezier(.2,.78,.2,1) both !important;
  }

  .story-copy {
    padding: 0 !important;
  }

  .story-copy > span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-bottom: 2px;
  }

.story-copy h3 {
    margin: 4px 0 7px !important;
    font-size: clamp(18px, 6.1vw, 20px) !important;
    line-height: 1.08 !important;
    
    text-wrap: balance;
}

  .story-copy p {
    margin: 0 !important;
    font-size: 12.8px !important;
    line-height: 1.54 !important;
  }

  .story-copy ul {
    width: calc(100% + var(--v20-edge)) !important;
    margin: 11px calc(var(--v20-edge) * -1) 0 0 !important;
    padding-right: var(--v20-edge) !important;
    gap: 6px !important;
  }

  .story-copy li {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 6px 9px !important;
    font-size: 12.8px !important;
    white-space: nowrap;
  }

  .story-visual,
  .visual-verify,
  .visual-prioritize,
  .visual-activate,
  .visual-diagnose {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
    border-color: rgba(255,255,255,.19) !important;
    background:
      radial-gradient(circle at 75% 15%, rgba(175,96,210,.12), transparent 38%),
      linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.012)),
      #182438 !important;
    overflow: hidden !important;
  }

  .story-visual::before {
    width: 360px !important;
    height: 360px !important;
    opacity: .7;
  }

.visual-head {
    position: relative;
    min-height: 0 !important;
    padding-bottom: 0px !important;
    border-bottom: 0px solid rgba(255,255,255,.1) !important;
    z-index: 3;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}

  .visual-head h4 {
    max-width: 290px !important;
    margin-top: 4px !important;
    font-size:13px !important;
    line-height: 1.18 !important;
    
  }

  .visual-status {
    display: none !important;
  }

  /* Diagnose: convert map to four compact evidence cards */
  .cause-map {
    position: relative !important;
    inset: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .cause-map > i {
    display: none !important;
  }

  .cause {
    position: relative !important;
    inset: auto !important;
    min-height: 65px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 10px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    background: rgba(255,255,255,.025) !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
    transform: none !important;
  }

  .cause b {
    margin-top: 7px;
    font-size: 15px !important;
  }

  .cause-result {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1;
    min-height: 60px;
    padding: 10px !important;
    border: 1px solid rgba(88,199,141,.45) !important;
    background: rgba(49,152,102,.1) !important;
    transform: none !important;
  }

  .cause-result small {
    font-size: 12px !important;
  }

  .cause-result strong {
    margin-top: 5px;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  /* Verify: ring and evidence list become normal-flow components */
  .visual-verify {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .verify-ring {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 142px !important;
    height: 142px !important;
    margin: 2px auto 12px !important;
    transform: none !important;
  }

  .verify-ring::before {
    inset: 15px !important;
  }

  .verify-ring::after {
    inset: 31px !important;
  }

  .verify-ring span {
    font-size: 50px !important;
  }

  .verify-ring small {
    font-size: 12px !important;
  }

  .verify-list {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    margin: 0 !important;
  }

  .verify-list span {
    min-width: 0 !important;
    padding: 9px 7px !important;
    border-right: 1px solid rgba(255,255,255,.14) !important;
    border-bottom: 0 !important;
  }

  .verify-list span:last-child {
    border-right: 0 !important;
  }

  .verify-list b {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .verify-list em {
    margin-top: 5px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  /* Prioritize: compact queue, values stay aligned to the right */
  .priority-queue {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin-top: 4px !important;
  }

  .priority-queue li {
    grid-template-columns: 24px minmax(0,1fr) auto !important;
    gap: 8px !important;
    min-height: 72px !important;
    padding: 5px 0 !important;
  }

  .priority-queue > li > span {
    font-size: 12px !important;
  }

  .priority-queue b {
    font-size: 13px !important;
    line-height: 1.2 !important;
  }

  .priority-queue small {
    margin-top: 3px !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .priority-queue strong {
    align-self: center;
    font-size: 20px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }

  /* Activate: 2x2 workflow instead of squeezed four-column desktop row */
  .visual-activate {
    min-height: 0 !important;
  }

  .action-pipeline {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  .action-pipeline > i {
    display: none !important;
  }

  .action-pipeline span {
    min-height: 92px !important;
    padding: 11px !important;
    justify-content: flex-start !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .action-pipeline span b {
    width: 27px !important;
    height: 27px !important;
    margin-bottom: 10px !important;
    font-size: 12px !important;
  }

  .visual-activate > button,.visual-activate > .story-action-link {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    min-height: 40px !important;
    margin-top: 9px !important;
    padding: 9px 11px !important;
    font-size: 12px !important;
  }

  /* Impact and other data visuals */
  .impact-visual {
    min-height: 305px !important;
    padding: 18px !important;
  }

  .impact-primary {
    left: 18px !important;
    right: 18px !important;
    top: 74px !important;
  }

  .impact-primary span,
  .impact-primary strong {
    font-size: clamp(42px, 13vw, 58px) !important;
  }

  .impact-bars {
    left: 18px !important;
    right: 18px !important;
    bottom: 22px !important;
  }

  .impact-metrics b {
    font-size: 18px !important;
    line-height: 1.08 !important;
  }

  /* Shopify, pricing and trust cards */
  .shopify-card,
  .price-card {
    gap: 15px !important;
  }

  .shopify-copy,
  .price-card-main{
    padding: 15px !important;
  }
  .shopify-preview {
      padding: 0px !important;
      background: none;
  }

  .shopify-steps {
    gap: 1px !important;
  }

  .shopify-steps > div {
    min-height: 39px !important;
        padding: 10px 0px !important;
  }

  .shopify-steps b {
    font-size: 12px !important;
  }

  .shopify-steps small {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .price-card h3 b {
    font-size: 50px !important;
  }

.price-features span {
    min-height: 54px !important;
    padding: 10px 18px !important;
    font-size: 12.5px !important;
    grid-template-columns: 20px auto;
    display: grid;
    align-items: center;
}

  .faq-list details {
    padding: 0 !important;
  }

  .faq-list summary {
    min-height: 39px !important;
    padding: 10px 0 !important;
}

  .faq-list details p {
    padding: 0 0 12px !important;
  }

  /* Subpage universal mobile typography */
  .product-hero h1,
  .pi-hero h1,
  .bot-hero h1,
  .signals-hero h1,
  .page-hero h1 {
    font-size: clamp(27px, 7.6vw, 32px) !important;
    line-height: 1.08 !important;
    
  }

  .product-hero p,
  .pi-hero p,
  .bot-hero p,
  .signals-hero p,
  .page-hero p {
    font-size: 13px !important;
    line-height: 1.52 !important;
  }

  .product-mini-grid h3,
  .pi-feature-grid h3,
  .pi-usecase-grid h3,
  .bot-signal-grid h3,
  .bot-explain-grid h3,
  .flow-grid h3,
  .definition-grid h3,
  .setup-guides h3,
  .proof-case-grid h3,
  .proof-difference-grid h3,
  .tech-stack-grid h3,
  .compliance-grid h3,
  .resource-grid h3,
  .contact-route-grid h3 {
    font-size: 17px !important;
    line-height: 1.22 !important;
  }

  /* AI workspace mobile: readable but not oversized */
  .el-ai-intro h2 {
    font-size: clamp(23px, 6.4vw, 28px) !important;
    line-height: 1.1 !important;
  }

  .el-ai-answer-text,
  .el-ai-message-content,
  .el-ai-answer p,
  .el-ai-answer li {
    font-size: 13.5px !important;
    line-height: 1.58 !important;
  }

  .el-ai-suggestion,
  .el-ai-followup {
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  /* Motion remains subtle and avoids stacked hover behavior on touch */
  .story-visual,
  .value-card,
  .benefit-card,
  .module-card,
  .trust-grid article,
  .shopify-card,
  .price-card {
    transition: border-color .25s ease, background-color .25s ease !important;
  }

  [data-mobile-current="true"] {
    animation: v20CardFocus .28s cubic-bezier(.2,.78,.2,1) both !important;
  }
}

@media (max-width: 480px) {
  :root {
    --v20-edge: 12px;
    --v20-section: 20px;
  }

  .section-heading h2,
  .story-intro h2,
  .impact-head h2,
  .shopify-copy h2,
  .pricing-intro h2,
  .trust-copy h2,
  .final-cta h2,
  .section-title-row h2,
  .product-section-head h2,
  .bot-section-copy h2,
  .pi-section-heading h2 {
    font-size: clamp(16px, 6.5vw, 16px) !important;
    margin-top: 0px !important;
        margin-bottom: 0px !important;
  }

  .story-copy h3 {
    font-size: clamp(16px, 6.5vw, 16px) !important;
    margin-top: 0px !important;
        margin-bottom: 0px !important;
  }

  .story-nav button {
    flex-basis: 112px !important;
  }

  .verify-ring {
    width: 132px !important;
    height: 132px !important;
  }

  .verify-ring span {
    font-size: 46px !important;
  }

  .priority-queue li {
    grid-template-columns: 22px minmax(0,1fr) auto !important;
  }

  .priority-queue strong {
    font-size: 18px !important;
  }

  .action-pipeline span {
    min-height: 86px !important;
  }

  .impact-primary span,
  .impact-primary strong {
    font-size: clamp(38px, 12vw, 52px) !important;
  }

}

@media (hover: none) and (pointer: coarse) and (max-width: 820px) {
  .story-visual:hover,
  .value-card:hover,
  .benefit-card:hover,
  .module-card:hover,
  .trust-grid article:hover,
  .shopify-card:hover,
  .price-card:hover {
    transform: none !important;
    filter: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-panel.is-active,
  [data-mobile-current="true"] {
    animation: none !important;
  }
}

@keyframes v20StoryPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes v20CardFocus {
  from { opacity: .88; transform: translateY(2px); }
  to { opacity: 1; transform: none; }
}