.mobile-rail { display: none; }

@media (max-width: 600px) {
  #left-side {
    padding-top: 142px;
    padding-bottom: 120px;
    overflow: clip;
  }

  /* The background edge and both button cuts share the same line. */
  .global-overlay { left: -100%; }
  .overlay {
    left: 0;
    width: 200%;
    transform-origin: top right;
    transform: translateX(calc(var(--rail-top-x, 130vw) - 100%)) skewX(0deg);
    transition: transform var(--diagonal-duration) var(--ease), background var(--diagonal-duration) var(--ease);
    border-right-color: rgba(193, 217, 249, .38);
  }
  /* Keep the original edge and motion on the compositor, without layout shifts. */
  .overlay.skew-part { transform: translateX(calc(var(--rail-top-x, 130vw) - 100%)) skewX(var(--diagonal-angle)); }
  .is-panel-open .overlay { left: 0; transform: translateX(-100vw) skewX(0deg); }

  .mobile-rail {
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
    clip-path: polygon(0 0, var(--rail-top-x, 130vw) 0, var(--rail-bottom-x, 10vw) 100%, 0 100%);
    background: linear-gradient(145deg, rgba(103, 143, 192, .13), rgba(18, 40, 67, .51));
    backdrop-filter: blur(9px) saturate(.8);
    -webkit-backdrop-filter: blur(9px) saturate(.8);
  }

  .hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: none;
  }
  .hero-content > .short-rule { margin: 20px 0; }
  .hero-content h1 {
    max-width: calc(52vw + 28px);
    font-size: 26px;
  }
  .hero-note {
    order: 1;
    max-width: calc(52vw - 16px);
    margin-top: 20px;
  }

  .hero-actions {
    order: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: var(--rail-width, 100vw);
    max-width: none;
    margin: 38px 0 0 calc(-1 * var(--edge));
    align-items: flex-start;
  }
  .hero-actions .button {
    flex: none;
    width: var(--rail-button-width, 72vw);
    height: 76px;
    min-height: 0;
    padding: 12px calc(var(--rail-cut, 48px) + 44px) 12px var(--edge);
    border: 0;
    border-top: 1px solid rgba(211, 230, 255, .43);
    border-bottom: 1px solid rgba(211, 230, 255, .24);
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--rail-cut, 48px)) 100%, 0 100%);
    font-size: 12px;
    line-height: 1.5;
    justify-content: flex-start;
    text-align: left;
    white-space: normal;
    transform: none;
    transition: background .2s, box-shadow .2s;
    box-shadow: none;
    backdrop-filter: none;
  }
  .hero-actions .button-primary {
    background: var(--accent-fill);
  }
  .hero-actions .button-glass {
    height: 62px;
    padding-right: calc(var(--rail-cut, 39px) + 14px);
    background: linear-gradient(105deg, rgb(var(--blue-rgb) / .23), rgba(18, 44, 82, .52));
  }
  .hero-actions .button:hover {
    transform: none;
    background: rgb(var(--blue-rgb) / .36);
  }
  .hero-actions .button:active {
    background: rgb(var(--blue-rgb) / .5);
  }
  .hero-actions .button-primary:hover { background: var(--accent-hover); }
  .hero-actions .button-primary:active { background: var(--blue-deep); }
  .hero-actions .button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px #e1eeff;
  }
  .hero-actions .button .icon {
    display: block;
    right: calc(var(--rail-cut, 48px) + 16px);
    width: 16px;
  }
  .site-footer { max-width: var(--rail-footer-width, 120px); }
  .site-footer .copyright { display: block; line-height: 1.5; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .overlay { transition: none; }
}

@media (max-width: 370px) {
  .hero-content h1 { font-size: 24px; }
}