/* =========================================================
   Pleiad Website Final · the phone build (21 Sep 2026)
   Loaded after style.css on every page. Every rule lives
   inside the phone query, so a wide window is untouched.
   js/mobile.js adds the thumb dock, the pagers under each
   swipe deck and the offer tabs; without it the decks still
   swipe and every offer still shows.

   M1  ground rules: thumbs, type, safe areas
   M2  the thumb dock
   M3  swipe decks (and their pagers)
   M4  home
   M5  offers: tabs, not a scroll of six
   M6  work and the case pages
   M7  about
   M8  contact
   M9  footer and menu
   ========================================================= */
@media (max-width: 760px) {

  /* ---------- M1. ground rules ---------- */
  :root { --m-dock: 64px; --m-safe: env(safe-area-inset-bottom, 0px); --m-top: 86px; }
  body.page-sub { --m-top: 66px; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--m-top); }
  body { -webkit-tap-highlight-color: rgba(7,72,254,.12); }
  body.m-has-dock { padding-bottom: 0; }
  body.m-has-dock .foot { padding-bottom: calc(var(--m-dock) + var(--m-safe) + 34px); }

  /* everything a thumb is meant to hit gets 44px of height */
  .btn { min-height: 50px; }
  .bar__menu { min-height: 44px; padding-left: 12px; }
  .page-back, [data-page-back] { min-height: 40px; }
  .faq__item summary, .faq__list--foot .faq__item summary { min-height: 58px; padding-top: 12px; padding-bottom: 12px; }
  .dxqa summary { min-height: 56px; }
  .foot__cols a, .menu__socials a { display: flex; align-items: center; min-height: 44px; }
  .foot__cols li { margin: 0; }
  .foot__legal a, .foot__top { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; }
  .wcard__go, .cs__next a, .dxo__proof { min-height: 44px; }
  .cell__go, .reply__go, .acta__mail { display: inline-flex; align-items: center; min-height: 44px; }
  .founder__name { min-height: 44px; }
  .film__play, .film__full, .cs__play, .omw-cs, #omwPrev, #omwNext { width: 44px; height: 44px; }
  .omw-mt .omw-tag { font-size: 10.5px; min-height: 34px; padding: 0 12px; }
  /* the ruler's stars stay small to the eye; the thumb gets a wider landing */
  .r-star::after { content: ""; position: absolute; inset: -9px -5px -14px; }

  /* the hover notes that only make sense with a mouse step aside */
  .hand--drag { display: none !important; }

  /* ---------- M2. the thumb dock ---------- */
  .mdock {
    position: fixed; z-index: 70; left: 10px; right: 10px; bottom: calc(10px + var(--m-safe));
    height: var(--m-dock); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; gap: 2px;
    padding: 6px 6px 6px 8px; border-radius: 22px;
    background: rgba(9,13,26,.82); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 40px -14px rgba(1,10,40,.7), 0 0 0 .5px rgba(0,0,0,.4);
    transform: translateY(calc(100% + 30px)); opacity: 0; visibility: hidden;
    transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s .5s;
  }
  .mdock.is-up { transform: none; opacity: 1; visibility: visible; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .3s, visibility 0s; }
  body.menu-open .mdock, body.m-typing .mdock { transform: translateY(calc(100% + 30px)); opacity: 0; visibility: hidden; }
  .mdock a { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; height: 100%; min-width: 0; border-radius: 16px; color: rgba(255,255,255,.62); text-decoration: none; font: 600 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: color .25s, background-color .25s; }
  .mdock a svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .mdock a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.1); }
  .mdock a[aria-current="page"]::after { content: ""; position: absolute; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--blue-300, #7d9bff); }
  .mdock a:active { background: rgba(255,255,255,.16); }
  .mdock .mdock__cta { grid-auto-flow: column; gap: 8px; padding: 0 18px; margin-left: 6px; color: #fff; background: var(--blue, #0748FE); font: 600 14px var(--sans); letter-spacing: 0; text-transform: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  .mdock .mdock__cta svg { width: 17px; height: 17px; }
  .mdock .mdock__cta:active { background: #0a3ad0; }
  .mdock a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  @media (max-width: 359px) { .mdock a { font-size: 8.5px; letter-spacing: .06em; } .mdock .mdock__cta { padding: 0 13px; font-size: 13px; } }
  @media (prefers-reduced-motion: reduce) { .mdock, .mdock.is-up { transition: opacity .2s, visibility 0s; transform: none; } }

  /* ---------- M3. swipe decks ---------- */
  /* One rule set for every row that swipes: full bleed, one card and a sliver of the next, snaps to the page margin. */
  .proll__stage, .disc:not(.disc--compact) .disc__grid, .dxp, .dxr__deck, .dxh__cards, .dxt {
    display: flex !important; flex-direction: row; align-items: stretch; gap: 12px;
    max-width: none; width: auto; margin-left: 0; margin-right: 0; padding-left: var(--pad); padding-right: var(--pad);
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-left: var(--pad); -webkit-overflow-scrolling: touch; scrollbar-width: none;
    padding-bottom: 8px;
  }
  .proll__stage::-webkit-scrollbar, .disc__grid::-webkit-scrollbar, .dxp::-webkit-scrollbar, .dxr__deck::-webkit-scrollbar, .dxh__cards::-webkit-scrollbar, .dxt::-webkit-scrollbar, .dxf::-webkit-scrollbar, .dxo__nav ol::-webkit-scrollbar { display: none; }
  .disc:not(.disc--compact) .disc__grid > *, .dxp > *, .dxr__deck > *, .dxt > * { flex: 0 0 86%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  /* whatever sits in a deck shows: a card waiting off to the right never meets the reveal observer */
  .dxt > .reveal, .dxp > .reveal, .disc__grid > .reveal, .dxr__deck > .reveal { opacity: 1 !important; transform: none !important; }

  .mpager { display: flex; align-items: center; gap: 12px; margin: 14px var(--pad) 0; color: var(--text-muted); font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
  .mpager__dots { display: flex; gap: 6px; }
  .mpager__dots i { width: 6px; height: 6px; border-radius: 99px; background: currentColor; opacity: .3; transition: width .35s cubic-bezier(.2,.8,.2,1), opacity .35s, background-color .35s; }
  .mpager__dots i.on { width: 22px; opacity: 1; background: var(--blue); }
  .mpager__n { font-variant-numeric: tabular-nums; }
  .mpager__hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; opacity: .8; transition: opacity .4s; }
  .mpager__hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; animation: mSwipe 1.8s cubic-bezier(.4,0,.2,1) infinite; }
  .mpager.is-used .mpager__hint { opacity: 0; }
  .mpager--ink { color: rgba(255,255,255,.6); }
  .mpager--ink .mpager__dots i.on { background: #fff; }
  @keyframes mSwipe { 0%, 100% { transform: translateX(3px); } 50% { transform: translateX(-4px); } }
  @media (prefers-reduced-motion: reduce) { .mpager__hint svg { animation: none; } }

  /* ---------- M4. home ---------- */
  .hero__body { padding-bottom: 64px; }
  .hero__title { font-size: clamp(44px, 13.4vw, 60px); line-height: .92; margin-bottom: 20px; }

  /* the four moves: one thread at a time, swiped */
  .proll__stage { display: grid !important; grid-template-rows: auto 1fr; grid-auto-flow: column; grid-auto-columns: 88%; gap: 14px 12px; justify-items: stretch; margin-top: 30px; }
  .proll__title, .proll__card { max-width: none; scroll-snap-align: start; }
  .proll__title { grid-row: 1; border-top: 0; padding-top: 0; align-self: end; }
  .proll__card { grid-row: 2; margin-bottom: 0; align-self: start; }
  .proll__col--l > :nth-child(1), .proll__col--r > :nth-child(1) { grid-column: 1; order: 0; }
  .proll__col--l > :nth-child(2), .proll__col--r > :nth-child(2) { grid-column: 2; order: 0; }
  .proll__col--l > :nth-child(3), .proll__col--r > :nth-child(3) { grid-column: 3; order: 0; }
  .proll__col--l > :nth-child(4), .proll__col--r > :nth-child(4) { grid-column: 4; order: 0; }
  .proll__card { scroll-snap-stop: always; }
  .proll__title h3 { font-size: 34px; }
  /* a grid that scrolls sideways drops its end padding; this spacer keeps the last thread off the edge */
  .proll__stage::after { content: ""; grid-column: 5; grid-row: 1 / 3; width: calc(var(--pad) - 12px); }

  /* ---------- M5. offers ---------- */
  .disc:not(.disc--compact) .disc__grid { margin-top: 34px; }
  .disc:not(.disc--compact) .disc__grid > * { flex-basis: 78%; }

  /* the six offers become tabs: a row of chips that stays under the bar, one offer on the sheet at a time */
  .dxo { grid-template-columns: minmax(0, 1fr); }
  .dxo > * { min-width: 0; }
  .dxo.m-tabs { gap: 18px; }
  .dxo.m-tabs .dxo__nav { position: sticky; top: var(--m-top); z-index: 20; margin: 0 calc(var(--pad) * -1); padding: 10px 0; background: rgba(246,246,242,.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-2); }
  .dxo.m-tabs .dxo__navcta { display: none; }
  .dxo.m-tabs .dxo__nav ol { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0 var(--pad); scroll-padding-inline: var(--pad); }
  .dxo.m-tabs .dxo__nav li { flex: 0 0 auto; }
  .dxo.m-tabs .dxo__nav a { min-height: 44px; align-items: center; padding: 0 16px; font-size: 15px; white-space: nowrap; }
  .dxo.m-tabs .dxo__nav a[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
  .dxo.m-tabs .dxo__nav a[aria-selected="true"] .lab { color: var(--blue-100, #b9c8ff); }
  .dxo.m-tabs .dxo__svc { display: none; }
  .dxo.m-tabs .dxo__svc.is-on { display: grid; opacity: 1 !important; transform: none !important; animation: mTabIn .45s cubic-bezier(.2,.8,.2,1); }
  .dxo__svc { scroll-margin-top: calc(var(--m-top) + 76px); padding: 24px 20px; border-radius: 20px; gap: 24px; }
  .mtabs__next { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 0 20px; border-radius: 18px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 17px var(--sans); text-align: left; width: 100%; }
  .mtabs__next .lab { color: var(--blue); display: block; margin-bottom: 2px; }
  .mtabs__next svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  @keyframes mTabIn { from { opacity: 0; transform: translateY(14px); } }
  @media (prefers-reduced-motion: reduce) { .dxo.m-tabs .dxo__svc.is-on { animation: none; } }

  /* the three scopes swipe; the picked one leads the way it does on a wide screen */
  .dxp { margin-top: 34px; align-items: stretch; }
  .dxp > * { flex-basis: 84%; }
  .dxp__card { padding: 24px 22px; }

  /* ---------- M6. work and the case pages ---------- */
  .dxf { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad) * -1); padding: 2px var(--pad); scroll-padding-inline: var(--pad); }
  .dxf__chip { flex: 0 0 auto; min-height: 44px; padding: 0 16px; }
  .cs__next a { display: block; }

  /* ---------- M7. about ---------- */
  .dxt { margin-left: calc(var(--pad) * -1); margin-right: calc(var(--pad) * -1); }
  .dxr__pin, .dxr__deck { display: block; }
  .dxr { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: none; }
  .dxr__deck > * { flex-basis: 88%; }
  .dxr__card { height: auto; }
  .dxh__cards { gap: 14px; padding-top: 16px; padding-bottom: 14px; }
  .dxh__cards > .dxh__card, .dxh__cards > .dxh__card:nth-child(even) { flex: 0 0 64%; width: auto; scroll-snap-align: start; justify-self: auto; }
  .dxh, .dxh__stage { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; max-width: none; }
  .dxh__comm { margin-left: var(--pad); margin-right: var(--pad); }

  /* ---------- M8. contact ---------- */
  /* 16px stops iOS zooming the page when a field takes focus */
  input, select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select { min-height: 44px; }

  /* ---------- M9. footer and menu ---------- */
  .menu__list a { min-height: 56px; }
}