/* B286 · the phone pass, finished. Phone-only (max-width:640px). Laptop pixels do not move. Works on top of phone-b285.css.
   1. The Ask button starts hidden on phones; fab-b286.js reveals it once fab-b271.js has decided where it belongs.
   2. The OKR hero: one focused moment in a fixed stage, so the demo is short and nothing grows or gets cut off.
   3. Field notes and the manifesto: a reading treatment (measure, serif rhythm, figures that fit and run to the edges,
      quiet asides, the end of the note as one calm sequence).
   4. Status: the command fits on one line, the checks read as a ruled list.
   5. Founders: the publications lose their outer card, so the cover image is the only card. */

/* ---------- 1 · the Ask button's first paint ---------- */
@media (max-width:640px){
  .px-askfab:not(.fab-ready){opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:none!important}
}

@media (max-width:640px){

  /* ---------- 2 · the OKR hero: one moment, a fixed stage ---------- */
  .okx-hero .sx-hero-g{row-gap:32px!important}
  .okx-hero .okx{position:relative}
  .okx-hero .okx-main{grid-template-areas:"top" "focus" "stage" "done"!important;grid-template-rows:none!important;gap:10px!important}
  .okx-hero .okx-top{margin:0 0 2px!important}
  .okx-hero .okx-top h3{padding-right:84px}
  .okx-hero .okx-top h3{font-size:19px!important}
  .okx-hero .okx-replay{top:0!important;bottom:auto!important;right:0!important;min-height:32px}
  .okx-hero .okx-nums{display:none!important}
  .okx-hero .okx-focus{padding:16px 18px!important}
  .okx-hero .okx-focus h4{margin-top:12px!important}
  .okx-hero .okx-big strong{font-size:40px!important}
  .okx-hero .okx-chart{height:64px!important;margin-top:12px!important}
  .okx-hero .okx-f-foot{padding-top:14px!important}
  /* the agent's work and the approval share one slot, so the stage never changes height */
  .okx-hero .okx.okx .okx-agent,.okx-hero .okx.okx .okx-ok{grid-area:stage!important;display:block!important;align-self:stretch;transition:opacity .35s ease,visibility 0s linear 0s}
  .okx-hero .okx.okx:is(.s0,.s1,.s2,.s3) .okx-ok,
  .okx-hero .okx.okx:not(.s0):not(.s1):not(.s2):not(.s3) .okx-agent{opacity:0!important;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
  .okx-hero .okx .okx-steps{margin:14px 0 0!important;padding:0 0 0 2px!important}
  .okx-hero .okx.okx .okx-steps li{display:grid!important;animation:none!important}
  .okx-hero .okx.s0 .okx-steps::before{opacity:0}
  .okx-hero .okx.s0 .okx-steps li,.okx-hero .okx.s1 .okx-steps li:nth-child(n+2),.okx-hero .okx.s2 .okx-steps li:nth-child(n+3){opacity:0!important;transform:translateY(6px)}
  .okx-hero .okx.okx .okx-ok{animation:none!important}
  .okx-hero .okx.okx .okx-done{display:flex!important;margin:2px 0 0!important;font-size:13px!important;animation:none!important;transition:opacity .35s}
  .okx-hero .okx:is(.s0,.s1,.s2,.s3,.s4) .okx-done{opacity:0!important;filter:none!important}

  /* ---------- 3 · field notes and the manifesto: reading ---------- */
  .px-art{--rd-bleed:calc(50% - 50vw);--rd-pad:max(16px,calc(50vw - 50%))}
  .px-ahero .px-hk .px-no{white-space:nowrap}
  .px-ahero .rlede{font-size:19.5px!important;line-height:1.5!important}
  .px-art .prose p{text-wrap:pretty}
  .px-art .prose>p:not([class]),.px-art .prose>:is(.section,.mf-open,.closing)>p:not([class]){font-size:18.5px;line-height:1.62;color:#1f2a44}
  .px-art .prose p.opener{line-height:1.55}
  .px-art .prose h2{font-size:26px!important;line-height:1.16!important;letter-spacing:-.025em!important;margin-bottom:18px!important;text-wrap:balance}
  .px-art .prose .section-number{margin-top:56px!important}

  /* asides: a rule in the margin, not a box */
  .px-art .epistemic{background:none!important;border:0!important;border-left:2px solid var(--px-acc,#1559f5)!important;border-radius:0!important;padding:2px 0 2px 18px!important;margin-bottom:40px!important;font-size:17px!important;line-height:1.6!important}
  .px-art .prose .pull{font-size:23px!important;line-height:1.36!important;margin:40px 0!important;padding-left:20px!important}
  .px-art .context-block{margin-left:var(--rd-bleed)!important;margin-right:var(--rd-bleed)!important;border-radius:0!important;padding-left:var(--rd-pad)!important;padding-right:var(--rd-pad)!important}

  /* figures run to the screen's edges between two hairlines: one frame, never a card around a card */
  .px-art :is(.trajcard,.lineage,.repocard,.fx-card,.px-yield,.contribution-hero,.ledger,.matchtable,.pm-machine,.pm-timeline){margin-left:var(--rd-bleed)!important;margin-right:var(--rd-bleed)!important;border-left:0!important;border-right:0!important;border-radius:0!important;box-shadow:none!important}
  .px-art :is(.trajcard,.repocard,.fx-card,.px-yield,.contribution-hero){padding-left:var(--rd-pad)!important;padding-right:var(--rd-pad)!important}
  .px-art :is(.ledger,.matchtable,.pm-machine,.pm-timeline){padding-left:calc(var(--rd-pad) - 16px)!important;padding-right:calc(var(--rd-pad) - 16px)!important}
  .px-art figure.photo{margin-left:var(--rd-bleed)!important;margin-right:var(--rd-bleed)!important}
  .px-art figure.photo img{border-radius:0!important}
  .px-art figure.photo figcaption{padding-left:var(--rd-pad);padding-right:var(--rd-pad)}
  .px-art .tc-f,.px-art .px-note-s,.px-art .fx-note{font-size:14px!important;line-height:1.5!important}

  /* the lineage: a vertical timeline instead of a strip that scrolls sideways */
  .px-art .lineage{overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;padding-top:22px!important;padding-bottom:8px!important}
  .px-art .lineage .lg-k{padding:0 var(--rd-pad)!important}
  .px-art .lg-row{display:block!important;min-width:0!important;margin-top:18px!important;padding:0 var(--rd-pad)!important;position:relative}
  .px-art .lg-row::before{top:8px!important;bottom:22px!important;left:calc(var(--rd-pad) + 5px)!important;right:auto!important;width:1px!important;height:auto!important}
  .px-art .lg-item{display:grid!important;grid-template-columns:92px minmax(0,1fr);column-gap:12px;align-items:baseline;padding:0 0 14px 26px!important}
  .px-art .lg-item::before{top:6px!important}
  .px-art .lg-y{grid-row:1/3;font-size:13px!important}
  .px-art .lg-n{margin-top:0!important}
  .px-art .lg-w{font-size:14px!important}

  /* the waves: drawn at a size where their labels read, in a strip that scrolls sideways (waves-b286.js makes it focusable) */
  .px-art figure.waves{margin-left:var(--rd-bleed)!important;margin-right:var(--rd-bleed)!important;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 var(--rd-pad)}
  .px-art figure.waves::-webkit-scrollbar{display:none}
  .px-art figure.waves:focus-visible{outline:2px solid #1559f5;outline-offset:-2px}
  .px-art figure.waves svg{width:640px!important;max-width:none!important;height:auto;scroll-snap-align:start;scroll-margin-left:var(--rd-pad)}

  /* the manifesto's yield chart: the country names on one line, the bars as wide as the screen allows */
  .px-art .px-bar{grid-template-columns:96px minmax(0,1fr)!important;column-gap:12px!important}
  .px-art .px-bar .px-c{font-size:14px!important;white-space:nowrap}

  /* dark bands run to the edges */
  .px-art :is(.cry,.convo){margin-left:var(--rd-bleed)!important;margin-right:var(--rd-bleed)!important;border-radius:0!important;padding:36px var(--rd-pad)!important}
  .px-art .cry .cs{display:flex;flex-wrap:wrap;gap:2px 6px}

  /* the end of the note: next note as a ruled block, buttons that hold their words */
  .px-art .morecard{background:none!important;border:0!important;border-top:1px solid var(--px-line,#e3e8f2)!important;border-radius:0!important;padding:22px 0 26px!important;margin-bottom:36px!important}
  .px-art .morecard .px-go{right:0!important}
  .px-art .closing-cta .licta{width:100%;justify-content:center;padding:0 16px!important;font-size:15.5px!important;line-height:1.25!important}
  .px-author-links a{line-height:1.25!important;padding:10px 18px!important;text-align:left}
  .px-art .px-refs{margin-top:16px!important}

  /* the flag and the trajectory: chart words drawn at a size that reads on a phone */
  .px-art .trajcard svg text{font-size:23px!important;letter-spacing:0!important}
  .px-art .trajcard svg text[letter-spacing="7"]{font-size:26px!important;letter-spacing:9px!important}
  .px-art .trajcard .tj-l{paint-order:stroke;stroke:#fff;stroke-width:8px;stroke-linejoin:round}
  .px-art .trajcard .tj-l1{transform:translate(50px,4px)}
  .px-art .trajcard .tj-l2{transform:translate(70px,60px)}

  /* the kicker breaks between its parts, never inside one */
  .px-ahero .px-hk{text-wrap:balance}

  /* the ledger's head: the label across the top, the link under it */
  .px-art .ledger .lh{flex-wrap:wrap;row-gap:0;padding-left:var(--rd-pad)!important;padding-right:calc(var(--rd-pad) - 12px)!important}
  .px-art .ledger .lh>span{flex:1 0 100%;padding-top:4px}
  .px-art .ledger .lh a{margin-left:-12px}

  /* receipts: each dot travels with its word, so a line never ends on a dot */
  .px-art .receiptsline .rdot{display:none}
  .px-art .receiptsline span:not(.rword):not(.rdot)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:1px;background:var(--px-acc);vertical-align:middle;margin:0 8px 2px 0}

  /* ---------- 4 · status ---------- */
  .st-sec .st-rows{box-shadow:none!important;border-radius:0!important;background:none!important;border-top:1px solid #e4e9f2}
  .st-sec .st-rows>li{padding-left:0!important;padding-right:0!important;background:none!important}
  .st-sec pre{white-space:pre-wrap!important;word-break:normal!important;overflow-wrap:normal!important;overflow-x:auto;font-size:12.5px!important;line-height:1.6!important;padding:16px!important;border-radius:12px!important}

  /* ---------- 5 · founders: the cover image is the only card ---------- */
  .wp .wp-pubs{gap:48px!important}
  .wp .wp-pub{background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
  .wp .wp-cover{margin:0 -20px!important;padding:24px 20px 52px!important}
  .wp .wp-body{padding:0!important;margin-top:-18px!important}
  .fd-duo .fd-card{background:none!important;box-shadow:none!important;border-radius:0!important;padding-left:0!important;padding-right:0!important}
  .fd-duo .fd-card+.fd-card{border-top:1px solid rgba(10,22,51,.08)}
}