@media (max-width: 720px) {
  html {
    scroll-padding-top: 68px;
  }

  body {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 82% 8%, rgba(var(--page-a), .7), transparent 72vw),
      radial-gradient(circle at 12% 36%, rgba(var(--page-b), .5), transparent 82vw),
      var(--paper);
  }

  .site-header {
    min-height: 64px;
    grid-template-columns: 1fr auto;
    padding: 0 20px;
    transition: box-shadow .2s ease, background-color .2s ease;
  }

  body.is-mobile-scrolled .site-header {
    background: rgba(255, 253, 249, .98);
    box-shadow: 0 12px 28px rgba(7, 10, 16, .08);
  }

  .brand-link .brand-lockup {
    --brand-type-size: 16px;
    gap: 7px;
  }

  .header-actions {
    gap: 6px;
  }

  .language-switch {
    gap: 2px;
    padding: 2px;
  }

  .language-switch a {
    min-width: 28px;
    height: 25px;
    padding: 0 5px;
    font-size: 10px;
  }

  .mobile-drawer {
    width: min(88vw, 380px);
    padding: 22px 26px 34px;
  }

  .mobile-drawer .brand-lockup {
    --brand-type-size: 23px;
    margin: 16px 0 34px;
  }

  .hub-hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    gap: 30px;
    padding: 46px 20px 34px;
  }

  h1 {
    font-size: clamp(50px, 15.5vw, 74px);
  }

  h2 {
    font-size: clamp(40px, 11.5vw, 58px);
  }

  h3 {
    font-size: clamp(30px, 10vw, 48px);
  }

  .hub-copy p:not(.eyebrow),
  .section-head p,
  .feature-copy p,
  .contact-hero p {
    font-size: 17px;
  }

  .actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .button {
    min-height: 52px;
    padding: 0 14px;
    font-size: 15px;
  }

  .hub-stage {
    width: 100%;
    min-height: 430px;
    border-radius: 8px;
    isolation: isolate;
    background:
      radial-gradient(circle at calc(74% - var(--mobile-progress, .3) * 18%) 20%, rgba(255, 195, 86, .34), transparent 34%),
      radial-gradient(circle at calc(18% + var(--mobile-progress, .3) * 18%) 78%, rgba(0, 137, 127, .2), transparent 42%),
      linear-gradient(135deg, #edf5ff, #f8f0e4);
  }

  .tablet-frame {
    padding: 8px;
    border-radius: 20px;
  }

  .tablet-frame img {
    border-radius: 12px;
  }

  .phone-frame {
    padding: 7px;
    border-radius: 28px;
  }

  .phone-frame img {
    border-radius: 21px;
  }

  .hero-tablet {
    left: 7%;
    top: 9%;
    width: 86%;
    height: 40%;
    transform: translateY(calc((1 - var(--mobile-progress, .3)) * 14px));
  }

  .hero-phone-left,
  .hero-phone-right {
    width: 34%;
    height: 50%;
  }

  .hero-phone-left {
    left: 6%;
    bottom: 8%;
    transform: translateX(calc((1 - var(--mobile-progress, .3)) * -12px)) rotate(calc(-4deg - var(--mobile-progress, .3) * 4deg));
  }

  .hero-phone-right {
    right: 6%;
    bottom: 8%;
    transform: translateX(calc((1 - var(--mobile-progress, .3)) * 12px)) rotate(calc(3deg + var(--mobile-progress, .3) * 3deg));
  }

  .hero-cast {
    left: 11%;
    right: 11%;
    bottom: 2%;
    height: 43%;
  }

  .hero-cast-character.is-maddy { width: 39%; left: -8%; }
  .hero-cast-character.is-yare { width: 33%; left: 13%; }
  .hero-cast-character.is-tabimu { width: 36%; left: 32%; }
  .hero-cast-character.is-bbeddagi { width: 30%; right: 12%; }
  .hero-cast-character.is-sundeck { width: 38%; right: -8%; }

  .hero-cast-character.is-maddy,
  .hero-cast-character.is-yare,
  .hero-cast-character.is-tabimu,
  .hero-cast-character.is-bbeddagi,
  .hero-cast-character.is-sundeck {
    transform: translateY(calc((1 - var(--mobile-progress, .3)) * 16px));
  }

  .hub-strip {
    grid-template-columns: 1fr;
  }

  .hub-strip article {
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .section-block,
  .creative-section,
  .contact-hero {
    padding: 54px 20px;
  }

  .section-head {
    display: block;
    margin-bottom: 24px;
    padding-bottom: 22px;
  }

  .section-head p:not(.eyebrow) {
    margin-top: 18px;
  }

  .feature-stack {
    gap: 16px;
  }

  .feature-service,
  .feature-service:nth-child(even) {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 22px;
    padding: 22px;
    background:
      radial-gradient(circle at calc(82% - var(--mobile-progress, .2) * 18%) 8%, rgba(var(--service-rgb), .17), transparent 32%),
      radial-gradient(circle at 12% 92%, rgba(var(--service-rgb-2), .55), transparent 36%),
      rgba(255,255,255,.86);
  }

  .feature-service:nth-child(even) .feature-copy,
  .feature-service:nth-child(even) .device-scene {
    order: initial;
  }

  .feature-copy {
    width: 100%;
  }

  .feature-copy h3 {
    margin-bottom: 14px;
  }

  .mini-pills {
    margin: 18px 0 14px;
  }

  .service-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 7px;
    margin-top: 20px;
  }

  .store-badge {
    height: 43px;
    gap: 5px;
    padding: 0 6px;
    border-radius: 7px;
  }

  .store-badge > svg {
    width: 17px;
    height: 17px;
    flex-basis: 17px;
  }

  .app-store-badge > svg {
    width: 15px;
    height: 20px;
    flex-basis: 15px;
  }

  .store-badge small {
    font-size: 5px;
    letter-spacing: 0;
  }

  .store-badge strong {
    font-size: 10px;
    letter-spacing: 0;
  }

  .device-scene {
    width: 100%;
    min-height: 410px;
    border-radius: 8px;
    isolation: isolate;
    background:
      radial-gradient(circle at calc(78% - var(--mobile-progress, .2) * 16%) 18%, rgba(var(--service-rgb), .2), transparent 32%),
      radial-gradient(circle at 10% calc(82% - var(--mobile-progress, .2) * 12%), rgba(var(--service-rgb-2), .75), transparent 38%),
      linear-gradient(135deg, #eef7ff, #fbf3e7);
  }

  .device-scene.tablet-phone .tablet-frame {
    left: 7%;
    top: 8%;
    width: 86%;
    height: 39%;
    transform: translateY(calc((1 - var(--mobile-progress, .2)) * 12px));
  }

  .device-scene.tablet-phone .phone-frame {
    right: 10%;
    bottom: 8%;
    width: 32%;
    height: 48%;
    transform: translateX(calc((1 - var(--mobile-progress, .2)) * 14px)) translateY(calc((1 - var(--mobile-progress, .2)) * 16px));
  }

  .device-scene.phone-pair .phone-frame {
    top: 12%;
    width: 38%;
    height: 72%;
  }

  .device-scene.phone-pair .tilted-left {
    left: 13%;
    transform: translateX(calc((1 - var(--mobile-progress, .2)) * -18px)) rotate(calc(-3deg - var(--mobile-progress, .2) * 5deg));
  }

  .device-scene.phone-pair .tilted-right {
    right: 13%;
    transform: translateX(calc((1 - var(--mobile-progress, .2)) * 18px)) rotate(calc(3deg + var(--mobile-progress, .2) * 5deg));
  }

  .device-scene.phone-character .solo {
    left: 12%;
    top: 11%;
    width: 38%;
    height: 74%;
    transform: translateX(calc((1 - var(--mobile-progress, .2)) * -12px));
  }

  .service-character {
    right: 10%;
    bottom: 10%;
    width: 35%;
    transform: translateX(calc((1 - var(--mobile-progress, .2)) * 16px)) translateY(calc((1 - var(--mobile-progress, .2)) * 12px));
  }

  .lineup-block {
    display: block;
    margin-top: 42px;
    padding: 22px;
  }

  .lineup-grid {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }

  .lineup-grid article {
    min-width: 250px;
    display: block;
    transform: none;
    scroll-snap-align: start;
  }

  .lineup-grid article.is-lead,
  .lineup-grid article:nth-child(3),
  .lineup-grid article:nth-child(4),
  .lineup-grid article:nth-child(5) {
    grid-column: auto;
    grid-row: auto;
    display: block;
    padding: 16px;
  }

  .lineup-image {
    min-height: 180px;
  }

  .lineup-grid article.is-lead .lineup-image,
  .lineup-grid article:nth-child(3) .lineup-image,
  .lineup-grid article:nth-child(4) .lineup-image,
  .lineup-grid article:nth-child(5) .lineup-image {
    min-height: 180px;
    margin-bottom: 16px;
  }

  .lineup-grid article.is-lead .lineup-image img,
  .lineup-grid article:nth-child(3) .lineup-image img,
  .lineup-grid article:nth-child(4) .lineup-image img,
  .lineup-grid article:nth-child(5) .lineup-image img {
    max-height: 170px;
  }

  .lineup-grid article.is-lead h3,
  .lineup-grid article:nth-child(3) h3 {
    font-size: 22px;
  }

  .lineup-grid .service-links.is-icon-only {
    display: flex;
    grid-template-columns: none;
  }

  @media (max-width: 360px) {
    .service-links {
      gap: 6px;
    }

    .store-badge {
      height: 40px;
      gap: 4px;
      padding: 0 4px;
      border-radius: 6px;
    }

    .store-badge > svg {
      width: 14px;
      height: 14px;
      flex-basis: 14px;
    }

    .app-store-badge > svg {
      width: 12px;
      height: 16px;
      flex-basis: 12px;
    }

    .store-badge small {
      font-size: 4px;
    }

    .store-badge strong {
      font-size: 8px;
    }
  }

  .creative-section .section-head {
    display: block;
  }

  .creative-grid {
    grid-template-columns: 1fr;
  }

  .creative-card {
    min-height: 0;
  }

  .creative-visual {
    height: 230px;
  }

  .creative-visual img {
    transform: scale(calc(1.025 - var(--mobile-progress, .5) * .02));
  }

  .creative-visual.is-stickers {
    height: 270px;
  }

  .creative-card .creative-visual.is-stickers {
    padding: 0;
  }

  .creative-visual.is-stickers .sticker-character.is-maddy { width: 38%; left: -7%; }
  .creative-visual.is-stickers .sticker-character.is-yare { width: 32%; left: 13%; }
  .creative-visual.is-stickers .sticker-character.is-tabimu { width: 35%; left: 33%; }
  .creative-visual.is-stickers .sticker-character.is-bbeddagi { width: 29%; right: 13%; }
  .creative-visual.is-stickers .sticker-character.is-sundeck { width: 37%; right: -8%; }

  .sticker-stage-title {
    top: 7%;
    right: 5%;
    font-size: 27px;
  }

  .creative-section {
    background:
      radial-gradient(circle at 24% 8%, rgba(42,245,224,.16), transparent 48%),
      radial-gradient(circle at 92% 66%, rgba(255,82,130,.12), transparent 42%),
      var(--dark);
  }

  .contact-hero {
    min-height: 70vh;
  }

  .contact-hero > .brand-lockup {
    --brand-type-size: clamp(24px, 7vw, 32px);
    gap: 10px;
    max-width: 92vw;
  }

  .contact-hero .actions {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 320px;
  }

  .site-footer {
    display: grid;
    padding: 28px 20px;
  }

  .site-footer .brand-lockup {
    --brand-type-size: 18px;
  }

  .mobile-motion-ready [data-reveal] {
    transition-duration: .42s;
  }
}