/* Responsive base of the tinyApps static pages (from the PinApp page, MOBILE_CSS of its build, 2026-10-23): the desktop layout is untouched from 1101px,
   from 1100px down the page is one column (tablet), from 700px down it is the phone. The generic rules only: what belongs to one product (the cards and
   the feature list of PinApp, its field, its footer) stays in that product. Needs `<meta name="viewport" content="width=device-width, initial-scale=1">`
   and no `min-width` on the body. The footer has its own responsive rules (templates/footer). */
@media (max-width: 1100px) {
  body { min-width: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  a, button, .ui-tab, .skin-sw, .lang { touch-action: manipulation; }
  html, body { overflow-x: hidden; }
  @supports (overflow: clip) { html, body { overflow-x: clip; } }
  .ptr, .dock { display: none !important; }
  .hero { min-height: 0; height: auto; padding: var(--hero-top, 112px) 20px 28px; }
  .hero .h1 { font-size: clamp(34px, 6.6vw, 56px); line-height: 1.04; }
  .hero .lead { font-size: clamp(16px, 2.3vw, 20px); max-width: 34em; margin-top: 18px; }
  .hero .cta-row { margin-top: 26px; }
  .below { height: 24px; }
  .how { padding-bottom: 72px; }
  .how > .col { grid-template-columns: minmax(0, 1fr); padding: 0 32px; max-width: 760px; margin: 0 auto; }
  .how > .col > .pin { grid-column: 1; grid-row: auto; order: 9; margin: 40px 0 0; text-align: left; }
  .pin-stick { position: static; }
  .pin .badge-row { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
  .pin .terms { justify-content: flex-start; }
  .steps { gap: 40px; max-width: none; }
  .step { grid-template-columns: 120px 1fr; }
  .step-n { font-size: 84px; padding-right: 16px; }
  .step-t { font-size: clamp(26px, 4.4vw, 40px); }
  .step-x { font-size: 17px; }
  .step-4 { grid-template-columns: 1fr; }
  .step-n.step-price { justify-self: start; width: auto; margin: 0 0 14px; padding: 8px 22px 10px; font-size: 32px; }
  /* a finger needs 44 px: the small marks get a larger touch area */
  .mb-brand { position: relative; }
  .mb-brand::after, .mib::after { content: ""; position: absolute; inset: -14px -10px; }
  .lang-menu { right: 0; }
}
@media (max-width: 700px) {
  .how > .col { padding: 0 20px; }
  .step { grid-template-columns: 1fr; }
  .step-n { text-align: left; padding: 0; font-size: 64px; margin-bottom: 6px; }
  .step-t { font-size: 28px; }
  .step-x { margin-top: 8px; font-size: 16px; }
}