/* Phone rails and polish (<=767px): swipeable articles, stage carousel, numbers, services, contact. Loaded after mobile.css. Phone only. */
.numbers__label-phone,
.stage__phone-meta,
.insights__dots { display: none; }

@media (max-width: 767px) {
  /* ---------- shared phone rhythm ---------- */
  main > section:is(.about, .services, .stage, .insights, .contact) {
    scroll-margin-top: calc(var(--phone-top-h, 0px) + 16px);
  }

  /* ---------- numbers: one compact app strip ---------- */
  .numbers { padding-block: 4px 10px; }
  .numbers__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-radius: 18px;
  }
  .numbers__item,
  .numbers__item:nth-child(n + 3) {
    min-width: 0;
    padding: 11px 8px 12px;
    gap: 5px;
    border-block-start: 0;
  }
  .numbers__item + .numbers__item { border-inline-start: 1px solid var(--bone-08); }
  .numbers__item--accent::before { inset-inline: 8px; }
  /* a quarter of a phone is ~85px: the drawing sits over the figure instead of beside it */
  .numbers__item dd {
    min-width: 0;
    min-height: 44px;
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 6px;
  }
  .numbers__val { font-size: clamp(1.42rem, 6vw, 1.65rem); }
  .numbers__item dt {
    min-width: 0;
    min-height: 1.35em;
    font-size: 11px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .numbers__label-full { display: none; }
  .numbers__label-phone { display: inline; }
  :lang(ar) .numbers__item dt { font-size: 11px; line-height: 1.45; }
  .viz--bars { height: 22px; gap: 3px; }
  .viz--bars i { width: 5px; }
  .viz--dots { grid-template-columns: repeat(4, 6px); gap: 4px; }
  .viz--dots i { width: 6px; height: 6px; }
  .viz--spark { width: 38px; height: 24px; }
  .viz--tiles { width: 34px; height: 25px; transform: scale(0.82); transform-origin: right bottom; }

  /* ---------- about: readable manifesto, calm inline photography ---------- */
  .about { padding-block: 58px 64px; }
  .about__manifesto {
    max-width: none;
    font-size: clamp(1.45rem, 6vw, 1.6rem);
    line-height: 1.6;
    text-wrap: pretty;
  }
  .about__manifesto .pill {
    width: 2.12em;
    height: 0.98em;
    margin-block: 0.12em;
    vertical-align: -0.08em;
  }
  :lang(ar) .about__manifesto {
    font-size: clamp(1.2rem, 5.4vw, 1.5rem);
    line-height: 1.75;
  }
  :lang(ar) .about__manifesto .pill {
    width: 2em;
    height: 0.92em;
    margin-block: 0.16em;
    vertical-align: -0.06em;
  }

  /* ---------- services: the system map above a touch accordion ---------- */
  /* Owner 2026-10-12: the map that walks the five services is part of the section on phones too. It sits
     under the intro and drives the list: the service it lights opens below; a tap on a dot or a row takes over. */
  .services { padding-block: 56px 48px; gap: 20px; }
  .services__head { display: contents; }
  .services .h2 { order: 1; }
  .services__intro { order: 2; max-width: 32rem; font-size: 15px; line-height: 1.65; }
  .svc-map { order: 3; width: min(100%, 318px); margin-block: 8px 4px; }
  .services__list { order: 4; margin-block-start: 4px; }
  .service__head {
    min-height: 54px;
    grid-template-columns: 30px minmax(0, 1fr) 18px;
    gap: 10px;
    padding-block: 12px;
  }
  .service__num { font-size: 10px; }
  .service__title { min-width: 0; font-size: 16px; line-height: 1.3; }
  .service__icon {
    width: 10px;
    height: 10px;
    border: 0;
    border-inline-end: 1.5px solid var(--steel);
    border-block-end: 1.5px solid var(--steel);
    border-radius: 0;
    transform: translateY(-2px) rotate(45deg);
    transition: border-color 0.3s var(--ease-ui), transform 0.3s var(--ease-ui);
  }
  .service.is-open .service__icon {
    background: none;
    border-color: var(--ember);
    box-shadow: none;
    transform: translateY(2px) rotate(225deg);
  }
  .service__body > p {
    padding-inline: 40px 20px;
    padding-block-end: 14px;
    font-size: 14px;
    line-height: 1.6;
  }
  :lang(ar) .service__title { font-size: 15px; line-height: 1.55; }
  :lang(ar) .service__body > p { padding-inline: 40px 12px; line-height: 1.75; }

  /* ---------- on stage: one 4:5 photo per swipe, then the reel ---------- */
  .stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-block: 56px 48px;
  }
  .stage__head { grid-column: 1; margin-block-end: 18px; }
  .stage__mosaic {
    grid-column: 1;
    display: flex;
    gap: 12px;
    width: calc(100% + (2 * var(--gutter)));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y; /* pan-x alone swallowed vertical swipes: the page stopped under the thumb (2026-10-05) */
  }
  .stage__mosaic::-webkit-scrollbar { display: none; }
  .stage__p,
  .stage__p--tall {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 70svh;
    grid-row: auto;
    scroll-snap-align: start;
    border-radius: 20px;
  }
  .stage__p img { position: absolute; inset: 0; object-fit: cover; }
  .stage__p--tall::after { background: linear-gradient(0deg, var(--ink-92) 0%, var(--ink-00) 46%); }
  .stage__cap { inset-inline: 16px; bottom: 14px; }
  .stage__cap-t { font-size: 17px; }
  :lang(ar) .stage__cap-t { font-size: 15px; line-height: 1.45; }
  html.phone-rails .stage__phone-meta {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    grid-column: 1;
    min-height: 34px;
    margin-block-start: -46px;
    padding-inline: 16px;
    pointer-events: none;
  }
  .stage__phone-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    padding-inline: 10px;
    border: 1px solid var(--bone-25);
    border-radius: var(--r-pill);
    background: var(--ink-72);
    color: var(--bone);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    direction: ltr;
    unicode-bidi: isolate;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .stage .reel {
    grid-column: 1;
    width: min(300px, 39.375svh);
    max-width: none;
    max-height: 70svh;
    margin-block: 14px 0;
    justify-self: center;
  }

  /* ---------- insights: a snap rail with a deliberate next-card peek ---------- */
  .insights { padding-block: 56px 36px; }
  .insights__body { min-width: 0; }
  .insights__list {
    display: flex;
    width: calc(100% + (2 * var(--gutter)));
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    padding-block: 2px 6px;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y; /* pan-x alone swallowed vertical swipes: the page stopped under the thumb (2026-10-05) */
  }
  .insights__list::-webkit-scrollbar { display: none; }
  .insights__list li {
    flex: 0 0 82%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .insight {
    min-height: 238px;
    padding: 20px;
    border-radius: 20px;
  }
  .insight__text { margin-block-start: 20px; }
  .insight__title { font-size: 1.2rem; }
  .insight__sub { font-size: 13.5px; line-height: 1.55; }
  html.phone-rails .insights__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 44px;
    margin-block-start: 2px;
  }
  /* a 44px finger target around a 7px dot */
  html.phone-rails .insights__dots button {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    background: none;
  }
  html.phone-rails .insights__dots button::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: var(--r-pill);
    background: var(--bone-25);
    transition: width 0.3s var(--ease-ui), background-color 0.3s var(--ease-ui), box-shadow 0.3s var(--ease-ui);
  }
  html.phone-rails .insights__dots button.is-active::before,
  html.phone-rails .insights__dots button[aria-current="true"]::before {
    width: 22px;
    background: var(--ember);
    box-shadow: 0 0 10px var(--ember-50);
  }
  :lang(ar) .insights__list,
  :lang(ar) .insights__dots { direction: rtl; }
  :lang(ar) .insight__title { font-size: 1.15rem; line-height: 1.65; }
  :lang(ar) .insight__sub { line-height: 1.7; }

  /* ---------- contact: a native-feeling stacked console ---------- */
  .contact { padding-block: 56px calc(42px + var(--phone-tab-h, 0px)); }
  .launch__head { gap: 14px; }
  .launch__lede { font-size: 14px; line-height: 1.7; }
  .console { margin-block-start: 20px; border-radius: 20px; }
  .console__body { grid-template-columns: minmax(0, 1fr); }
  .console__setup {
    gap: 2px;
    padding: 6px 6px 8px;
    border-inline-end: 0;
    border-block-end: 1px solid var(--bone-10);
  }
  .step { padding: 10px 8px; border-radius: 14px; }
  .step__lab { margin-block-end: 9px; gap: 6px 8px; line-height: 1.35; }
  .step__n { width: 22px; height: 22px; }
  .seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
  }
  .seg__opt {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--bone-14);
    border-radius: var(--r-pill);
    background: var(--bone-04);
  }
  .obj { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .obj__card { min-height: 56px; padding: 10px 12px; border-radius: 14px; }
  .obj__t { font-size: 14px; }
  .obj__d { display: none; }
  .chips { gap: 6px; }
  .chip { min-height: 44px; padding: 9px 13px; font-size: 13.5px; }
  .console__preview { gap: 12px; padding: 14px 12px 16px; background: none; }
  .preview__lab { font-size: 10px; }
  .chat { min-height: 0; border-radius: 16px; }
  .chat__who { gap: 10px; padding: 8px 12px; }
  .chat__who img { width: 30px; height: 30px; }
  .chat__thread { min-height: 104px; padding: 12px 10px; }
  .bubble { max-width: 96%; padding: 10px 11px 7px; font-size: 13.5px; line-height: 1.55; }
  .tiles { display: grid; gap: 6px; }
  .tile { min-width: 0; padding: 8px 8px 9px; border-radius: 12px; }
  .tile dt { font-size: 9px; }
  .tile b { margin-block: 2px 1px; font-size: 17px; }
  .tile dd span { display: block; font-size: 10px; line-height: 1.3; }
  .btn.launch__go {
    width: 100%;
    min-height: 56px;
    height: 56px;
    padding-inline-start: 18px;
    font-size: 15px;
  }
  .launch__label { flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1.1; }
  .launch__go .roll { text-shadow: none; }
  .launch__left { font-size: 9.5px; }
  :lang(ar) .launch__left { font-size: 11px; }

  @media (prefers-reduced-motion: reduce) {
    .insights__list,
    .stage__mosaic { scroll-behavior: auto; }
    .insights__dots button { transition: none; }
  }
}