/* This composition is exclusive to H5; tablet/desktop retain their existing artwork. */
.mobile-ending-lines {display:none;}
@media (max-width:699px) {
  #landing>.ending-use-cases {
    display:block;position:relative;order:7;width:calc(100% + 2 * var(--page-gutter));
    /* The artwork already has top breathing room; cancel the extra section gap. */
    margin:-80px calc(-1 * var(--page-gutter)) 0;padding:0;isolation:isolate;
  }
  #landing>.ending-use-cases>.choice-art {
    display:block;position:relative;width:100%;max-width:none;height:calc(35vw + 223px);
    margin:0;aspect-ratio:auto;overflow:hidden;container-type:inline-size;pointer-events:none;
  }
  .ending-use-cases .choice-art-canvas {
    position:absolute;left:0;top:0;width:1440px;height:1820px;
    /* Keep the rising/falling wave, with the right ring touching OpenAI. */
    transform:scale(calc(100cqw / 1000px)) translate(-70px,0);transform-origin:top left;
  }
  /* A shallow crest at Anthropic and a shallow trough at OpenAI form an S.
     Offsets move each complete silhouette and logo together, in artwork pixels. */
  .ending-use-cases .choice-bead[data-choice-bead="small"] {--mobile-x:0px;--mobile-y:-39.6165px;}
  .ending-use-cases .choice-bead[data-choice-bead="ollama"] {--mobile-x:-3.96486px;--mobile-y:-14.78213px;}
  .ending-use-cases .choice-bead[data-choice-bead="anthropic"] {--mobile-x:10.591px;--mobile-y:25.921px;}
  .ending-use-cases .choice-bead[data-choice-bead="deepseek"] {--mobile-x:10.89px;--mobile-y:61.5975px;}
  .ending-use-cases .choice-bead[data-choice-bead="gemini"] {--mobile-x:15.835px;--mobile-y:56.867px;}
  .ending-use-cases .choice-bead[data-choice-bead="openai"] {--mobile-x:19.9385px;--mobile-y:11.8045px;}
  .choice-motion-active .ending-use-cases .choice-bead {transform:translate(var(--mobile-x),var(--mobile-y));}
  .ending-use-cases .choice-finish-item[data-choice-finish="ring"] {transform:translate(-235.0615px,9.0145px);}
  .ending-use-cases .choice-finish-item[data-choice-finish="ornament"] {transform:translate(-258px,45px);}
  .ending-use-cases .choice-finish-item[data-choice-finish="links"] {display:none;}
  .ending-use-cases .choice-art-canvas>.ending-art {display:none;}
  #landing>.ending-use-cases .ending-intro,
  #landing>.ending-use-cases .ending-cases {
    position:relative;inset:auto;width:auto;max-width:none;margin:0 24px 0 48px;padding:0;
  }
  #landing>.ending-use-cases .ending-intro h2 {font-size:32px;line-height:1.15;margin:14px 0 20px;}
  #landing>.ending-use-cases .ending-intro>p:last-child,
  #landing>.ending-use-cases .ending-cases p {font-size:15px;line-height:1.7;}
  #landing>.ending-use-cases .ending-label {font-size:11px;letter-spacing:1.6px;}
  #landing>.ending-use-cases .ending-cases {display:grid;gap:31px;margin-top:31px;}
  #landing>.ending-use-cases .ending-cases article {min-height:0;padding:0;border:0;}
  #landing>.ending-use-cases .ending-cases h3 {font-size:22px;line-height:1.25;margin:0 0 12px;}
  .ending-use-cases>.mobile-ending-lines {
    display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;
  }
  .mobile-case-ring {opacity:0;transition:opacity 150ms ease;}
  .mobile-case-node.is-active .mobile-case-ring {opacity:1;}
  .mobile-case-node.is-active circle:first-child {fill:#d9d9d9;}
}
@media (prefers-reduced-motion:reduce) {.mobile-case-ring {transition:none;}}